Google provider, Prisma Adapter - Default signin page does not redirect

[toddcooke]

Provider type

Google

Environment

System: OS: macOS 13.5.1 CPU: (8) arm64 Apple M1 Memory: 102.28 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.13.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.6.3 - /usr/local/bin/npm pnpm: 8.6.1 - /opt/homebrew/bin/pnpm Browsers: Chrome: 116.0.5845.179 Safari: 16.6

Reproduction URL

https://github.com/toddcooke/next-auth-bug-repro

Describe the issue

After clicking sign in with google, the default login page does not redirect to the specified callback url. Here is a video of the behavior: https://www.youtube.com/watch?v=4Ivjg1gQqYk

How to reproduce

1. Clone https://github.com/toddcooke/next-auth-bug-repro
2. Add secrets to a .env file at the root of the project:

   GITHUB_TOKEN=
   DATABASE_URL=
   GOOGLE_ID=
   GOOGLE_SECRET=
   NEXTAUTH_SECRET=
   NEXTAUTH_URL=
   DIRECT_URL=
   DATABASE_URL=
   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=

3. Navigate to the next auth sign in page at /api/auth/signin
4. Click Sign in with Google

Expected behavior

I expect the default login page to redirect to the url I supplied, in this case http://localhost:3000/dashboard

[PedroCarreiras]

Hey! Could you try to change the anchor tag to a button (and/or removing the href and even all the event related stuff)? I believe calling sign in with a provider should directly send the user to the google (or other provider) sign in page. The href might be getting in the way.

This is how I have done it:

<button
  className={`${styles.button} ${styles[provider?.name]}`}
  onClick={() =>
    signIn(provider?.id, { callbackUrl: callbackUrl })
  }
>
  <Image className={styles.image} src={path} height={32} width={32} alt="logo"></Image>
  Entrar com {provider?.name}
</button>

In discussion #8528 you can get a better look at my code

[toddcooke]

Still didn't work for me. The user/account info has been getting saved in supabase, which is the db I'm using, but the sign in page doesn't seem to redirect for some reason.

[PedroCarreiras]

Hey again! I have cloned the repo you provided and I think I got something. Purely by accident I ran your app at the same time as mine and the redirect to http://localhost:3000/dashboard worked perfectly (althouogh I saw my own app). Your app was on port 3001 though. When I accessed http://localhost:3001/dashboard I got redirected to the sign in page as in the video! I'll look into it.

While I am here though, I'd recommend you use a dedicated file to initialize the prisma client (const prisma = new PrismaClient();) from which you import it. I had quite a headache trying to fix this issue. While it has changed since I visited a while ago, this is the relevant page.

[PedroCarreiras]

Removing middleware.ts fixes the issue.

[toddcooke]

Thanks for the prisma tip. I think I want middleware.ts file, otherwise I have to manually check that the session is valid for each page, which is doable but annoying.

[PedroCarreiras]

Yeah, it is what I did. But I didn't mean you should remove the file, it is just a clue in the investigation. Now I quickly implemented the Session provider to see if my way worked and I get a normal session object. This means the user is signed in and something is wrong with the middleware (I'm guessing). Maybe there is an option you can provide it to fix the problem? Honestly I have no experience with middleware so I'll leave this part for you to search online. Do leave an update here if you find anything though!

[okanji]

I have the exact same issue and am also using prisma adapter, but I am using keycloak. The issue is with the middleware.ts file. I was hoping to protect all pages with middleware but it looks like I will have to manually protect each page which will be annoying. It looks like the prisma adapter is the common denominator but I wonder if that is the issue..

[jarmo-seljamaa]

I had a similar issue and then found this: https://github.com/nextauthjs/next-auth/discussions/7785 Updating Node version seemed to fix it.

[spencersmb]

When I'm on Next.js version 13.4.19 - google provider redirects me here https://localhost:3000/api/auth/signin?csrf=true everytime I try to hit the login button.

When I downgrade to the 13.4.9 - google provider button sends me to the correct auth screen for google.