;
};
Lit Protocol verifies NFT ownership on-chain without a centralised server. Livepeer enforces access at the CDN edge. Together they create a fully decentralised token-gated video pipeline.
Token-gated video combines Lit Protocol's decentralised access control with Livepeer's JWT playback policy. A viewer proves NFT ownership to Lit; Lit returns a signed JWT; the Livepeer Player presents the JWT to the CDN edge for access.
**What you will build:** A React application where only holders of a specific NFT contract can play a Livepeer-hosted video.
## Token-gating architecture
```
Viewer wallet → Lit Network (ownership check) → Signed JWT → Livepeer CDN (JWT verified) → Video playback
```
Three systems interact:
* **Lit Protocol** -- verifies on-chain conditions (NFT ownership) and issues access control conditions (ACCs) that gate a symmetric encryption key or a signed payload
* **Livepeer-compatible Gateway** -- creates a JWT-protected asset and provides a signing key
* **Playback Gateway or CDN** -- validates the JWT on every playback request at the edge
## Prerequisites
* Node.js 18 or later
* A deployed NFT contract (ERC-721) on Ethereum mainnet or any supported chain
* A Gateway provider API key or self-hosted Gateway with JWT playback access control enabled
* Familiarity with React and ethers.js or wagmi
```bash theme={"theme":{"light":"github-light","dark":"dark-plus"}}
npm install livepeer @livepeer/react @lit-protocol/lit-node-client ethers
```
## Build the gate
Create the asset with a JWT playback policy and a signing key. Follow the access control guide for full setup.
```typescript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Livepeer } from 'livepeer';
const client = new Livepeer({ apiKey: process.env.LIVEPEER_API_KEY });
// Create signing key
const { privateKey, id: publicKeyId } = await client.signingKey.create();
// Store privateKey in your secrets manager
// Create gated asset
const { asset } = await client.asset.create({
name: 'nft-gated-video.mp4',
playbackPolicy: { type: 'jwt' },
});
console.log('Playback ID:', asset.playbackId);
```
Access control conditions (ACCs) specify what a viewer must prove to get access. This example requires ownership of at least one token from a specific ERC-721 contract:
```typescript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
const accessControlConditions = [
{
contractAddress: '0xYourNFTContractAddress',
standardContractType: 'ERC721',
chain: 'ethereum',
method: 'balanceOf',
parameters: [':userAddress'],
returnValueTest: {
comparator: '>',
value: '0',
},
},
];
```
Lit evaluates this condition against the viewer's connected wallet. If `balanceOf(viewerAddress) > 0`, the condition passes and Lit proceeds to issue the access.
Encrypt your Livepeer private signing key with the access control conditions so only qualifying wallets can decrypt it:
```typescript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as LitJsSdk from '@lit-protocol/lit-node-client';
const litClient = new LitJsSdk.LitNodeClient({ litNetwork: 'mainnet' });
await litClient.connect();
// Encrypt the Livepeer private key -- only holders of the NFT can decrypt it
const { ciphertext, dataToEncryptHash } = await LitJsSdk.encryptString(
{
accessControlConditions,
dataToEncrypt: process.env.ACCESS_CONTROL_PRIVATE_KEY!, // Livepeer signing key
},
litClient
);
// Store ciphertext and dataToEncryptHash alongside your asset metadata
```
When a viewer connects their wallet, use Lit to decrypt the Livepeer signing key client-side, then sign a JWT:
```typescript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { signAccessJwt } from '@livepeer/core/crypto';
async function getPlaybackJWT(
viewerAddress: string,
authSig: object,
playbackId: string
): Promise {
const litClient = new LitJsSdk.LitNodeClient({ litNetwork: 'mainnet' });
await litClient.connect();
// Decrypt the Livepeer private key -- Lit verifies NFT ownership on-chain
const { decryptedString: privateKey } = await LitJsSdk.decryptToString(
{
accessControlConditions,
ciphertext,
dataToEncryptHash,
authSig,
chain: 'ethereum',
},
litClient
);
// Sign a Livepeer JWT with the decrypted key
const jwt = await signAccessJwt({
privateKey,
publicKey: process.env.NEXT_PUBLIC_ACCESS_CONTROL_PUBLIC_KEY!,
issuer: 'https://yourapp.com',
playbackId,
expiration: '1h',
custom: { viewer: viewerAddress },
});
return jwt;
}
```
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as Player from '@livepeer/react/player';
import { useAccount, useSignMessage } from 'wagmi';
export const TokenGatedPlayer = ({ playbackId }: { playbackId: string }) => {
const { address } = useAccount();
const [jwt, setJwt] = useState(null);
const { signMessageAsync } = useSignMessage();
const handleUnlock = async () => {
if (!address) return;
// Get auth signature from the viewer's wallet
const authSig = await signMessageAsync({ message: 'Sign to verify NFT ownership' });
// Get playback JWT (Lit verifies ownership, decrypts key, we sign JWT)
const token = await getPlaybackJWT(address, authSig, playbackId);
setJwt(token);
};
if (!jwt) {
return (
This video requires NFT ownership to watch.
);
}
return (
);
};
```
## Extending the gate
The access control conditions accept any Lit-supported chain and condition type:
Gate typeCondition methodNotesERC-721 ownership`balanceOf`Any ERC-721; condition shown aboveSpecific token ID`ownerOf`Gates on ownership of one specific token IDERC-20 balance`balanceOf`Gate on holding a minimum token amountERC-1155 balance`balanceOf`Gates on semi-fungible token ownership
## AI agent prompt
```text theme={"theme":{"light":"github-light","dark":"dark-plus"}}
Build the "Token-gate videos with Lit Protocol" tutorial as a React/TypeScript app. Create a project that installs livepeer, @livepeer/react, @lit-protocol/lit-node-client, ethers, wagmi, and the wallet connector dependencies needed by wagmi. Use placeholders for LIVEPEER_API_URL=, LIVEPEER_API_KEY=, NEXT_PUBLIC_PLAYBACK_BASE_URL=, NEXT_PUBLIC_ACCESS_CONTROL_PUBLIC_KEY=, LIVEPEER_ACCESS_CONTROL_PRIVATE_KEY=, NFT_CONTRACT_ADDRESS=, and CHAIN=. Implement server-side signing-key and JWT helpers, Lit access-control conditions for ERC-721 ownership, a wallet-gated React player, and a README with exact run and verification steps. Do not use Livepeer Studio keys or hardcoded livepeercdn.studio URLs.
```
## Related pages
JWT and webhook-based access control without Lit Protocol.
Store video on IPFS and deliver via Livepeer.