nextauthjs / nextauthjs/next-auth
signIn("provider") does not work while passing provider ID - Next 15.2
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 4k
- PR merge metrics
- No merged PRs in 30d
Description
Environment
System:
OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
Memory: 34.01 GB / 46.90 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
npm: 11.0.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
Browsers:
Brave Browser: 134.1.76.80
Chrome: 134.0.6998.117
npmPackages:
@auth/prisma-adapter: ^2.8.0 => 2.8.0
next: 15.2.4 => 15.2.4
next-auth: ^4.24.11 => 4.24.11
react: ^19.0.0 => 19.1.0
Reproduction URL
https://github.com/ahmed-fawzy99/next-auth-fetch-error-example
Describe the issue
Using the function signIn("github") to redirect to configured GitHub OAuth does not work. It throws CLIENT_FETCH_ERROR then reloads the current page.
However, signIn() works and redirects me to NextAuth's default login page (``http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Flogin) with my provider in it, and the functionality works there. Also, passing anything to signIn other than my provider (github in this example) works as well and has the same behavior as passing nothing.
I'm on Next 15.2.4, NextAuth 4.24.11, Node 22.11
This is my configuration:
// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth"
import { db } from '@/db';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { NextAuthOptions } from 'next-auth';
import GitHubProvider from "next-auth/providers/github";
const handler = NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID ?? '',
clientSecret: process.env.GITHUB_CLIENT_SECRET ?? '',
}),
],
adapter: PrismaAdapter(db),
})
export { handler as GET, handler as POST }
.env.local:
GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
NEXTAUTH_SECRET=xxx
NEXTAUTH_URL=http://localhost:3000
layout:
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const session = await getServerSession(authOptions);
return (
<html lang="en">
<body
className="antialiased"
>
<SessionProvider session={session}>
<main>
<NavMenu />
{children}
</main>
</SessionProvider>
</body>
</html>
);
}
The client component that calls signIn:
'use client';
import {Button} from "@/components/ui/button";
import {signIn} from "next-auth/react";
import {JSX} from "react";
interface LoginButtonProps {
serviceName: string;
icon: JSX.Element;
}
export default function LoginButton({ serviceName, icon }: LoginButtonProps) {
return (
<Button variant="outline" className="w-full" onClick={() => signIn('github')}>
{icon}
Login with {serviceName.charAt(0).toUpperCase() + serviceName.slice(1)}
</Button>
);
}
How to reproduce
Explained in the issue description.
Expected behavior
To redirect me directly to github authentication page, not to the default NextAuth signIn page.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction URL, then inspect the client LoginButton and src/app/api/auth/[...nextauth]/route.ts shown in the report. Reproduce the CLIENT_FETCH_ERROR with signIn("github") and compare it with signIn() or an unknown provider. Done means the configured GitHub provider redirects directly to GitHub authentication without reloading the current page or opening the default sign-in page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- authentication
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100