Skip to content

Integrating nextauth and siwe

Jump to bottom
Vladimir Támara Patiño edited this page Jul 2, 2025 · 2 revisions

An initial example: https://github.com/vtamara/nextauth-siwe-route-handlers

Rainbowkit includes the example https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit-siwe-next-auth. It has a client side and a server side. It allows: (1) To connect a wallet, (2) sign a message, (3) authenticate to the server with JWT, (4) the server identifies when a user is connected an its address.

However that example is for the page router of next.js.

The example https://github.com/0xRowdy/nextauth-siwe-route-handlers (that we forked at https://github.com/vtamara/nextauth-siwe-route-handlers) tries to the same but using the app router. It has a problem with a solution proposed at https://github.com/nextauthjs/next-auth/discussions/7923

Our fork in the branch adJ:

  • Includes the mentioned fix
  • Upgrades dependencies
  • Works on adJ 7.7

We noticed also:

  • When we change the wallet it disconnects automatically, so it is necessary to connect and sign again with the new wallet.
  • After signing it produces two messages in the console of the backend:
-  ┌ POST /api/auth/callback/credentials 200 in 111ms
   │
   └──── GET http://localhost:3000/api/auth/csrf 200 in 66ms (cache: MISS)

Integratin into learn.tg

Stage 1. next.js backend

Upgrading and mixing slowly with learn.tg we were able to integrate in it auth with the next.js backend in the branch swig of that repository.

Stage 2. RoR backend

To integrate with the RoR backend we have as options:

  1. Share secret between next.js and RoR backend, keep using next.js for wallet integration and try to send the auth header in AJAX requests. In first tests, checking in chrome console we see it goes but it doesn't appear in the controller. However this approached worked for us (with fetch) in https://github.com/pasosdeJesus/intercambiador/blob/main/frontend/src/TonProofApi.ts.
  2. Put the ROR as the AUTH backend that would have to answer some API requests like /api/auth/callback/credentials and api/auth/csrf. We implemented somthing similar in the initial Vue.js version without Rainbowkit, in rails we developed the aut_controller.rb
  3. Instead of JWT implement token authentication with the RoR backend.

We estimate that the longest would be the second because anyway would require to implement the first one. Between the first and the thid the third seems initally faster.

A proposal for the third one is to modify the auth api of next.js in order to:

  • Use a token generated in the next.js backend, and available in the frontend.
  • Save the token in the backend database. In the backend database could be a niew filed in the users table: authToken locating each record with the wallet address (either as main or one of the secondary wallet addresses). Or a table UserWallet that allows one user with several wallets.
  • Send that token in every authenticated AJAX request to the RoR backend
  • In the backend compare the received token with the token stored in the database for the user of the address if it matches continue.

We implemented this in the branch authbd

In the client we couldn't have the signature easily (that we wanted as token), but it is easy to use the CSRF Token chosen by next server side, and that is the one we used.

To work with the Database we used kysely based on our previous evaluation.

Clone this wiki locally