下一个身份验证 Google 提供商 [下一个身份验证][错误][client_fetch_error]

next-auth Google provider [next-auth][error][client_fetch_error]

Helle,我正在尝试在我的 Next.js 项目上添加 google 身份验证。我从 google 控制台获得了我的 GOOGLE_ID & GOOGLE_SECRET。

我的控制台上出现了这些错误:

我已经按照教程进行操作,这是我的配置:

_app.tsx :

const App = function ({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Provider session={pageProps.session}>
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      </Provider>
    </RecoilRoot>
  );
};

src/pages/my-page.tsx :

const MyPage: FC<MyPageProps> = function (){
  const [session] = useSession();
  
  if(!session){
    return <a onClick={() => signIn("Google", { callbackUrl: "/monitoring-docker" })});
  }
}

src/pages/api/[...nextauth].ts :

const { serverRuntimeConfig } = getConfig();
export default NextAuth({
  providers: [
    Providers.Google({
      clientId: serverRuntimeConfig.GOOGLE_ID,
      clientSecret: serverRuntimeConfig.GOOGLE_SECRET,
    }),
  ],
});

谢谢你的帮助,我已经卡了几个小时了...!

文档又看了一遍,忘了api下的auth文件夹...

在您的 NextAuth 函数中添加一个秘密选项。它可以是任何随机的秘密字符串。

export default NextAuth({
   // Configure one or more authentication providers
   providers: [
      GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      }),
      // ...add more providers here
   ],
   secret: process.env.SECRET,
   pages: {
      signIn: "/auth/signin",
   },
   callbacks: {
      async session({ session, token, user }) {
         session.user.username = session.user.name
            .split(" ")
            .join("-")
            .toLocaleLowerCase();

         session.user.uid = token.sub;
         return session;
      },
   },
});