如何在 next-auth 中使用数字用户 ID

Question

我最近发现并开始测试 create-t3-app 作为 NextJS 项目的新基础，因为它负责 TypeScript、trpc、prisma 和 next-auth 等大量样板设置，因此可以节省我大量时间。虽然这是相关的，但我认为这不是我问题的根源。我的问题是我使用的 MySQL 数据库具有自动递增的用户 ID，但似乎 next-auth 包的类型迫使我使用字符串（next-auth/core/types.d.ts 中的 DefaultUser 和 next-auth/adapters.d.ts 中的 AdapterUser两者都将 id 的类型设置为字符串，并且 cmets 都说 UUID）。考虑到我可能会扩展那里的内容以支持数字用户 ID，我将其添加到 next-auth.d.ts：

import { DefaultSession, DefaultUser } from 'next-auth'

declare module 'next-auth' {
  interface User extends DefaultUser {
    id: number;
  }
  interface Session {
    user?: {
      id: number;
    } & DefaultSession['user'];
  }
}

这似乎在大多数地方都有效，除了在[...nextauth].ts 中它给了我这个错误

输入'字符串| number' 不能分配给类型 'number'。类型“字符串”不可分配给类型“数字”.ts(2322)

在这一段代码的session.user.id = user.id行

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id
      }
      return session
    }
  },
  adapter: PrismaAdapter(prisma),
  providers: []
}

export default NextAuth(authOptions)

如果我从 next-auth/adapters.d.ts 中删除 AdapterUser 中的 id: string; 行，TypeScript 错误就会消失，然后回退到 id: number;，因为我将其设置为 User

export interface AdapterUser extends User {
    id: string; // <-- I removed this
    email: string;
    emailVerified: Date | null;
}

我不认为我应该修改库的类型来支持数字用户 ID，但我完全不知道如何解决这个问题，也没有在网上找到答案。还是我不应该使用数字 ID，即使我的数据库使用了数字 ID？如果有帮助，我正在使用

next 12.3.1
next-auth 4.12.3
react 18.2.0
react-dom 18.2.0
superjson 1.9.1
zod 3.18.0
eslint 8.22.0
postcss 8.4.14
prettier 2.7.1
prisma 4.4.0
tailwindcss 3.1.6
typescrypt 4.8.0

Answer 1

不幸的是，似乎不可能“修补”或更改库的类型——即使尝试更改 NextAuthOptions 也不起作用，因为后续的属性定义必须具有相同的类型。同时，您必须使用运行时检查/强制或强制转换：

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        if (typeof user.id !== "number") throw new Error("id should a number");
        session.user.id = user.id // OK
        // session.user.id = +user.id // more dangerous but still works
        // session.user.id = user.id as number // also dangerous
      }
      return session
    }
  },
  adapter: PrismaAdapter(prisma),
  providers: []
}

Answer 2

扩展上面接受的答案，我利用运行时类型保护让我的生活更轻松一些。

就我而言，我的 Prisma 用户也有一些额外的属性：

model User {
  id                  Int                 @id @default(autoincrement())
  uuid                String              @unique @default(cuid())
  name                String?
  email               String?             @unique
  emailVerified       DateTime?
  image               String?
  accounts            Account[]
  categories          Category[]
  sessions            Session[]
  records             Record[]
  permissionsGranted  SharePermission[]     @relation("permissions_granted")
  permissionsReceived SharePermission[]     @relation("permissions_received")
  @@unique([id, uuid])
  @@index(fields: [id, uuid], name: "user_by_id_idx")
}

所以我定义了这些类型保护：

import { User as PrismaUser } from '@prisma/client';
import { Session, User } from 'next-auth';

export interface IdentifiedSession extends Session {
    id: number;
    user: PrismaUser;
}

export const isNextAuthUser = (value: unknown): value is User => {
    const { id, name, email, image } = (value ?? {}) as User;
    const idIsValid = typeof id === 'number';
    const nameIsValid = typeof name === 'string' || !name;
    const emailIsValid = typeof email === 'string' || !email;
    const imageIsValid = typeof image === 'string' || !image;
    return idIsValid && nameIsValid && emailIsValid && imageIsValid;
};

export const isPrismaUser = (value: unknown): value is PrismaUser => {
    const { uuid, emailVerified } = (value ?? {}) as PrismaUser;
    const uuidIsValid = typeof uuid === 'string';
    const emailVerifiedIsEmail = emailVerified instanceof Date || !emailVerified;
    return isNextAuthUser(value) && uuidIsValid && emailVerifiedIsEmail;
};

export const isSession = (value: unknown): value is Session => {
    const { user, expires } = (value ?? {}) as Session;
    const userIsValid = isPrismaUser(user) || isNextAuthUser(user) || !user;
    const expiresIsValid = typeof expires === 'string';
    return expiresIsValid && userIsValid;
};

export const isIdentifiedSession = (value: unknown): value is IdentifiedSession => {
    const session = (value ?? {}) as IdentifiedSession;
    const sessionIsValid = isSession(session);
    const sessionUserIsValid = isPrismaUser(session.user);
    return sessionIsValid && sessionUserIsValid;
};

然后，在会话回调中，我像这样使用了一个类型保护：

session: async ({ session, user }) => {
  if (!isPrismaUser(user)) {
    return session;
  }
  const identifiedSession: IdentifiedSession = {
    ...session,
    user,
    id: user.id,
  };
  return identifiedSession;
}

这确实意味着回调的签名现在是Session | IdentifiedSession，我在下游消费者中处理它

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
    const session = await getSession({ req });
    if (!isIdentifiedSession(session)) {
        return {
            props: {
                records: [],
            },
        };
    }
    const records = await prisma.record.findMany({
        where: {
            reporter: {
                id: session.id,
            },
        },
        orderBy: {
            date: 'asc',
        },
        include: {
            category: {
                select: {
                    title: true,
                },
            },
        },
    });
    return {
        props: { records },
    };
};