Web3 site token gate

This is a little project built to make it easy for web3 communities to only allow access to a website if their wallet content allows them into the community — e.g. holds a certain amount of a token or a certain NFT.

The primary use case was to token gate access to certain Notion pages. Token gating writing to a notion page is a bigger problem to solve (for another day), but if used in partnership with Super.so or NotionX this can be used to only allow community members to view a site made from a Notion page.

Run locally

How to set up for Notion

1. Create the community on guild.xyz

For the moment we're going to piggy back off the great work done by agora.space to create a community.

1. Go to alpha.guild.xyz
2. Connect your wallet
3. Set up a guild to create your community
4. Connect the guild to a discord channel (the discord channel is not required for anything for us, it's just a necessary step for their UI)
5. Set the requirements the allows someone to access the community
6. SUMMON!
7. Keep the tab open or copy and keep the end of the url which contains the guild e.g. https://alpha.guild.xyz/notiontokengate copy notiontokengate

2. Create a site from notion

There are at least 2 ways to do this:

1. Create a website from a public Notion page using super.so's paid subsctipion (payment required for injecting code)
2. If you are technical then you can use NotionX Next.js example to create your own site from a Notion page and host it on something like Netlify for free

3. Inject the script into the site

Super.so

1. Once set up on super.so, click on the site -> Code -> Head

You should get to the screen below

2. Copy the content of the site injection code
3. Change the guildUrlName to match your own (copied above in create the community stage 7)
4. Click back to save
5. TADA!

Now only users who meet the criteria set in the guild.xyz community can access your notion page.

Development

This is still in development, and I'm currently working on making sure it's more secure. If you notice anything obvious reach out and let me know on twitter at ssp6sean

The project is made of 2 parts:

• A simple little app that is injected in to your site
• An api that ensures only those with confirmed access to a wallet

Run locally

make install # I haven't set up yarn workspaces yet
# Run the api locally on http://localhost:3000
make api_start
# In a new tab - build the app locally
make app_build

You can then, like above, copy the content of site injection code (but uncomment the local development line) into a local running site.

Thanks

None of this could have been build without the help of Austin Griffith and the build guild / scaffold eth team.

Not to mention (agora.space)[https://agora.space], super.so and NotionX teams mentioned above.

All mistakes and bugs are of course my own.