NextAuth会话中访问令牌的安全性分析与最佳实践

// pages/api/auth/[...nextauth].ts 或 lib/auth.ts
import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import jwt_decode from "jwt-decode"; // 假设你有一个jwt_decode工具

const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL; // 你的API基础URL

interface JwtDecodedAttributes {
  userId: string;
  username: string;
  role: string;
  profilepicture?: string;
  iat: number;
  exp: number;
  email?: string;
  // ...其他你需要的JWT负载属性
}

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt", // 使用JWT作为会话策略
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        const { username, password } = credentials as {
          username: string;
          password: string;
        };

        if (!credentials) {
          return null;
        }

        try {
          // 调用你的后端登录API
          const response = await axios.post(`${BASE_URL}/login`, {
            username,
            password,
          });

          if (response?.data?.userToken) {
            const userToken = response.data.userToken;
            const userRefreshToken = response.data.userRefreshToken;

            // 解码访问令牌以获取用户信息
            const user: JwtDecodedAttributes = jwt_decode(userToken);

            // 返回一个包含令牌和用户信息的对象
            // 这个对象会被传递给jwt callback
            return {
              id: user.userId, // NextAuth要求有id字段
              name: user.username,
              role: user.role,
              profilepicture: user.profilepicture,
              email: user.email,
              userId: user.userId,
              accessToken: userToken, // 存储访问令牌
              refreshToken: userRefreshToken, // 存储刷新令牌
              iat: user.iat,
              exp: user.exp,
            };
          }
        } catch (error) {
          console.error("Login error:", error);
          // 处理登录失败，例如返回null或抛出错误
        }
        return null; // 认证失败
      },
    }),
  ],
  pages: {
    signIn: "/login", // 自定义登录页面路径
  },
  callbacks: {
    // jwt callback：在JWT被创建或更新时调用
    async jwt({ token, user }) {
      // user对象来自authorize函数，包含我们自定义的令牌信息
      // 将user对象中的自定义数据合并到token中
      // token对象是存储在加密JWT中的数据
      return { ...token, ...user };
    },
    // session callback：在每次useSession()或getSession()被调用时，
    // 或者在客户端页面加载时，获取会话数据时调用
    async session({ session, token }) {
      // token对象来自jwt callback，包含所有合并后的数据
      // 将token中的数据暴露给客户端的session对象
      // 注意：这里将整个token对象赋值给session.user，你可以根据需要调整结构
      session.user = token as any; // 类型断言，以适应自定义属性
      return session;
    },
  },
};

export default NextAuth(authOptions);

// components/SomeComponent.tsx 或 pages/some-page.tsx
import { useSession } from "next-auth/react";

function ProtectedContent() {
  const { status, data: session } = useSession();

  if (status === "loading") {
    return <div>Loading session...</div>;
  }

  if (status === "authenticated") {
    // 访问存储在session.user中的accessToken
    const accessToken = (session?.user as any)?.accessToken;
    console.log("Access Token:", accessToken);

    // 现在你可以使用这个accessToken来调用受保护的API
    // 例如：axios.get('/api/protected', { headers: { Authorization: `Bearer ${accessToken}` } });

    return (
      <div>
        <h1>Welcome, {(session?.user as any)?.name}!</h1>
        <p>Your access token is available.</p>
        {/* <p>Token: {accessToken}</p> // 不建议直接在UI显示令牌 */}
      </div>
    );
  }

  return <div>Access Denied. Please log in.</div>;
}

export default ProtectedContent;