Help - Rainbow Kit, SIWE, Next Auth, and Next JS 13 app router

[0xRowdy]

I'm pretty new to Next JS and I'm trying to piece together how to use NextAuth, Rainbow Kit with SIWE.

Are there any examples of siwe, next auth, Rainbow Kit, and Next JS 13 app router? I'm trying to piece it together from various docs but they all seem to use Next JS 12 page router. I don't have much experience with Next 12 so a full example would be ideal.

I'm trying to follow the example listed below but getting the error [next-auth][error][CLIENT_FETCH_ERROR] I do have NEXTAUTH_URL=http://localhost:3000/ and NEXTAUTH_SECRET='mysupersecerete' set in .env.local
https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-siwe-next-auth/pages/api/auth/%5B...nextauth%5D.ts
https://docs.login.xyz/integrations/nextauth.js

I'm trying to set up a code sandbox but it keeps breaking when I add the dependencies. CPU is running at 99%
My code sandbox: https://codesandbox.io/p/sandbox/gifted-easley-z9gn64?file=%2Fapp%2Fproviders.tsx%3A9%2C9

[LevenSton]

Hello. I have the same issue? Don't know how to use next-auth in NEXTJS 13. Did you find the solution?

[magiziz]

@0xRowdy Is your NEXAUTH_SECRET right ? Can you try to specify longer secret like this ? 5860e3b9979c4022277553819414469f

[TudorEsan]

yeah i am still trying to make it work? has anybody found a solution?

"use client";
import { NextUIProvider } from "@nextui-org/react";
import React from "react";
import "@rainbow-me/rainbowkit/styles.css";
import {
  GetSiweMessageOptions,
  RainbowKitSiweNextAuthProvider,
} from "@rainbow-me/rainbowkit-siwe-next-auth";

import {
  darkTheme,
  getDefaultConfig,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
  zora,
  sepolia,
  optimismSepolia,
} from "wagmi/chains";
import type { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const config = getDefaultConfig({
  appName: "My Multisig App",
  projectId: "6829b9ad661ef487af4d0c1bb5aa4a9e",
  chains: [
    mainnet,
    polygon,
    optimism,
    arbitrum,
    base,
    zora,
    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === "true"
      ? [sepolia, optimismSepolia]
      : []),
  ],
  ssr: true,
});

const queryClient = new QueryClient();

export const AppProviders = ({
  children,
}: // session,
{
  children: React.ReactNode;
  // session: Session | null;
}) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <SessionProvider>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider theme={darkTheme()}>
              <NextUIProvider>{children}</NextUIProvider>
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </SessionProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

i get this errors

[magiziz]

@TudorEsan Can you take a look at our next-auth example here and see what's missing ? https://github.com/rainbow-me/rainbowkit/tree/main/examples/with-next-siwe-next-auth

[0xRowdy]

I don't think this is an issue anymore with Wagmi 2.^ viem 2.^. The examples listed are using older versions of Wagmi, Viem, and Next JS pages instead of the app router.
I'll double-check and try and get an example up for you.

[TudorEsan]

yes im using the app router. i m new with this and i can t find an example anywhere. the initial problem was that i did not set the nextauth boilerplate i thaught the RainbowKitSiweNextAuthProvider does this for me. It could be nice for the docs to be updated with an example with app router.

with this /api/auth/[...nextauth]/route.ts everything works well.

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

export const authOptions: AuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Ethereum",
      credentials: {
        message: {
          label: "Message",
          placeholder: "0x0",
          type: "text",
        },
        signature: {
          label: "Signature",
          placeholder: "0x0",
          type: "text",
        },
      },
      async authorize(credentials, req) {
        console.log("credentials", credentials);
        try {
          const siwe = new SiweMessage(
            JSON.parse(credentials?.message || "{}")
          );

          const nextAuthUrl =
            process.env.NEXTAUTH_URL ||
            (process.env.VERCEL_URL
              ? `https://${process.env.VERCEL_URL}`
              : null);
          if (!nextAuthUrl) {
            return null;
          }

          const nextAuthHost = new URL(nextAuthUrl).host;
          if (siwe.domain !== nextAuthHost) {
            return null;
          }

          if (
            siwe.nonce !==
            (await getCsrfToken({ req: { headers: req.headers } }))
          ) {
            return null;
          }

          await siwe.verify({ signature: credentials?.signature || "" });
          console.log("test");
          return {
            id: siwe.address,
          };
        } catch (e) {
          return null;
        }
      },
    }),
  ],
  session: { strategy: "jwt" },

  debug: process.env.NODE_ENV === "development",

  secret: process.env.NEXAUTH_SECRET,

  callbacks: {
    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 };

[magiziz]

@TudorEsan We'll address this and make sure we mention it in the docs. Thanks for the suggestion 🙏

[AndonMitev]

Hello i'am trying to integrate RainbowKitSiweNextAuthProvider but facing some issues:

I can see the prompt to sign a message but nothing happens after that:

here is ref to the repo:

https://github.com/AndonMitev/web3-nextjs-template/blob/main/components/providers/RainbowKitProvider.tsx

My goal is to:

1. Connect user with wallet of choice
2. Prompt to sign a message
3. Submit the message go custom server to obtain jwt
4. When jwt is expired to force the user to resign
   cc: @magiziz

[AndonMitev]

P.S. I've entirely removed the session from and am still stuck on "Sign Message." By the way, am I not supposed to connect before signing a message? Because the sign message modal is the first thing that I see after clicking the button.

[AndonMitev]

Okay sorry i'm dumb, I've added RainbowKitAuthenticationProvider later to the app and on my previous instance i was already connected :X

[magiziz]

All good. I can see that you have status 'unauthenticated' here. We won't proceed to the next step (connected step) if you're not authenticated. You need to pass a valid status ('loading' | 'unauthenticated' | 'authenticated').

You can create your own authentication method and call your custom backend APIs to achieve this.

Let me know if this helps 🙏

[AndonMitev]

Yeah i've just handled this, problem was that nothing was happening after user clicking on verify msg custom adapter was not executing following function but now is all good, here is example using everything latest might be helpful for someone:

https://github.com/AndonMitev/web3-nextjs-template/tree/main

[magiziz]

Perfect! Glad it worked out at the end 🙏