Next JS 13 Route Handlers, Next Auth and SIWE (With Rainbowkit)

[0xRowdy]

Hello
I've been working on implementing NextAuth with WAGMI, RainbowKit, and Sign In With Ethereum. I believe it is close to working with Next JS 13 Route Handlers but am still facing some issues and could use some help.
Here is an updated Code Sandbox

Example of my Route:
app/api/auth/[...nextauth]/route.ts

import NextAuth, { NextAuthOptions, Session } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { getCsrfToken } from "next-auth/react";
import { SiweMessage } from "siwe";

const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Ethereum",
      credentials: {
        message: {
          label: "Message",
          type: "text",
          placeholder: "0x0",
        },
        signature: {
          label: "Signature",
          type: "text",
          placeholder: "0x0",
        },
      },
      async authorize(credentials, req) {
        try {
          const siwe = new SiweMessage(JSON.parse(credentials?.message || "{}"));
          const nextAuthUrl = new URL(process.env.NEXTAUTH_URL as string);

          const result = await siwe.verify({
            signature: credentials?.signature || "",
            domain: nextAuthUrl.host,
            nonce: await getCsrfToken({ req }),
          });

          if (result.success) {
            return {
              id: siwe.address,
            };
          }
          return null;
        } catch (e) {
          return null;
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    // ? What should I do about the session type ?
    async session({ session, token }: { session: any; token: any }) {
      session.address = token.sub;
      session.user.name = token.sub;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

On my local environment, I'm able to sign the message but I get an error: The only thing listed on NextAuth for the CLIENT_FETCH_ERROR is to ensure you have NEXTAUTH_URL as an environment variable. This is what I have in my .env.local NEXTAUTH_URL=http://localhost:3000/

error:

https://next-auth.js.org/errors#client_fetch_error Unexpected token 'E', "Error: Thi"... is not valid JSON {
  error: {
    message: `Unexpected token 'E', "Error: Thi"... is not valid JSON`,
    stack: `SyntaxError: Unexpected token 'E', "Error: Thi"... is not valid JSON\n` +
      '    at JSON.parse (<anonymous>)\n' +
      '    at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)\n' +
      '    at successSteps (node:internal/deps/undici/undici:6545:27)\n' +
      '    at node:internal/deps/undici/undici:1211:60\n' +
      '    at node:internal/process/task_queues:140:7\n' +
      '    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)\n' +
      '    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    name: 'SyntaxError'
  },
  url: 'http://localhost:3000/api/auth/csrf',
  message: `Unexpected token 'E', "Error: Thi"... is not valid JSON`
}

Any assistance, help, or advice would be greatly appreciated or if there is an example of NextAuth and SIWE being used with Next.js 13 Route Handlers.

Thanks in advanced

[0xEviso]

Problem is with the req.body, you might want to remove it:
nonce: await getCsrfToken({ req: { headers: req.headers } })

[Shailendra1703]

@0xRowdy @0xEviso

I'm stuck with this problem, although I'm using the same approach as mentioned above. can you please give any suggestion on solving this ?

Reference https://solutions-web3-authentication.vercel.app/

[Shailendra1703]

okay sure , I'll share you the callaborator link to the repo , kindly check the admin branch

[Shailendra1703]

@0xRowdy please check the invitation link.

Error

Path to providers : src/app/components/layout/providers

Kindly let me know in case of any doubt

[Shailendra1703]

@0xRowdy can you please check this out ?

[0xRowdy]

@0xRowdy can you please check this out ?

It's late where I am, so I only had a chance to look at the repo quickly. However, it doesn't look like you are waiting for the signed message from the wallet client.

Something like:

const siwe = new SiweMessage(JSON.parse(credentials?.message));

const result = await siwe.verify({
  signature: credentials?.signature || "",
  domain: nextAuthUrl.host,
  nonce: await getCsrfToken({ req: { headers: req.headers } }),
});

[Shailendra1703]

@0xRowdy can you please check this out ?

It's late where I am, so I only had a chance to look at the repo quickly. However, it doesn't look like you are waiting for the signed message from the wallet client.

Something like:

const siwe = new SiweMessage(JSON.parse(credentials?.message));

const result = await siwe.verify({
  signature: credentials?.signature || "",
  domain: nextAuthUrl.host,
  nonce: await getCsrfToken({ req: { headers: req.headers } }),
});

okay means I have to replace this with the current code in api/auth/[...nextauth]/route.js file Right ?

Any other changes apart from this ?