Tutorials

This section includes several tutorials for integrating Passport XYZ into your apps.

• Gating access with Passport scores
• Retrieve Passport data and display it to your UI
• How to retrieve, handle and display Stamp metadata in a simple app
• Requiring a Passport score for airdrop claim
• Integrating onchain Stamp data using smart contracts

Where to start

To take your very first steps into building apps with Passport XYZ, you can visit either the API access page, followed by the Quick Start guide.

If you need additional support or you have questions about developing with Passport, you can chat in our dedicated developer support channel on Telegram (opens in a new tab).

Tutorials

Gating access with Passport scores

This tutorial will guide you through building a simple "knowledge hub" app with some specific content that can only be accessed by users with a Passport score above a threshold. Read more about thresholds on the scoring thresholds page.

The app is built using Next.js (opens in a new tab), Chakra-ui (opens in a new tab), and ethers (opens in a new tab).

Integrating Stamps and scores

This tutorial will guide you through building a simple app that shows whether a user is "trusted" or not based upon their Passport score and ownership of specific Stamps. Multiple users can connect to the app and the Stamps they own are displayed in the app's UI.

The app is built using Next.js (opens in a new tab), Chakra-ui (opens in a new tab), and ethers (opens in a new tab).

How to retrieve, handle and display Stamp metadata in a simple app

This tutorial will guide you through building a simple app that displays the Stamps that are connected to a specified wallet and Passport.

The app is built using Next.js (opens in a new tab), Chakra-ui (opens in a new tab), and ethers (opens in a new tab).

Requiring a Passport score for airdrop claim

This guide demonstrates using Passport scores to shield your airdrop from airdrop farmers and other bad actors.

This app is built using Next.js (opens in a new tab), RainbowKit (opens in a new tab), and wagmi (opens in a new tab).

How to integrate onchain Passport data using smart contracts

Please note that this tutorial is not related to the Passport API, and instead uses the Passport smart contract stack.

This tutorial will guide you how to show different content to users depending on their Passport data, all pulled from the blockchain.

The app is built using Next.js (opens in a new tab), Chakra-ui (opens in a new tab), and ethers (opens in a new tab).