CODEWITHSUNDEEP
next.jsnext-auth
Fuad9
Fuad9

Reputation: 399

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

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:

brower-img

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?

Upvotes: 18

Views: 73252

Answers (9)

Anwar kedir
Anwar kedir

Reputation: 1

if you have backend endpoint like yourexample.com/api/auth change it yourexample.com/backend/auth in my case i change my backend /app/... to /backend/...

Upvotes: 0

MUHAMMAD AZEEM
MUHAMMAD AZEEM

Reputation: 125

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

Upvotes: 1

Husain
Husain

Reputation: 1

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.

Upvotes: 0

RaySun
RaySun

Reputation: 229

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

Upvotes: 1

gepe
gepe

Reputation: 121

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

Upvotes: 5

Geyler Pedroso Sanchez
Geyler Pedroso Sanchez

Reputation: 31

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.sstatic.net/64eVM.png

Upvotes: 3

Jay Panchal
Jay Panchal

Reputation: 11

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.

Upvotes: 1

yair_elmaliah
yair_elmaliah

Reputation: 137

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",
});

Upvotes: 0

oxfist
oxfist

Reputation: 789

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:

Screenshot of Overview page in Vercel showing the app domain

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:

Screenshot of Google Cloud Platform console showing authorized URIs

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.

Upvotes: 15

Related Questions