使用 NextAuth.js 和外部 API 实现自定义登录时遇到问题

Question

我正在开发一个 Next.js 应用程序，其身份验证由部署在 Heroku 上的单独 Node.js API 处理。我的目标是使用 NextAuth.js 管理前端的用户会话，其中后端 API 处理登录并返回 JWT 令牌。但是，我在使用 NextAuth.js 和自定义凭据提供程序登录过程中遇到问题。

当我尝试登录时，尽管在我的

http://localhost:3000/api/auth/error

方法中设置了

redirect: false

，但我意外地被重定向到

signIn

。另外，我无法成功登录。

这是成功登录后我的 API 的预期响应：

{
  "user": {
    "location": {
      "city": "Bradford, UK",
      "lat": 53.7937996,
      "lng": -1.7563583
    },
    "_id": "659f77b9eaee64fce34d9083",
    "fullName": "opeyemi david odedeyi",
    "email": "[email protected]",
    "gender": "prefer not to say",
    "isEmailConfirmed": false,
    "isActive": true,
    "createdAt": "2024-01-11T05:08:09.359Z",
    "updatedAt": "2024-01-13T04:35:40.948Z",
    "uniqueURL": "opeyemi-david-odedeyi-1704949689359",
    "__v": 3
  },
  "token": "<JWT_TOKEN>",
  "message": "User logged in successfully"
}

下面是我在 Next.js 应用程序中的登录页面的代码：

import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const buttonClicked = async (e) => {
        e.preventDefault();
        const result = await signIn('credentials', {
            redirect: false,
            email,
            password
        });
        
        if (result.error) {
            console.log(result.error);
        } else {
            console.log(result);
        }
    };

    // ... JSX for form inputs ...

    return (
        // ... JSX for the login form ...
    );
}

这是我的

[...nextauth].js

配置：

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
    providers: [
        CredentialsProvider({
            name: 'credentials',
            authorize: async (credentials) => {
                const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {
                    method: 'POST',
                    body: JSON.stringify(credentials),
                    headers: { "Content-Type": "application/json" }
                });
                const user = await res.json();

                if (!res.ok) {
                    throw new Error(user.message || "Something Went wrong!!");
                }
                
                return user;
            }
        })
    ],
    callbacks: {
        jwt: async ({ token, user }) => {
            if (user) {
                token.accessToken = user.token;
            }
            return token;
        },
        session: async ({ session, token }) => {
            session.accessToken = token.accessToken;
            return session;
        }
    },
});

我不确定为什么我会被重定向到错误页面以及为什么登录不成功。我的 NextAuth.js 设置或处理登录过程的方式是否缺少某些内容？任何见解或建议将不胜感激。

Answer 1

代码对我来说看起来不错。 您可以检查终端看看 Next.js 应用程序是否有任何错误吗？

此外，将日志添加到授权中，并添加回调以检查您是否收到了您所期望的信息。

一方面，这不是问题，NextAuth 路由在服务器中运行，因此您可以选择使用非客户端公开的环境变量而不是 process.env.NEXT_PUBLIC_API_URL （只需删除 NEXT_PUBLIC 以使其仅适用于服务器）。