How to fix api/auth/error issue of next-auth in production?

Question

I have set the following environment variables in Vercel:

NEXTAUTH_URL=https://example.vercel.app (production) 
NEXTAUTH_URL=http://localhost:3000 (development)

Then authorized the following two redirect URLs in Google provider GCP console (https://console.cloud.google.com):

https://example.vercel.app/api/auth/callback/google
http://localhost:3000/api/auth/callback/google

When I click my sign-in button, it redirects to this error URL: https://example.vercel.app/api/auth/error and shows "This page could not be found." I also tried setting these values for the environment variables:

NEXTAUTH_URL=https://example.vercel.app/api/auth 
NEXTAUTH_URL=https://example.vercel.app/api/auth/signin

But the error persists. In development (https://localhost:3000) I am able to sign-in successfully: when clicking the sign-in button, it correctly redirects me to this URL:

http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F

and shows NextAuth default page:

My auth API pages/api/auth/[...nextauth].js:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    jwt: {
      signingKey: {
        kty: 'oct',
        kid: `${process.env.kid}`,
        alg: 'HS512',
        k: `${process.env.k}`,
      },
      secret: `${process.env.SECRET}`,
    },
  },
  debug: true,
  theme: 'dark',
})

How to fix this issue? Am I missing something?

Answer 1

I've always found somewhat misleading when the documentation of a library uses something like https://example.com without pointing out that it's literally an example. Luckily, this is easy to solve!

1. Correct domain on NEXTAUTH_URL

Since https://example.vercel.app is literally an example, instead of setting the NEXTAUTH_URL to it you should set it to your own app domain. You can get your app domain from the Overview page in Vercel, under Domains. In the following example the app domain would be https://my-simple-app.vercel.app:

NEXTAUTH_URL=https://my-simple-app.vercel.app (production) 

2. Correct domain on GCP console

The same should be done in the GCP console, instead of putting https://example.vercel.app/api/auth/callback/google, you should put your own app domain, in the case of the example above, that would be https://my-simple-app.vercel.app/api/auth/callback/google:

That should do it!

Extra resources

In case you want further information I can recommend this article. It starts from scratch and it helped me A LOT to clarify what I needed to get my authentication working with the Vercel deployment.

Answer 2

import NextAuth from "next-auth"
import RedditProvider from "next-auth/providers/reddit"
import GoogleProvider from "next-auth/providers/google";
    
export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    RedditProvider({
      clientId: process.env.REDDIT_CLIENT_ID,
      clientSecret: process.env.REDDIT_CLIENT_SECRET
    }),
    // ...add more providers here
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })
  ],
  secret: 'IamVeryHandsome' 
})

its worked for me puth the secret: 'anystring'. thanks יאיר אלמליח i use "next": "12.1.6", "next-auth": "^4.5.0",

appreciated

Answer 3

Add an environment variable called NEXTAUTH_SECRET with a random value, for example:

NEXTAUTH_SECRET=atr5-gt65-9jet

Although Next Auth works on localhost just fine, it needs that Secret to work in production.

[NEXTAUTH_SECRET][1] [1]: https://i.stack.imgur.com/64eVM.png

Answer 4

Geyler Pedroso Sanchez answer work very well for me i follow is intruction which is

Add an environment variable called NEXTAUTH_SECRET with a random value, for example:

NEXTAUTH_SECRET=atr5-gt65-9jet

and it works very well for me

Answer 5

If you still get this error after assigning NEXTAUTH_URL in your environment variables , try to add a secret key with any string value to your [...nextauth].js file after providers array...

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  // ******** !!!! ADD BELOW LINE !!!! **********
  secret: "PLACE-HERE-ANY-STRING",
});

Answer 6

Define a secret like this:

1. Add SECRET="MY_STRONG_SECRET" to your .env file.
2. Replace MY_STRONG_SECRET with a strong secret generated by a tool like https://generate-secret.vercel.app/32
3. Add secret: process.env.SECRET, at the same level as the providers array to pages/api/auth/[...nextauth].js.

Answer 7

I was also facing same problem it was solved after i do some changes in mongo database by changing ip address to 0.0.0.0/0 and deleting the node_modules folder and add it using yarn install command in terminal.

Answer 8

If you are facing this issue: check your .env file and if your is NEXT_PUBLIC_NEXTAUTH_URL then please remove NEXT_AUTH Prefix and make your variable as NEXTAUTH_URL I hope it will fix the issue because this way I fixed my issue. Thanks