thirdweb: Create a Gated Website Using NFTs and IPFS

Learn how to create a gated website using NFTs and IPFS.

What is thirdweb?

thirdweb is an easy-to-use platform to build Web3 applications with code or no-code. thirdweb makes creating and deploying apps such as NFT collections or NFT marketplaces easy. thirdweb can be used with objects stored on IPFS, so objects stored in a Filebase IPFS bucket can be seamlessly uploaded for use with a thirdweb app.

Read below to learn how to create a gated website using NFTs and IPFS.

Prerequisites:

• A crypto wallet, such as MetaMask, using the Polygon Mumbai network.

• Create a folder of images you’d like to use as NFT images for your NFT drop.

• Download and install NodeJS.

• Have an IDE or text editor for making changes to snippets of code.

• Sign up for a free Filebase account.

1. Start by navigating to the thirdweb dashboard and connecting your Cryptowallet.

2. Select ‘Deploy New Contract'.

3. Under 'Popular', select ‘Edition Drop’:

Then select 'Deploy Now'.

4. Give your NFT collection a name, icon, and description, then confirm that the recipient address is your crypto wallet address.

For this tutorial, we’ll be using the Mumbai testnet, so we are using a Mumbai wallet.

5. Select ‘Deploy Now’ and confirm the transaction through your crypto wallet.

6. Next, we need to create an IPFS bucket on Filebase.

To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.

7. Select ‘Buckets’ from the left sidebar menu, or navigate to.

Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.

8. Enter a bucket name and choose the IPFS storage network to create the bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

9. Now, upload your NFTs to Filebase using the web console and selecting ‘Folder’, then select the folder that contains your NFT files.

These files need to be named in sequential order, such as 0.png, 1.png, 2.png, etc.

10. You will see your folder uploaded as a single object:

11. Copy the CID of your folder:

12. Navigate to your IPFS Folder using the Filebase IPFS gateway to see your folder’s files:

https://ipfs.filebase.io/ipfs/IPFS_CID

Take note of this URL.

13. Head back to the thirdweb dashboard, where you will see the page for your NFT collection.

Select the ‘Code’ tab. This code showcases different code snippets to use to mint your NFTs using scripts, with your contract address and crypto wallet address inputted automatically for easy copy and paste. This tutorial will showcase the JavaScript code examples, but you can use any of the languages showcased in this Code tab. You can follow along with the code examples showcased in this tutorial, or copy and paste the snippets provided in this tab.

14. Open a command line window and install the thirdweb SDK:

npm install @thirdweb-dev/sdk

15. Open an IDE such as VSCode and insert the following code, replacing CONTRACT with your contract address, WALLET_ADDRESS with your crypto wallet address, each IPFS_CID with your IPFS folder CID you took note of earlier and replacing the name and description of each NFT with your desired information.

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

const sdk = new ThirdwebSDK("mumbai");
const contract = sdk.getContract("CONTRACT", "edition-drop");

// Custom metadata of the NFTs to create
const metadatas = [{
  name: "Cool NFT",
  description: "This is a cool NFT",
  image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/0.png"), // This can be an image url or file
},
}];

const results = await contract.createBatch(metadatas); // uploads and creates the NFTs on chain
const firstTokenId = results[0].id; // token id of the first created NFT
const firstNFT = await results[0].data(); // (optional) fetch details of the first created NFT

16. Save this script as mint.js, then run this script with the command:

node mint.js

17. Refresh your thirdweb dashboard. Your NFT(s) will be listed.

18. Select ‘Settings’, then select ‘Add Initial Claim Phase’ to configure your drop’s claim phases.

This will determine who is able to claim this NFT.

19. Configure your claim phase with your desired parameters, then select ‘Save Claim Phases’.

20. Copy your NFT Edition Drop’s contract address and save it to be used later in the tutorial.

21. Next, we’ll use a template repository to create a gated website that uses our NFT Edition Drop.

Open a command-line window, then create a project with this template with the following command:

npx create-tw-app --example nft-gated-website

22. Install the project’s dependencies.

cd nft-gated-website

npm install

23. Start the app.

npm run dev

24. Open the src/App.js file.

Replace the following value with the contract address you took note of earlier.

// Replace this address with your NFT Drop address!
const editionDrop = useEditionDrop(
"CONTRACT_ADDRESS"

25. By default, the app will be running at 127.0.0.1, and will look like this:

You can change the text, style, and any other aspect of this webpage by editing the src/App.js file.

26. Select ‘Connect MetaMask’ to connect your cryptowallet to the website.

27. Select ‘Mint NFT’ to claim your NFT membership drop. Authorize the transaction through your cryptowallet.

28. You should see the confirmation message indicating the successful mint of your drop NFT.

You can also change this text in the src/App.js file to reflect your NFT drop.

Using this example, you can expand on and create a landing page that NFT holders are redirected to after minting their membership NFT, creating a gated website exclusive to your NFT holders!