Token Gating With Lit Protocol

This is a continuation of the article Beginner Guide to Lit Protocol, in case you missed that. I will walk you through token gating a URL using Lit Protocol in this article.

Lit Protocol Homepage at https://litprotocol.com/

What is Token Gating?
Token gating is a way to control and restrict access to exclusive content by requiring customers to acquire a specific NFT or number of tokens. In a nutshell Tokens or NFT are use as key to open a particular gate.

What are Access Control Conditions?
In Lit JS SDK Access Control Conditions are rules you want to check for e.g a user has more than one token, a user is a member of a DOA. See Examples Here .

Prerequisite:
Create an EIP 721 smart contract using OpenZeppelin Wizard and deploy.

Getting Started
To get started, we have to create a new Next application, Next is a react framework

npx create-next-app@latest

Install Lit Protocol JS SDK
Change directory into the newly created Next project, Next default app name is my-app, cd my-app

yarn add @lit-protocol/lit-node-client

Now you should see lit-protocol/lit-node-clientin package.json dependencies

Connect Next application to Lit Protocol
Update your pages/index.js

Let's run the web application locally using the command below and navigate to http://localhost:3000 in your browser.

npm run dev

Open up your browser console, and click on the connect button, Your browser console will show the interaction between your application and Lit Protocol. If successfully connected. your last 2 consoles will be lit is ready and Am Connected .

You might be prompted to switch network if needed, if successful it returns a signature in your browser console.

Now we have Lit JS SDK connected, let dive into token gating our contact us page. We want only users that have acquire our NFT to contact us on our website, for this demo NFT is deployed on Polygon Mumbai Network: 0xD65Fd8e1eE88B23cC2937DCe6323b21615737613

Install cookies, js-cookie and uuid:
Lit JS SDK is going to return jwt token when handshaking for verification, we will store this token using cookies and js-cookie packages. uuid will be use to generate unique id for users visiting the contact us route.

yarn add cookies js-cookie uuid

Create context.js file at the root of your project:
We will be sharing a unique ID generated by uuid package for unique identification to the contact us page.

Edit pages/_app.js:

Update pages/index.js :

Create contactus.js file in pages directory:

Visit http://localhost:3000 click on the connect button, use an account that is an ownership of the NFT you created earlier. When done, create another account on metamask and connect with it.
Congratulation 🎈 you just token gate a URL using Lit Protocol.

Resources:

Installation | Lit Protocol Developer Docs

GitHub - dabit3/nextjs-lit-token-gating: Minimal example of token gating with Next.js and Lit…

New to trading? Try crypto trading bots or copy trading