Skip to content

Web3 Sessions

Use NextAuth.js with Metamask

Framework
Use Case
Publisher ▲ Vercel

Web3 Sessions

This example shows how create sessions in Next.js with Metamask and NextAuth.js.

Demo

https://web3-sessions.vercel.app

This Demo will show how to configure NextAuth.js and create a custom hook to protect routes.

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/web3-sessions

Rename the .env.example file to .env.local and add your own secrets:

// generate random secrets on https://passwordsgenerator.net/ or anywhere else similar
NEXT_AUTH_SECRET="eE*szYpDH@r.647zq*Vxd9vW..X!"
JWT_SECRET="R9Hkbi2Ahoy9wNQH*7Jj4a*Y4NxF"

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Web3 Sessions

Use NextAuth.js with Metamask

Framework
Use Case
Publisher ▲ Vercel

Web3 Sessions

This example shows how create sessions in Next.js with Metamask and NextAuth.js.

Demo

https://web3-sessions.vercel.app

This Demo will show how to configure NextAuth.js and create a custom hook to protect routes.

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/web3-sessions

Rename the .env.example file to .env.local and add your own secrets:

// generate random secrets on https://passwordsgenerator.net/ or anywhere else similar
NEXT_AUTH_SECRET="eE*szYpDH@r.647zq*Vxd9vW..X!"
JWT_SECRET="R9Hkbi2Ahoy9wNQH*7Jj4a*Y4NxF"

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential