参考文档

https://next-auth.js.org/providers/

这里我使用的是 next-auth 这个库，他可以很轻松的集成登录，比如 GitHub，Google 登录。

安装

npm install next-auth

配置 API 路由

文件pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here，比如Google登录，email登录...
  ],
};
export default NextAuth(authOptions);

这里的 GithubProvider 就是不同的登录需要配置的。GITHUB_ID，GITHUB_SECRET 这种需要配置在变量里面。

NextAuth 的配置

NextAuth 除了配置不同的 Provider 还需要配置其他内容，比如

export const authOptions: NextAuthConfig = {
  providers, //不同的登录方式
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {},
    async redirect({ url, baseUrl }) {},
    async session({ session, token, user }) {},
    async jwt({ token, user, account }) {
      // Persist the OAuth access_token and or the user id to the token right
    },
  },
};

插入新用户

在配置里面，重要的配置可以参考文档，这里说一个重要的就是登录以后我们需要向数据库插入新用户，那么可以使用下面的代码

    async jwt({ token, user, account }) {
            const dbUser: User = {
                uuid: getUuid(),
                email: user.email,
                nickname: user.name || "",
                avatar_url: user.image || "",
                signin_type: account.type,
                signin_provider: account.provider
          };

          try {
            //向数据库插入新用户，对接自己业务用户，这里可以用email保证唯一
            const savedUser = await saveUser(dbUser);

            token.user = {
              uuid: savedUser.uuid,
              email: savedUser.email,
              nickname: savedUser.nickname,
              avatar_url: savedUser.avatar_url,
              created_at: savedUser.created_at,
            };
          } catch (e) {
            console.error("save user failed:", e);
          }
    },