[Authentication Error] <Error preparing message, please retry>

Update: I think I missed the If you haven't already, first set up your [Next.js](https://nextjs.org/) project with the [official Sign-In with Ethereum boilerplate for NextAuth.js.](https://docs.login.xyz/integrations/nextauth.js) and will do this right now. Have never used NextAuth, so that makes sense.

Is there an existing issue for this?

[X] I have searched the existing issues

RainbowKit Version

0.7.2

wagmi Version

0.7.5

Current Behavior

I'm trying to add the authentication through the tutorial on the site. However, I keep getting a "Error preparing message, please retry!" (first screenshot) error whenever I try to connect on the site. Before I added the authentication code, I was able to connect my wallet.

The console shows some next-auth errors in the console as well, second screenshot referring to api/auth/csrf, unexpected json parses, and api/auth/_log

Here's the app code:


import Router from "next/router";

import { useEffect, useState } from "react";
import { useRouter } from "next/router";

import * as ga from "../lib/ga/index.js";

import NProgress from "nprogress"; //nprogress module
import "nprogress/nprogress.css"; //styles of nprogress
import "../styles/global.css";
import ErrorBoundary from "../components/ErrorTools/ErrorBoundary";
import ErrorFallback from "../components/ErrorTools/ErrorFallBack";

import "@rainbow-me/rainbowkit/styles.css";
import { getDefaultWallets, RainbowKitProvider, midnightTheme, darkTheme, connectorsForWallets, DisclaimerComponent } from "@rainbow-me/rainbowkit";
import { chain, configureChains, createClient, WagmiConfig } from "wagmi";
import { RainbowKitSiweNextAuthProvider, GetSiweMessageOptions} from '@rainbow-me/rainbowkit-siwe-next-auth';
import { SessionProvider } from 'next-auth/react';
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import {
  injectedWallet,
  walletConnectWallet,
  trustWallet,
  metaMaskWallet,
  braveWallet,
  coinbaseWallet
} from '@rainbow-me/rainbowkit/wallets';
const { chains, provider } = configureChains(
  [chain.mainnet],
  [alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_KEY_NEW }), publicProvider()]
);

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      metaMaskWallet({ chains }),
      injectedWallet({ chains }),
      braveWallet({ chains }),
      coinbaseWallet({chains}),
      walletConnectWallet({ chains }),
      trustWallet({ chains })
    ],
  },
]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  return (
    <>
      <WagmiConfig client={wagmiClient}>
        <SessionProvider refetchInterval={0} session={pageProps.session}>
          <RainbowKitSiweNextAuthProvider >
            <RainbowKitProvider 
              modalSize="compact" 
              appInfo = {{ appName: "Flips"}} 
              showRecentTransactions={true} 
              chains={chains} 
              theme = {darkTheme()}>
              <ErrorBoundary FallbackComponent={ErrorFallback}>
                <Component {...pageProps} />
              </ErrorBoundary>
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </SessionProvider>
      </WagmiConfig>
    </>
  );
}

export default MyApp;

Expected Behavior

Should prompt the signature

Steps To Reproduce

Should be able to just copy and paste the authentication code from rainbowkit's site. However, it my be just a specific env problem for our site.

There were no modifications to the auth. I installed both @rainbow-me/rainbowkit-siwe-next-auth and next-auth <-- for SessionProvider.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Screenshot of Error

rainbow-me / rainbowkit