Next-Auth 使用憑據登錄在 NextJS 中不起作用

Question

我正在將 next-auth 包集成到我的新 Next.js 項目中。 我已關注所有 Next.js 和 next-auth 文檔，但找不到解決方案。

我面臨的問題是這樣的：我想使用提交到我在 Laravel 上運行的 API 服務器的電子郵件和密碼登錄到我的 Next.js 應用程序。 提交登錄表單時，我正在執行以下功能。

import { signIn } from "next-auth/client";

const loginHandler = async (event) => {
    event.preventDefault();

    const enteredEmail = emailInputRef.current.value;
    const enteredPassword = passwordInputRef.current.value;

    const result = await signIn("credentials", {
        redirect: false,
        email: enteredEmail,
        password: enteredPassword,
    });

    console.log("finished signIn call");
    console.log(result);
};

下面顯示的代碼在我的pages/api/auth/[...nextauth].js

import axios from "axios";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
    session: {
        jwt: true,
    },
    providers: [
        Providers.Credentials({
          async authorize(credentials) {
            axios
              .post("MY_LOGIN_API", {
                email: credentials.email,
                password: credentials.password,
              })
              .then(function (response) {
                console.log(response);
                return true;
              })
              .catch(function (error) {
                console.log(error);
                throw new Error('I will handle this later!');
              });
          },
        }),
    ],
});

但是，當嘗試使用正確/錯誤的憑據登錄時，我在 Google Chrome 控制台日志中收到以下錯誤。

POST http://localhost:3000/api/auth/callback/credentials? 401 (Unauthorized)
{error: "CredentialsSignin", status: 401, ok: false, url: null}

我在這里錯過了什么嗎？

Answer 1

從文檔（ https://next-auth.js.org/providers/credentials#example ）

async authorize(credentials, req) {
  // Add logic here to look up the user from the credentials supplied
  const user = { id: 1, name: 'J Smith', email: 'jsmith@example.com' }

  if (user) {
    // Any object returned will be saved in `user` property of the JWT
    return user
  } else {
    // If you return null or false then the credentials will be rejected
    return null
    // You can also Reject this callback with an Error or with a URL:
    // throw new Error('error message') // Redirect to error page
    // throw '/path/to/redirect'        // Redirect to a URL
  }
}

您當前沒有從authorize回調返回用戶或null 。

Answer 2

shanewwarren 發布的答案是正確的，但這里有更詳細的答案，

使用 axios 解決這個問題

 async authorize(credentials, req) {
        return axios
          .post(`${process.env.NEXT_PUBLIC_STRAPI_API}/auth/login`, {
            identifier: credentials.identifier,
            password: credentials.password,
          })
          .then((response) => {
            return response.data;
          })
          .catch((error) => {
            console.log(error.response);
            throw new Error(error.response.data.message);
          }) || null;
      },