Skip to content

signIn("provider") does not work while passing provider ID - Next 15.2 #12836

@ahmed-fawzy99

Description

@ahmed-fawzy99

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriageUnseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions