Learn how to token gate videos using Livepeer and Lit: A step-by-step tutorial
While creating a Next.js application, you will be prompted if you would want to use Tailwind. In this tutorial, we will be using Tailwind, so make sure to set up a Next.js app with Tailwind.Once the project is created successfully, run the following command to install a few other dependencies.
_app.js
import the following from Rainbow and WAGMI.
RainbowKitProvider
and WagmiConfig
client
in
the root directory, and add the following code to index.js
YOUR_API_KEY
with the key which you just copied from
the Livepeer dashboard. And also replace the code inside of _app.js
in the
page directory with the below code.
hooks
and
inside of it, create a new file named useLit
. This would be the file to handle
the connection with Lit’s node. Add the following code to it:
_app.js
and also wrap the application
with LitProvider
api
routes.
api
directory, create a new file named verify-lit-jwt.js
and
add the following code to it
baseUrl
, path
, orgId
,
iat
, and exp
fields.
If the access token is not verified or if the resource ID does not match, an
HTTP response with a status code of 403 is returned. If everything is fine, the
handler returns an HTTP response with a status code of 200.
Next, deploy your Next.js app to Vercel or any other hosting provider as we will
need a link to the verify JWT API.
playback.accessControl
and specify the URL of your
access control endpoint.
components
and inside of it, create a new file named Connect
and add
the following code to it.
index.jsx
as the upload page, or you can
also create a new file named upload.jsx
for the upload page. In this tutorial,
we will be using index.jsx
as the upload page and it will be the index page of
our app.
First import the following in the index.jsx
file.
resourceId
that will be used by Lit for
checking the access control.
useAccount
hook that is imported from WAGMI.
AuthSign
state.
Next, after signing the message, we can use useCreateAsset
to upload the video
to Livepeer. In the below code, we also specify the webhook id, which we created
earlier. And useAsset
hook to check if the asset upload/processing is
completed
watch
inside the
page and then create a new file named [playbackId].tsx
. This will tell Next.js
to match any link of /watch/anything
to this page. Next, import the following
into the page.
usePlaybackInfo
hook from @livepeer/react
useEffect
function to get playback info and check
Lit access control when the component mounts.