name | slug | description | framework | useCase | css | deployUrl | demoUrl |
---|---|---|---|---|---|---|---|
Web3 Sessions |
web3-sessions |
In a decentralized application, a user is often identified by a Cryptocurrency wallet such as Metamask. However, since Metamask works by injecting a script into the page, it is only available on the client, cutting off the ability to use getServerSideProps to fetch user data. |
Next.js |
Documentation |
Tailwind |
This example shows how create sessions in Next.js with Metamask and NextAuth.js.
https://web3-sessions.vercel.app
This Demo will show how to configure NextAuth.js and create a custom hook to protect routes.
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/solutions/web3-sessions
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/solutions/web3-sessions
Rename the .env.example
file to .env
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:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).