A basic app to showcase connecting to a web3 wallet and signing a message to gain access to a protected page.
A hosted version of this repo is available on Vercel.
Below is a gif (😅 yes it's grainy) showing a demo of the login flow:
The following steps describe the overall web3 login flow:
- The web application requests a wallet connection to one or more accounts
- The web application prepares a plain-text message and sends a signing request to the wallet
- Note: The current web app implementation assumes its always the first connected account is the one doing the signing. This can be easily modified such that the user selects the account that they want to sign the message with from a dropdown. Issue 3.
- Once the signature is obtained, it is sent along with the plain-text message and the account address to the API for verification. If the verification succeeds, a session cookie (JWT) is sent back from the API and stored in the browser locally.
- The user is redirect to the protected page
- The protection referred to here is at the UI / frontend level. This is done for UX purposes and doesn't actually protect any secure resources (that's on the API in Step 5 below).
- A secret value is requested from the API (which verifies the session cookie) and responds back to the UI if the token is valid.
To run this repository locally, clone the repo and follow the steps below:
- Install dependencies with your favourite package manager
- Tested with Node version
18.x.x
and19.x.x
- Tested with Node version
yarn install
-
Install a browser wallet (such as PolkadotJS or Talisman)
- Other wallets should also work but haven't been tested.
-
Copy
.env.example
into.env.local
and add your secrets- RandomKeygen can be used to generate random strings
cp .env.example .env.local
- Run the NextJS application locally
yarn dev
- Open
localhost:3000
on in a browser window
This sample application can be deployed on any platform which runs NodeJS.
Below is a one-click deploy button for hosting this application on Vercel which has built-in support for NextJS applications.
-
This repo implements the signin logic twice. The first using
NextAuth
plugin and the second using ajwt
library. This is done for experimentation purposes.- The
NextAuth
flow can be tested using the UI. - The
jwt
flow doesn't enforce session and CSRF. It can be tested via Postman.
- The
-
This repo is not optimized for production
-
Some improvements can be made to make this example closer to being production ready. See the issues in this repo for an idea of what can be improved.