English 中文(简体)
How to fix api/auth/error issue of next-auth in production?
原标题:

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:

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?

问题回答

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.

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

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

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

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

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.

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.

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





相关问题
拆除月度边界(实际大型日历)

采用大型反应日历的Im, 并想要清除包罗日历的边界。 以及如何改变日记栏和日记的颜色? 如何使其发挥作用?

表中未显示的元数据

我将元件定义为如下文所示,但是在我的剪辑中,它没有显示“当地:3000/#home”。 我的所有jsx档案都有“用户”bc。

NextJS 13 Data Fetching

Is there anyway of custom baseURL for their fetch method? For example in axios: const instance = axios.create({ baseURL: https://some-domain.com/api/ , timeout: 1000, headers: { X-Custom-Header ...

热门标签