Searching way to integrate Web3Auth with Next-Auth on my open source project in order to get a custom JWT

[sebpalluel]

Context

I'm currently working on a project called Web3 Monorepo which intend to help developers bootstrap their web3 project with a working all-in-one full-stack infrastructure.
My goal is to provide a foundation for quickly integrating new decentralized technologies in a way that is as agnostic as possible to the underlying DLT (such as Ethereum or other blockchain platforms) and with a UX as seamless as possible for the user.
My focus is mainly on the authentication as it's the most complex and problematic part to implement but also the biggest pain point of web3.

I've discovered your project along with Biconomy's SDK and I'm very interested in using it to provide a seamless login and e2e solution for users to abstract web3 inherent difficulties thanks to account abstraction.

Problem

I'm confused about how to integrate Web3Auth modal with Next-Auth.

From what I've seen in your documentation, it's possible to rely on a external IAM to provide a JWT token in order to handle the web3 EOA generation, for instance with Auth0. What I would like is the same workflow as in this demo with the modal containing both social logins or existing user wallet, but I would need to setup a custom JWT token with the EOA address as the user's id in order for the user be able to query his/her data securely on the regular web2 way.
My current infrastructure is using Next-Auth with a custom JWT token that is used to query Hasura and others external services. I'm reluctant to switching to an external IAM solution as Auth0 because it's closed sourced and expensive to use. I would definitely prefer to use directly Next-Auth to keep it as simple as possible.

Solution 1: Find a way to use Web3Auth as a provider in Next-Auth as with the RainbowKit implementation of SIWE

That would be in the best case scenario, but I don't know if it's possible ?

Next-Auth is a very popular library and provides a lot of flexibility to setup a custom JWT token in a very secure way. It would be great to be able to use it with your solution.

RainbowKit has a working solution to setup SIWE with their modal and use Next-Auth to generate the JWT.
The way it works is by using CredentialsProvider from next-auth, as in described here in the official documentation of SIWE. The role of this provider is to verify the signature of the EOA in order to return a JWT token (handled by Next-Auth) with the EOA address as the user's id.
The second part of the implementation is RainbowKitSiweNextAuthProvider that is handling the SIWE modal information and the communication with the CredentialsProvider to verify the signature. This is working in coordination with the RainbowKit's modal.
Once the user signed the SIWE message, Next-Auth will setup a JWT token with all the needed information to be used in the app and by external services.
You can try it out by going to the sign-in page of my app and click on the Connect Wallet button.

I see that both Web3Auth & Next-Auth have a complicated internal logic so it may be wiser to find a way to make both libraries work together in a simple way. I'm guessing that using the same method as RainbowKit to setup SIWE with Next-Auth would be the way to go, especially if it could handle an automatic signature with the EOA generated through OAuth or the existing user wallet.
Once again, I may be mistaken and it may be a lot more complicated than that.

Solution 2: Use the current implementation of Web3Auth and setup a custom JWT token afterwards or use the existing JWT token stored in idToken

In case there is no way to use Next-Auth directly to handle the auth flow, I would like to know if it's possible to use the current implementation of Web3Auth and setup a custom JWT token after the user is logged in and if thats so, do you have direction to proceed ?

I've seen in this example app that the JWT from social login (as for instance Google) is stored in the idToken field of the session on localstorage. I guess one of the field on the token's payload could be used as the user id ?

Here is the output I have with the JWT using google sign-in:

{
  "iat": 1673448297,
  "aud": "ADtxlmCXNAWQFGiiaiVY3Qb1aN-d7DQ82OhT6B-RBr5j_rWnrKAqbIkvLJlf-ofYlJRiNSHbnkePlsh8j3ueuYY",
  "nonce": "024c6aa0417b1fb36915f83e09c6e378cc547d13229701925e687bfabec14aa900",
  "iss": "https://api.openlogin.com",
  "wallets": [
    {
      "public_key": "0226937eaeb82db0d27887f5e03aaf5d45aab6cd3d14d0b2662bea9872c6cd0d13",
      "type": "web3auth_app_key",
      "curve": "secp256k1"
    }
  ],
  "email": "[email protected]",
  "name": "Sébastien Palluel",
  "profileImage": "https://lh3.googleusercontent.com/a/AEdFTp7Ud2U0fanKGyfkAQEV4R2uWHMPIRjVyMkqjwEhErw=s96-c",
  "verifier": "torus",
  "verifierId": "[email protected]",
  "aggregateVerifier": "tkey-google-lrc",
  "exp": 1673534697
}

Is wallets[0].public_key persistent to the user's account ?

For the login with Metamask I don't see any idToken in the localstorage, would I be able to generate it programmatically ?

I see on the Web3Auth demo that it's generated only after clicking on the Get Auth Id token button. Is it possible to generate it programmatically as soon as the user is authenticated, like with google sign-in ?

Here is the JWT data I'm getting from Metamask after clicking on the Get Auth Id token button:

{
  "iat": 1673449025,
  "issuer": "metamask",
  "audience": "demo-app.web3auth.io",
  "wallets": [
    {
      "address": "0x2cde8fb599b7c656e7594959960dbea1bc2e15f2",
      "type": "ethereum"
    }
  ],
  "exp": 1673535425
}

[abhik-99]

I guess we can make use of CredentialProvider as well - Just after logging in with Web3Auth, use Viem Wallet Client created out of a Web3Auth Provider instance to sign a message asynchronously and send that to the CredentialProvider. The following might help:

1. Viem Wallet Client with Web3Auth
2. Using SIWE with Credentials Provider