Searching way to integrate Biconomy's SDK with Next-Auth on my open source project

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 Biconomy’s SDK after looking at Lit protocol and Web3Auth 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 Biconomy’s SDK with Next-Auth.

I understand that the SDK is using a wrapper around Web3Auth for the auth part. From what I’ve seen in the Web3Auth’s 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 my Hasura database with the scope of his/her data.
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 Biconomy’s SDK.

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/Biconomy & 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 Biconomy’s SDK 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 Biconomy’s SDK 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": "BDtxlmCXNAWQFGiiaiVY3Qb1aN-d7DQ82OhT6B-RBr5j_rGnrKAqbIkvLJlf-ofYlJRiNSHbnkeHlsh8j3ueuYY",
  "nonce": "024c6aa0417b1fb36915f83e06c6e378cc547d13229701925e687bfabec14aa900",
  "iss": "https://api.openlogin.com",
  "wallets": [
    {
      "public_key": "0226937eaeb82db1d27887f5e03aaf5d45aab6cd3d14d0b2662bea9872c6cd0d13",
      "type": "web3auth_app_key",
      "curve": "secp256k1"
    }
  ],
  "email": "sebpalluel@gmail.com",
  "name": "Sébastien Palluel",
  "profileImage": "https://lh3.googleusercontent.com/a/AEdFTp7Ud2U0fanKGyfkAQEV4R2uWHMPIRjVyMkqjwEhErw=s96-c",
  "verifier": "torus",
  "verifierId": "sebpalluel@gmail.com",
  "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 with the SDK ?

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
}

Hey sebpalluel, thanks for the suggestions really appreciate it.

So yes as you mentioned the Biconomy SDK is a wrapper on top of Web3Auth’s sdk. The whole flow is like this -

  • Get user sign in via google / facebook / any socials.
  • Web3Auth use the AuthToken + clientId to generate the EOA.
  • Return a signer object using the private key.

Now regarding the solutions you proposed

  • Solution 1: This can be done, we can have the Auth0 custom verifier setup. This setup will require a custom server on biconomy side which we don’t do as of now. Will have a discussion on this and post here in future.

  • Solution 2: This is not possible, as if you go with the web3auth documentation, the EOA generation depends on the custom verifier. So for every clients having there own login method will result in different EOA generation.

1 Like

Thank you for your fast answer.

Regarding Solution 1, are you saying it’s possible to customise the Auth0 verifier in order to have additional data on the JWT such as a user id or simply to use Auth0 with Biconomy SDK as it is done here ? Or are you saying it’s possible to use the CredentialsProvider from Next-Auth with SIWE using the EOA ? In that case I would simply sign the SIWE with the signer object. My point about Auth0 is that I would rather avoid relying on an external service if I can, even more if it’s pricey and closed source. If it’s not possible to go without it and I need to get rid of Next-Auth all the way to resolve my issue, be it.

The detail flow make it clearer, thanks.

Meanwhile I will fork your project to see if I can use the SIWE method using the EOA to make it work with Next-Auth because it seems the easiest approach. That way I could keep your openlogin_store in localstorage and have the JWT I want from Next-Auth generated after the message is signed to query my web2 services. I keep you inform indeed if I find a solution and I would be more than happy to share it with the community.

Very good news !

I’ve finished the implementation on the fork here.
It’s quite simple and I’m just using SIWE with the signer on the smart account to sign the message in order to signIn with Next-Auth right after the user is signed in with the Biconomy SDK. Next-Auth is setting the JWT with all the data I need with a RSA private key. If anyone is interested the changelog is available here.

I plan to implement it in web3-monorepo and I’m eager to implement the next features such as the gassless transactions.

2 Likes

Nevertheless I would still be interested to use Auth0/Okta with your solution for an other closed source project to allow a secure way for companies to log in a web3 service but it’s an other topic.

That’s great ! Let us know if you need any help on gasless side !