-
Notifications
You must be signed in to change notification settings - Fork 4k
Description
Environment
System:
OS: Linux 6.18 EndeavourOS
CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
Memory: 22.60 GB / 31.28 GB
Container: Yes
Shell: 5.3.9 - /bin/bash
Binaries:
Node: 24.6.0 - /home/me/.nvm/versions/node/v24.6.0/bin/node
npm: 11.5.1 - /home/me/.nvm/versions/node/v24.6.0/bin/npm
Browsers:
Firefox: 147.0.3
Firefox Developer Edition: 147.0.3
npmPackages:
@auth/supabase-adapter: 1.11.1 => 1.11.1
next: 16.1.6 => 16.1.6
next-auth: 5.0.0-beta.30 => 5.0.0-beta.30
react: 19.2.4 => 19.2.4
Reproduction URL
https://stackblitz.com/edit/stackblitz-starters-4xyfndf5?file=package.json
Describe the issue
I'm using Next 16 and want to setup next-auth v5 beta 30 for Google. For the database I want to use my Supabase instance ( with the schema described here: https://authjs.dev/getting-started/adapters/supabase )
My .env file is following the required next-auth pattern
AUTH_SECRET...
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
SUPABASE_URL=...
SUPABASE_SERVICE_ROLE_KEY=...
I started with the auth.ts file in the root dir and passed my own sign in page to the pages field
import { SupabaseAdapter } from "@auth/supabase-adapter";
import NextAuth from "next-auth";
import type { Provider } from "next-auth/providers";
import GoogleProvider from "next-auth/providers/google";
export const providers: Provider[] = [GoogleProvider];
export const { handlers, signIn, signOut, auth } = NextAuth({
providers,
pages: {
signIn: "/sign-in",
},
adapter: SupabaseAdapter({
url: process.env.SUPABASE_URL!,
secret: process.env.SUPABASE_SERVICE_ROLE_KEY!,
}),
});and registered a route at ./app/api/auth/[...nextauth]/route.ts
import { handlers } from "../../../../auth";
export const { GET, POST } = handlers;Next I created a SessionProvider
"use client";
import { SessionProvider } from "next-auth/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}and added it to the root layout
import { Providers } from "../components/providers";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}Finally I got this sign-in page
import { redirect } from "next/navigation";
import { auth, providers, signIn } from "../../auth";
export default async function SignInPage({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
const session = await auth();
const callbackURL =
((await searchParams)["callback-url"] as string | undefined) ?? "/";
if (session) {
redirect(callbackURL);
}
return (
<div>
{providers.map((provider) => (
<form
key={provider.name}
action={async () => {
"use server";
await signIn(provider.options?.id as string, {
redirectTo: callbackURL,
});
}}
>
<button type="submit">
<span>Sign in with {provider.name}</span>
</button>
</form>
))}
</div>
);
}Now when starting the application and navigating to http://localhost:3000/sign-in I click the "Sign in with Google" button for the first time. The URL immediately changes to http://localhost:3000/api/auth/signin?callbackUrl=%2F but nothing happens.
When I click a second time the system crashes with a runtime error
An unexpected response was received from the server.
and the console shows
[auth][error] MissingCSRF: CSRF token was missing during an action signin. Read more at https://errors.authjs.dev#missingcsrf
Often enough the whole machine freezes / crashes.
How to reproduce
See Stackblitz sample
Expected behavior
I would expect a successful Google login