如何在Next-Auth中设置自定义email和accessToken Cookie？

一、自定义Cookie被移除的解决方法 #

Next-Auth默认会管理自身的会话Cookie，但你可以通过配置添加自定义Cookie，不会被自动移除。需要在authOptions.ts中做以下修改：

1. 配置JWT和Session回调，保留自定义数据 #

在callbacks中，将email和accessToken存入JWT Token，并传递到Session中：

// authOptions.ts
import type { AuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: AuthOptions = {
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 这里替换为你的实际用户验证逻辑，返回包含email和accessToken的用户对象
        const user = {
          id: "1",
          email: credentials?.email,
          accessToken: "your-real-access-token",
        };
        return user;
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      // 登录时将用户的email和accessToken存入JWT token
      if (user) {
        token.email = user.email;
        token.accessToken = user.accessToken;
      }
      return token;
    },
    async session({ session, token }) {
      // 将token中的自定义数据同步到session，供前端调用
      session.user.email = token.email as string;
      session.user.accessToken = token.accessToken as string;
      return session;
    },
  },
  // 配置自定义Cookie的存储规则
  cookies: {
    email: {
      name: "email",
      options: {
        domain: process.env.NODE_ENV === "production" ? ".your-domain.com" : undefined,
        path: "/",
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        httpOnly: false, // 需前端读取则设为false，仅后端使用设为true
      },
    },
    accessToken: {
      name: "accessToken",
      options: {
        domain: process.env.NODE_ENV === "production" ? ".your-domain.com" : undefined,
        path: "/",
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        httpOnly: true, // 建议设为true，避免前端篡改
      },
    },
    // 保留Next-Auth默认Cookie的配置（按需修改）
    sessionToken: {
      name: `next-auth.session-token`,
      options: {
        domain: process.env.NODE_ENV === "production" ? ".your-domain.com" : undefined,
        path: "/",
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
      },
    },
  },
  session: {
    strategy: "jwt", // 使用JWT策略更便于自定义数据传递
  },
};

2. 手动设置自定义Cookie（可选） #

如果自动配置不生效，可以在signIn回调中手动设置Cookie：

// authOptions.ts 的 callbacks 中添加 signIn
callbacks: {
  async signIn({ user }) {
    if (user.email && user.accessToken) {
      const { cookies } = require("next/headers");
      // 设置email Cookie
      cookies().set("email", user.email, {
        path: "/",
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        httpOnly: false,
      });
      // 设置accessToken Cookie
      cookies().set("accessToken", user.accessToken, {
        path: "/",
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
        httpOnly: true,
      });
    }
    return true;
  },
  // ... 其他回调逻辑
},

二、axios无法获取Next-Auth默认Cookie的解决方法 #

1. 配置axios实例开启凭证携带 #

在axios.ts中，确保实例开启withCredentials，让请求自动携带Cookie：

// axios.ts
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL, // 替换为你的API地址
  withCredentials: true, // 关键配置：开启凭证携带
});

// 可选：添加请求拦截器，从session中获取token（替代Cookie传递的方式）
axiosInstance.interceptors.request.use(async (config) => {
  const { getSession } = require("next-auth/react");
  const session = await getSession();
  if (session?.user.accessToken) {
    config.headers.Authorization = `Bearer ${session.user.accessToken}`;
  }
  return config;
});

export default axiosInstance;

2. 检查Next-Auth的Cookie配置 #

确保默认Cookie的sameSite和secure规则符合浏览器要求：

• 开发环境：sameSite: "lax"，secure: false
• 生产环境：sameSite: "lax"（跨域场景设为"none"），secure: true

3. 验证middleware.ts的路由配置 #

确保路由拦截规则正确，不会误阻止Cookie传递：

// middleware.ts
export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/dashboard/:path*", "/api/protected/:path*"], // 仅保护需要验证的路由
};

关键注意事项 #

• Next-Auth的默认Cookie是会话管理必需的，无法完全移除，自定义Cookie为额外添加项，二者不会冲突。
• 跨域场景下，需将Cookie的domain设为父域名，sameSite设为"none"，同时开启secure: true。
• 前端读取Cookie时，httpOnly必须设为false；仅后端使用的Cookie建议设为true以提升安全性。

内容的提问来源于stack exchange，提问作者elahe karami