CODEWITHSUNDEEP
authenticationnext.jsvercelnext-authcallbackurl
Austin Karren
Austin Karren

Reputation: 115

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

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?

Upvotes: 8

Views: 15206

Answers (6)

SAT77
SAT77

Reputation: 21

To fix the 404 error with NextAuth, just add an AUTH_SECRET in your Environment Variables Generate it with:

openssl rand -base64 32

Then add it in ( Environment Variables in Vercel Dashboard)

AUTH_SECRET=your_generated_secret_key

Redeploy it and the issue should be resolved

Upvotes: 0

Vishal Jha
Vishal Jha

Reputation: 21

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 :(

Upvotes: 2

Aindriú
Aindriú

Reputation: 3740

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,
    }),
  ],
})

Upvotes: 0

tmtk75
tmtk75

Reputation: 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.

Upvotes: 0

Keir Finlow-Bates
Keir Finlow-Bates

Reputation: 1053

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.

Upvotes: 0

antosan
antosan

Reputation: 146

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.

Upvotes: 5

Related Questions