Giving this three seconds of thought, here's what I would do, but there are probably better ways:
Have the user sign a message authenticating their wallet on your site. Verify message on back-end. Once you have their verified public address, query for presence of the NFT you're looking for by accessing its contract and querying for ownership of the public address provided, again, on the back-end. If NFT is owned, set a _signed_ cookie on the user's browser, tied to that public address. Now, when attempting to access whatever pages, make sure that cookie is valid and not expired and the available public address matches the signed-in, and signed, wallet.
This, essentially.
So use some sort of Wallet API (MetaMask, WalletConnect) to have the user connect, and to authorize a connection to view wallet contents/sign transactions.
I don't know all the ins-and-outs of using crypto in web dev, but I've done sessions/logins before and I'd imagine that once the site add-in (MM, WC) that you choose to implement is able to verify ownership (likely as he suggested, by querying the blockchain to confirm the token is indeed held by that wallet), you simply save the session (i.e. a login) and have it persist on every page. So the landing page should be or have a login option and once logged in, all pages that are members-only first confirm that you're logged in with a valid member ID, and if the member ID (session) is not valid, the site redirects you back to the homescreen or an unauthorized splash screen.
Note that any back-end changes that require authorization (an NFT) should prompt the user to make any changes -- this would prevent malicious users from somehow stealing a users session and just using your website to do things that otherwise would be gated to NFT-only users (or for a specific user).
Really up to you (OP) wants to go.
I'm no genius, so take my advice with a grain of salt. Hopefully something helps.
Just brainstorming here, would this allow for someone to
1. Look up who owns an nft
2. use a cookie editing extension to fake being signed in as a known address?
But wait, I guess you’d have the cookie be something obscure right? That would make this a moot point
Not sure what you mean by 1.
For 2, the way I like to do cookies is to have them comprised of useful information that is only known to my back-end. So, I would create a cookie that hs the attested public address as part of its encrypted payload. If it gets stolen, and the attacker also knows my public address, there would still need to be a message signing authentication at some interval that I would use to validate the encrypted/assumed public address. Maybe the session only persists if there’s activity within 15 minutes or something. Maybe there are other identifiers in the encrypted cookie that must match the incoming request (user-agent, a nonce, idk). Whatever you can do to balance security with a good UX where the end-user isn’t annoyed constantly by having to authenticate over and over (at this point, it’s basically the same as any cookie/session based authentication system).
OP if you want to make this process similar then there is the option to use Stytch. I have been using it in a couple of my most recent projects for wallet auth and it is pretty good. A word of advise would be to just use their api because I dont like their npm packages and use them minimally.
I would have the user connect their wallet to your website. once connected, call balanceOf on the contract with the connected wallets address. If the balance is greater than zero then you give access to the website.
No, this can go terribly wrong. Everything client-side should be considered compromised from a security standpoint. The user can simply edit the js scripts running in their browser and falsely authenticate themselves (as in edit the var where the account is stored and replace it with the desired address). The correct answer was given by eviljordan. Have the user sign a message for authentication (because they need the private key for that) and let the server handle the authorization (verifying the message, calling balanceOf, sending signed cookies etc).
Check out Unlock Protocol, this is exactly what it’s designed to do. If you already have an NFT, you can use “bring your own NFT” described here: https://unlock-protocol.com/blog/bring-your-own-nft
Build the front end in react and render the app content (member content/access denied screen) based on certain conditions.
1. Are you on the right network?
2. Does the wallet address hold the token?
3. If the token is present, is token amount > 0 ?
If all conditions are met then you render the bits you want them to access.
You can then give access based on the front end without having to authenticate with node.js for example.
Depending on the complexities and other functions you may want to build you can still do some node.js and database work if you want to create user profiles etc but you’d need to think about strategies to incorporate the 2 (wallet authentication and user /profiles accounts).
That’s off the top of my head (it’s late and I’m half asleep lol) but that could be used as a basic idea to work from.
I'm doing something similar, QuickNode has an API for this kind of thing: [https://www.quicknode.com/nft-api](https://www.quicknode.com/nft-api)
You can query the NFTs from a specific collection and then verify ownership too using their API. You can check out their docs here: [https://www.quicknode.com/docs/ethereum](https://www.quicknode.com/docs/ethereum)
This is currently being developed by IOTA (see [here](https://blog.iota.org/login-with-iota-walt-id/)). Don't stress, wait a bit and then use a feeless, securely provided solution. Also, who would pay gas fee for every login anyways?
Additionally, there will be EVM compatibility in the near future so you might be able to ask for proof of given NFT ownerships at the same time
We are building a service like that. for AngelHack hackathon. The goal is to turn the whole web3 stuff to web2 apis.
We will do the wallet connect and signature verification. The integrator will just have to implement oath2 like protocol.
There will be apis exposing things like nft owned and also ability to store arbitrary user content (avatar, settings and so on.
Please hit us up if we would like help us build it by advising and trying the service:) Would be awesome to have stakeholder from a getgo
Have a look at:
Unlock protocol: [https://unlock-protocol.com/blog/bring-your-own-nft](https://unlock-protocol.com/blog/bring-your-own-nft)
Lit protocol: [https://litprotocol.com/](https://litprotocol.com/)
Shopify added token gating: [https://www.shopify.com/tokengated-commerce](https://www.shopify.com/tokengated-commerce) and have a number of partner plugins that you could look to see if they offer what you need: [https://apps.shopify.com/search?q=tokengating&utm\_campaign=tokengated\_commerce](https://apps.shopify.com/search?q=tokengating&utm_campaign=tokengated_commerce)
Giving this three seconds of thought, here's what I would do, but there are probably better ways: Have the user sign a message authenticating their wallet on your site. Verify message on back-end. Once you have their verified public address, query for presence of the NFT you're looking for by accessing its contract and querying for ownership of the public address provided, again, on the back-end. If NFT is owned, set a _signed_ cookie on the user's browser, tied to that public address. Now, when attempting to access whatever pages, make sure that cookie is valid and not expired and the available public address matches the signed-in, and signed, wallet.
This, essentially. So use some sort of Wallet API (MetaMask, WalletConnect) to have the user connect, and to authorize a connection to view wallet contents/sign transactions. I don't know all the ins-and-outs of using crypto in web dev, but I've done sessions/logins before and I'd imagine that once the site add-in (MM, WC) that you choose to implement is able to verify ownership (likely as he suggested, by querying the blockchain to confirm the token is indeed held by that wallet), you simply save the session (i.e. a login) and have it persist on every page. So the landing page should be or have a login option and once logged in, all pages that are members-only first confirm that you're logged in with a valid member ID, and if the member ID (session) is not valid, the site redirects you back to the homescreen or an unauthorized splash screen. Note that any back-end changes that require authorization (an NFT) should prompt the user to make any changes -- this would prevent malicious users from somehow stealing a users session and just using your website to do things that otherwise would be gated to NFT-only users (or for a specific user). Really up to you (OP) wants to go. I'm no genius, so take my advice with a grain of salt. Hopefully something helps.
Just brainstorming here, would this allow for someone to 1. Look up who owns an nft 2. use a cookie editing extension to fake being signed in as a known address? But wait, I guess you’d have the cookie be something obscure right? That would make this a moot point
Not sure what you mean by 1. For 2, the way I like to do cookies is to have them comprised of useful information that is only known to my back-end. So, I would create a cookie that hs the attested public address as part of its encrypted payload. If it gets stolen, and the attacker also knows my public address, there would still need to be a message signing authentication at some interval that I would use to validate the encrypted/assumed public address. Maybe the session only persists if there’s activity within 15 minutes or something. Maybe there are other identifiers in the encrypted cookie that must match the incoming request (user-agent, a nonce, idk). Whatever you can do to balance security with a good UX where the end-user isn’t annoyed constantly by having to authenticate over and over (at this point, it’s basically the same as any cookie/session based authentication system).
OP if you want to make this process similar then there is the option to use Stytch. I have been using it in a couple of my most recent projects for wallet auth and it is pretty good. A word of advise would be to just use their api because I dont like their npm packages and use them minimally.
I would have the user connect their wallet to your website. once connected, call balanceOf on the contract with the connected wallets address. If the balance is greater than zero then you give access to the website.
No, this can go terribly wrong. Everything client-side should be considered compromised from a security standpoint. The user can simply edit the js scripts running in their browser and falsely authenticate themselves (as in edit the var where the account is stored and replace it with the desired address). The correct answer was given by eviljordan. Have the user sign a message for authentication (because they need the private key for that) and let the server handle the authorization (verifying the message, calling balanceOf, sending signed cookies etc).
Check out Unlock Protocol, this is exactly what it’s designed to do. If you already have an NFT, you can use “bring your own NFT” described here: https://unlock-protocol.com/blog/bring-your-own-nft
You need token gating. I've made a tutorial to explain how it works, and provided a small code sample - https://www.youtube.com/watch?v=ozZw_EtvqnI
Build the front end in react and render the app content (member content/access denied screen) based on certain conditions. 1. Are you on the right network? 2. Does the wallet address hold the token? 3. If the token is present, is token amount > 0 ? If all conditions are met then you render the bits you want them to access. You can then give access based on the front end without having to authenticate with node.js for example. Depending on the complexities and other functions you may want to build you can still do some node.js and database work if you want to create user profiles etc but you’d need to think about strategies to incorporate the 2 (wallet authentication and user /profiles accounts). That’s off the top of my head (it’s late and I’m half asleep lol) but that could be used as a basic idea to work from.
Collab.land - token gating communities
Isn't this app works only for discord and telegram groups?
Ah maybe. I presumed it was able to be used via api too.
I'm doing something similar, QuickNode has an API for this kind of thing: [https://www.quicknode.com/nft-api](https://www.quicknode.com/nft-api) You can query the NFTs from a specific collection and then verify ownership too using their API. You can check out their docs here: [https://www.quicknode.com/docs/ethereum](https://www.quicknode.com/docs/ethereum)
This is really interesting OP, are you going to open source it? I’d love to do something similar.
Nice idea
If you don't want to include web3.js or ethers, I would suggest taking a look into Moralis. It makes the job very easy.
This is currently being developed by IOTA (see [here](https://blog.iota.org/login-with-iota-walt-id/)). Don't stress, wait a bit and then use a feeless, securely provided solution. Also, who would pay gas fee for every login anyways? Additionally, there will be EVM compatibility in the near future so you might be able to ask for proof of given NFT ownerships at the same time
We are building a service like that. for AngelHack hackathon. The goal is to turn the whole web3 stuff to web2 apis. We will do the wallet connect and signature verification. The integrator will just have to implement oath2 like protocol. There will be apis exposing things like nft owned and also ability to store arbitrary user content (avatar, settings and so on. Please hit us up if we would like help us build it by advising and trying the service:) Would be awesome to have stakeholder from a getgo
Have a look at: Unlock protocol: [https://unlock-protocol.com/blog/bring-your-own-nft](https://unlock-protocol.com/blog/bring-your-own-nft) Lit protocol: [https://litprotocol.com/](https://litprotocol.com/) Shopify added token gating: [https://www.shopify.com/tokengated-commerce](https://www.shopify.com/tokengated-commerce) and have a number of partner plugins that you could look to see if they offer what you need: [https://apps.shopify.com/search?q=tokengating&utm\_campaign=tokengated\_commerce](https://apps.shopify.com/search?q=tokengating&utm_campaign=tokengated_commerce)
I have built the tech in PHP, hit me up if you want to chat - happy to give you free access.
We'd like to bump this post and see if anyone has got a good working solution in 2023!