Skip to main content

Creating a Restricted Application based on NFTs

We have created a template for you to use your Edition Drop to restrict access to the application to only holders of an NFT in your collection.

In the example, we also provide a page for users to claim one of your NFTs to then access the website too.

info

In this section, we assume you have some knowledge of how to run commands, and have Node JS installed on your machine.

Cloning the Token Gated Membership Example Repository​

You can create your copy of this template repository by using the thirdweb CLI, or downloading the repository as a .zip file and unzipping it from the GitHub URL.

npx thirdweb create --template nft-gated-website

To start running the code locally, run the command below.

cd nft-gated-website # this is the name of your project you created
npm run dev # run the local dev server

Configure your Edition Drop Contract Address​

Replace the value of the contract address inside of the yourDetails.js file with the address of your Edition Drop contract.

Configure the Network​

In our example repository, we enforce users to be on the Mumbai test network when checking whether the user owns one of the NFTs.

If you are on a different network, you'll need to configure this value inside the index.js file.

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

We also ensure users are on the correct network when they click the mint button, so you'll need to configure this here too:

if (networkMismatch) {
  switchNetwork(ChainId.Mumbai); // Configure this to your network
  return;
}

Configure the Styles​

You can configure any of the styles inside the /styles directory to change the look and feel of the application to match your brand.