Build NFT Gated Dapp
In this tutorial we will see how we can use NFTs as an access token to a web portal.
Last updated
Was this helpful?
In this tutorial we will see how we can use NFTs as an access token to a web portal.
Last updated
Was this helpful?
In this sample project tutorial, we will learn about Utility NFTs and how we can use an NFT as an access token to a web portal.
By the end of this tutorial, you will be able to build your very own NFT gated dapp similar to
Utility NFTs, or NFTs with utility are special kind of NFTs which have use cases that go beyond just being one-of-a-kind NFTs. They are NFTs that give their owners special privileges, access rights, or prizes that they would not otherwise have.
Utility NFTs may be useful in various scenarios. One such scenario may be, if we have a private party, and 200 people are to be invited, we can printout and issue 200 invitation passes. Each pass will be non-fungible. However, every individual pass grants the same privilege, in this instance that is admission to the private party. The party organizer could provide 200 utility NFTs instead of 200 printed invitations. The NFTs will be distinct, non-fungible, and will function exactly like the printed invitation, i.e. they will grant admission to the private party.
To get started, we will need a few things.
We will need the Phantom wallet browser extension, you can download it from the link below.
If we cannot find the specified NFT, we can provide the user an option to mint a new NFT using SHYFT APIs.
Create React App
To create a new react app, navigate to the directory in which you want to create a react app and open the terminal in that particular directory. Then use the following command to create a new react application.
This will create a new react application and we will be all set to start creating our new react application.
Code Editor
For connecting the wallet, we install and use the following packages,
and we will need the following packages for making a network request.
We create a function that we will use to connect a wallet, and we will execute this function when we click on the connect wallet. Before that, we create a few state variables using react's very own useState hook for storing the wallet address and checking if we have access to the portal or not.
Now we create the connect wallet function.
There are several other methods that can be used to connect wallets, we have used this one, but can use any method you feel like. You can even take the wallet address as an input field directly.
Once connected, we are ready to make our API call. We use react's useEffect hook to make the API call, and we add the walletId state variable as a dependency, so that the API call takes place whenever the walletId changes.
Getting Your Own X-API-KEY
Now, once we have the wallet address, we are ready to make the API call to fetch our required data which in this case is the token list.
To fetch the data, we have used the axios package, but you can use JavaScript's very own fetch or any other package you want. We have made this call inside React's useEffect hook. Here is the code.
Our API endpoint for reading al NFTs
If the response from this API is true, we should have a response that looks somewhat like this.
If successful and the length of the nfts array is greater than 0, it would imply that we have at least one NFT whose update_authority is the wallet address which we are using for authentication (update_authority = AagBXTi3HHFNMqTcWm3oYoQYSuUj1LGvb12vsPB if AagBXTi3HHFNMqTcWm3oYoQYSuUj1LGvb12vsPB is the wallet address we are using for authentication). We can also perform checking on NFTs with specific attributes, and check if the user's wallet has one NFT with some specified value such as "health:50" or "Power: 100", or maybe an attribute as a password, for that we would need to iterate through the nfts array and check if any element of the array has an attribute.
Once authenticated we can redirect the user to our access portal.
If the authentication fails, that is, if the user does not have the NFT in their wallet, we can give them an option to mint an NFT from another wallet, we hope to illustrate this soon in our more upcoming tutorials.
Even though discovering real-world use cases for NFTs is at a very early stage, the cryptographically distinct tokens have the potential to be more than just JPEGs stored on a specific blockchain. Utility NFTs, or NFTs with real-world applications, may potentially be the catalyst for the transition of NFTs from just an investment fad to a brand new mode of interaction, play, and work. In the following sample project tutorial, we will see how we can use an NFT as an access token. We will check if one particular NFT is in your wallet or not (using ), and accordingly, we will grant you access to a portal.
Read SHYFT Documentation .
x-api-key is an authentication parameter, which gives you access to SHYFT APIs. You can get your own API Key from the . Just signup with your email id and you can get it for free.
.
.
Once done, set up your Phantom wallet account. On-screen tips are available, which will guide you through setting up and getting started. You can also find a detailed guide related to this .
We will use to develop this project but you can choose any language of your choice. As we are using react we will need Node.js installed on our computer. You can download node.js from .
In this sample project, we will design a web portal and grant users access to that particular web portal based on one particular type of NFT in their wallet. We will first use read_all API to access a list of all NFTs in the user's wallet and check for an NFT with a specified update authority, or any specific attribute. If found, we will navigate the user to a new web portal.
We have used as our code editor for this project but you can use any editor of your choice such as Sublime text, Notepad++, Atom, or any editor of your choice. Once decided, let's open up our project in VScode editor. It should look something like this.
Let's create a new module that will connect our wallet and check if one particular NFT is present in your wallet or not. We will need a few packages to get this module working. We have also used some of these modules in our previous projects, you can find the details .
Once done, let's create a react component for connecting the wallet. We will add a simple button that will connect the wallet and will get your wallet address. Once we have the wallet address, we will use to get all the wallet NFTs for checking purposes. Please note that we have used very preliminary styling for our sample project, but you can add styles of your own if you want.
Before making the API calls, we will need the . We will need to pass X-API-KEY in the header, this key is used for authentication purposes.
You can find more about our APIs .
x-api-key is an important parameter we pass on to the header while making the API call for authentication purposes. You can get your own x-api-key from our own . Just signup with your email id and you can get it for free.
That is all regarding this sample project tutorial, where we see how we can use NFT as an access token to access a portal. If you enjoyed this tutorial and want to give our code a whirl, or make some contributions, here is a to this sample project.
Don't forget to experience the full flow .
Join our
If you liked this, you can also read our tutorials on or .
Hope you have a great time building Dapps with APIs. Happy Hacking!!
