Next Auth Credentials Provider：API DTO映射与会话数据获取问题

一、将完整用户信息存入Session #

默认NextAuth仅会保留user对象中的name、email、image字段到会话中，要把API返回的username、accessToken、roles等信息存入，需要配置jwt和session回调：

修改[...nextauth].js，在authOptions中添加以下配置：

export const authOptions = {
  // ... 原有providers、pages配置
  callbacks: {
    async jwt({ token, user }) {
      // 首次登录时，把自定义用户信息合并到token中
      if (user) {
        token.username = user.username;
        token.accessToken = user.accessToken;
        token.refreshToken = user.refreshToken;
        token.roles = user.roles;
      }
      return token;
    },
    async session({ session, token }) {
      // 把token中的自定义信息同步到session.user里
      session.user.username = token.username;
      session.user.accessToken = token.accessToken;
      session.user.refreshToken = token.refreshToken;
      session.user.roles = token.roles;
      return session;
    },
  },
  // 可选：默认session策略为jwt，如需持久化更多信息可明确设置
  session: {
    strategy: "jwt",
  },
};

同时修复authorize方法里的拼写错误：const { usernme, password } = credentials; → const { username, password } = credentials;，避免因变量名错误导致请求失败。

之后在页面中使用useSession就能获取完整信息：

import { useSession } from "next-auth/react";

const { data: session } = useSession();

console.log(session.user);
// 输出包含email、username、accessToken、roles等字段的对象

二、登录时显示API返回的错误信息 #

要在登录表单中展示API返回的message（比如账户锁定提示），需要调整authorize方法的错误处理逻辑，并修改登录表单的调用方式：

1. 修改[...nextauth].js中的authorize方法 #

当API返回失败（success: false）时，抛出包含错误信息的异常，而不是返回null：

async authorize(credentials, req) {
  const { username, password } = credentials; // 修复拼写错误

  const body = JSON.stringify({ username, password });
  const res = await fetch(`${API_URL}/Login`, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json; charset=utf-8",
    },
    body,
  });

  const data = await res.json();

  if (data.success) {
    return {
      email: data.data.email,
      username: data.data.username,
      accessToken: data.data.accessToken,
      refreshToken: data.data.refreshToken,
      roles: data.data.roles,
    };
  } else {
    // 抛出错误，携带API返回的message
    throw new Error(data.message);
  }
}

2. 修改登录表单的signIn调用 #

将redirect设为false，这样signIn会返回包含错误信息的结果，而非直接跳转：

// Get data from the form.
const nextAuthSettings = {
  username: event.target.username.value,
  password: event.target.password.value,
  redirect: false, // 禁止自动跳转
  callbackUrl: "/dashboard",
};

// Send the form data to Next Auth
const result = await signIn("credentials", nextAuthSettings);

// Error Handling
if (!result.ok) {
  // 从result.error中获取API返回的错误信息
  setErrorMsg(result.error);
} else {
  // 登录成功后手动跳转到目标页面
  window.location.href = nextAuthSettings.callbackUrl;
}

这样当API返回错误时，就能在登录页面显示对应的提示信息。

内容的提问来源于stack exchange，提问作者Scottish Smile