使用Next Auth的GitHub与Email Provider时，如何为首次登录用户添加额外字段并完成MongoDB存储？

嘿，刚帮几个朋友解决过类似的NextAuth+MongoDB的问题，给你梳理一套落地的方案，一步步来很容易上手：

核心逻辑就是：首次登录时判断用户是否已有完整的fullname和username，没有就强制跳转到补全表单，完成后再更新数据库并放行到目标页面。下面分模块拆解具体操作：

1. 配置NextAuth的回调函数（关键步骤） #

首先在pages/api/auth/[...nextauth].js里，利用NextAuth的signIn、redirect和session回调来做登录后的判断和跳转控制。

1.1 识别首次登录用户并标记状态 #

我们需要在用户登录时，先检查MongoDB里是否存在该用户的完整信息。如果是新用户（只有基础的邮箱/头像），就给session标记一个“需要补全信息”的状态：

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import EmailProvider from "next-auth/providers/email";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import clientPromise from "../../../lib/mongodb";

export default NextAuth({
  adapter: MongoDBAdapter(clientPromise),
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
  callbacks: {
    async signIn({ user, profile }) {
      const db = (await clientPromise).db();
      // 用邮箱或GitHub ID匹配数据库中的用户
      const existingUser = await db.collection("users").findOne({
        $or: [{ email: user.email }, { githubId: profile?.id }]
      });

      // 新用户标记需要补全信息
      if (!existingUser) {
        user.needsProfileCompletion = true;
      }
      return true;
    },
    async redirect({ url, baseUrl }) {
      const session = await getSession({ req });
      // 如果需要补全信息，跳转到表单页面
      if (session?.user?.needsProfileCompletion) {
        return `${baseUrl}/complete-profile`;
      }
      // 否则跳转到原目标页面或首页
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
    async session({ session, user }) {
      // 把补全状态和用户ID带到session里，方便后续使用
      session.user.needsProfileCompletion = !user.fullname || !user.username;
      session.user.id = user.id;
      return session;
    },
  },
  session: { strategy: "jwt" }, // 用JWT模式更灵活地自定义session数据
});

2. 制作补全信息的表单页面（/complete-profile） #

这个页面要做三件事：显示表单收集fullname和username、提交后更新数据库、更新session状态并跳转。

用React Hook Form简化表单处理的示例：

import { useSession, signOut } from "next-auth/react";
import { useForm } from "react-hook-form";
import { useRouter } from "next/router";

export default function CompleteProfile() {
  const { data: session } = useSession();
  const router = useRouter();
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 如果用户已经完成信息，直接跳转到首页
  if (!session?.user?.needsProfileCompletion) {
    router.push("/");
    return null;
  }

  const onSubmit = async (data) => {
    try {
      // 调用API更新用户信息
      const res = await fetch("/api/update-profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId: session.user.id,
          fullname: data.fullname,
          username: data.username,
        }),
      });

      if (res.ok) {
        // 刷新session，清除补全标记
        await signIn("credentials", { redirect: false });
        router.push("/");
      } else {
        alert("信息更新失败，请重试");
      }
    } catch (err) {
      console.error(err);
      alert("出现错误，请稍后再试");
    }
  };

  return (
    <div className="max-w-md mx-auto mt-16 p-6 border rounded-lg">
      <h1 className="text-2xl font-bold mb-6">完善你的个人信息</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">全名</label>
          <input
            type="text"
            {...register("fullname", { required: "请输入你的全名" })}
            className="w-full p-2 border rounded-md"
          />
          {errors.fullname && <p className="text-red-500 text-xs mt-1">{errors.fullname.message}</p>}
        </div>
        <div className="mb-6">
          <label className="block text-sm font-medium mb-1">用户名</label>
          <input
            type="text"
            {...register("username", { required: "请设置你的用户名" })}
            className="w-full p-2 border rounded-md"
          />
          {errors.username && <p className="text-red-500 text-xs mt-1">{errors.username.message}</p>}
        </div>
        <button
          type="submit"
          className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
        >
          完成并进入
        </button>
      </form>
    </div>
  );
}

3. 创建更新用户信息的API路由（/api/update-profile） #

这个API负责接收表单数据，更新MongoDB里的用户文档：

import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ message: "仅支持POST请求" });
  }

  const { userId, fullname, username } = req.body;

  try {
    const db = (await clientPromise).db();
    // 更新用户文档，添加fullname和username字段
    await db.collection("users").updateOne(
      { _id: userId },
      { $set: { fullname, username } }
    );

    res.status(200).json({ message: "信息更新成功" });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "信息更新失败" });
  }
}

4. 全局路由守卫（可选） #

如果担心用户手动绕过补全页面访问其他路由，可以在_app.js里加一个全局判断：

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

export default function App({ Component, pageProps }) {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    // 已登录但未补全信息，且不在补全页面时，强制跳转
    if (
      status === "authenticated" &&
      session?.user?.needsProfileCompletion &&
      router.pathname !== "/complete-profile"
    ) {
      router.push("/complete-profile");
    }
  }, [session, status, router]);

  // 加载状态显示
  if (status === "loading") {
    return <div className="flex justify-center items-center h-screen">加载中...</div>;
  }

  return <Component {...pageProps} />;
}

额外注意点 #

• 用户名唯一性：可以在表单提交前调用API检查数据库中是否已有重复的username，避免冲突
• Email Provider适配：Email Provider返回的只有邮箱，这套逻辑同样适用，会自动触发补全流程
• Session刷新：更新信息后调用signIn("credentials", { redirect: false })可以强制刷新session，让补全状态实时更新

这样一套流程下来，就能完美实现你想要的“首次登录补全信息再存入数据库”的需求啦！

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