- Server generates a message for the user to sign (message follows SIWE standard).
- User signs the message with their wallet, proving ownership of the wallet address.
- Server verifies the signature and the user enters authenticated state.
/application
directory.
The app comes with a UserAuthentication
component to showcase the SIWE flow and access of restricted server-side data.
Configuration
Two environment variables can be set in.env
to configure the SIWE flow:
Generating Messages
The Connect Wallet Button comes with anauth
prop, that can be used to showcase a “Sign In” state after the user connects their wallet.
When the user clicks the “Sign In” button, a message is generated and the user is prompted to sign it using their connected wallet.
Signing Messages
The user signs the message with their wallet, and the signature is sent to the server. You define the server logic location using theauthConfig
prop on the
ThirdwebProvider.
You can see this inside the _app.tsx file:
Verifying Signatures
The signed message arrives at the server, and the server verifies the signature’s validity. The application comes with a/pages/api/auth/[...thirdweb].ts
catch-all dynamic route
which handles /login
, /logout
, and /user
requests under the hood.
In this flow, the /login
route is triggered which verifies the signature and sets a thirdweb_auth_token
cookie for this user to remain
authenticated for future requests.