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

Question

I have set the environment variable in Vercel:

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

Authorized redirect URL 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 signin button, it redirects to this 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 sigin successfully, when I click my signin button it redirects me to this URL:

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

and shows:

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

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 3

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.