Next-auth Receiving 404 after login attempt in deployed Vercel application

Question

Developing a next.js application that uses next-auth for authentication. It is currently setup with GitHub as the only Provider.

In development, the authentication works just fine.

In production, after I click "Sign in with GitHub", I am directed to a 404.

I'm 99% sure this has to do with the callback URL I have setup in my GitHub OAuth app. For dev purposes it is set to http://localhost:3000/api/auth/callback/github. Obviously this is no good for a deployed app, but I don't know what to set it to. I've tried a couple of different URL's with no luck.

Other than the callback URL is there anything else I need to set up in my code to get this working in production?

Answer 1

It might be late but I faced the similar issue and tried all the solutions. Despite having everything correct the issue was still there and after wasting 2hrs finding every possible solution I came to know my code had a typo in the folder name /{...nextauth} containing the authentication file.

The file dir should be exactly app/api/auth/[...nextauth]/{your auth file}

Please take care of dirs :(

Answer 2

Other than the callback URL, this is from the docs:

https://next-auth.js.org/getting-started/example#deploying-to-production

When deploying your site set the NEXTAUTH_URL environment variable to the canonical URL of the website.

NEXTAUTH_URL=https://example.com

You should set this as a production environment variable on the Vercel dashboard to link to the URL where Vercel deployed your site.

Answer 3

I ran into the same issue and I used next export for static HTML export. Without next export, just simply to use next build, it worked for me on vercel.

Answer 4

It is possible that this is because you changed your .env.local file to contain your GITHUB_ID value, but did not restart next.js to pick up the new value.

Try stopping your dev sever, and restarting it (with npm run dev).

The clue is that the Github authentication URL contains &client_id= at the end, with no Github ID token.

Answer 5

I had the same 404 problem, it was due to the changes in Version 4 of NextAuth, I was getting a 404 page when logging in and changing the code in nextauth.js fixed it for me, you could try the following:

import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
})