How can i add a user name to a user that signed in via email provider?

[ttoni]

Your question
How can i add/update a user name to a user that signed in via email provider?
Is it also possible to generate a default name for users that signed in with email for the first time

What are you trying to do
I´m trying to force users to provide a username after the first signing.
So after clicking on the confirmation link in the first verification email they should be redirected to a form where the user has to provide a username before using any other pages.

Documentation feedback

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[Linux249]

I have exactly the same question.

After looking around I think the callbacks are useful to redirect the new user to a page where he can enter other custom stuff for his profile (like name) after the verificationRequest. But I also cannot found a way to add/update the information to the user/profile

My suggestion ist to extend the signIn('email', { email }) (client) with something like signIn('email', { email, name, phone } (phone would be implying updating the model) if the user should give this stuff on signup and a built a update() function to change these information.

If you don't want this functionality built-in please point it out in the docs (read nearly the whole source code already XD). With the callbacks, it seems potentially easy to block an incomplete user and its pretty easy to set up a form with next.js to catch later the necessary data. But currently, it is little misleading that the user data has the props image + name. If this will the way you go I maybe can help/contribute with an example.

[muhaimincs]

have you implement this?

[joepetrillo]

Any updates on this?

[richardkeller411]

Couldn't you extend the Models... https://next-auth.js.org/schemas/adapters Go to Custom Models section..

[williscool]

looking at doing this myself ...

afterview reviewing the code the simplest solution to me seems to be to take the credentials provider

https://next-auth.js.org/configuration/providers#sign-in-with-credentials

and hack it to take email .. so I hacked this together to make so I could set a username its suuuuper ugly and hacky but it works

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import Adapters from "next-auth/adapters";
import Models from "../models";
import { randomBytes } from "crypto";

// Simple universal (client/server) function to split host and path
// We use this rather than a library because we need to use the same logic both
// client and server side and we only need to parse out the host and path, while
// supporting a default value, so a simple split is sufficent.
// https://raw.githubusercontent.com/nextauthjs/next-auth/main/src/lib/parse-url.js
const parseUrl = (url) => {
  // Default values
  const defaultHost = "http://localhost:3000";
  const defaultPath = "/api/auth";

  if (!url) {
    url = `${defaultHost}${defaultPath}`;
  }

  // Default to HTTPS if no protocol explictly specified
  const protocol = url.match(/^http?:\/\//) ? "http" : "https";

  // Normalize URLs by stripping protocol and no trailing slash
  url = url.replace(/^https?:\/\//, "").replace(/\/$/, "");

  // Simple split based on first /
  const [_host, ..._path] = url.split("/");
  const baseUrl = _host ? `${protocol}://${_host}` : defaultHost;
  const basePath = _path.length > 0 ? `/${_path.join("/")}` : defaultPath;

  debugger;
  return {
    baseUrl,
    basePath,
  };
};

const { basePath, baseUrl } = parseUrl(
  process.env.NEXTAUTH_URL || process.env.VERCEL_URL
);

const adapter = Adapters.TypeORM.Adapter(
  // The first argument should be a database connection string or TypeORM config object
  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
  // https://next-auth.js.org/configuration/database
  //
  // Notes:
  // * You must to install an appropriate node_module for your database
  // * The Email provider requires a database (OAuth providers do not)
  // The first argument should be a database connection string or TypeORM config object
  process.env.DATABASE_URL,
  // The second argument can be used to pass custom models and schemas
  {
    models: {
      User: Models.User,
    },
  }
);

// credentials will have name and email field and so === profile
const provider = Providers.Email({
  server: process.env.EMAIL_SERVER,
  from: process.env.EMAIL_FROM,
});

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
const myOptions = {
  adapter,
  baseUrl,
  // https://next-auth.js.org/configuration/providers
  providers: [provider],
  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
  // https://next-auth.js.org/configuration/database
  //
  // Notes:
  // * You must to install an appropriate node_module for your database
  // * The Email provider requires a database (OAuth providers do not)
  // The secret should be set to a reasonably long random string.
  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
  // a seperate secret is defined explicitly for encrypting the JWT.
  secret: process.env.SECRET,

  session: {
    // Use JSON Web Tokens for session instead of database sessions.
    // This option can be used with or without a database for users/accounts.
    // Note: `jwt` is automatically set to `true` if no database is specified.
    jwt: true,

    // Seconds - How long until an idle session expires and is no longer valid.
    // maxAge: 30 * 24 * 60 * 60, // 30 days

    // Seconds - Throttle how frequently to write to database to extend a session.
    // Use it to limit write operations. Set to 0 to always update the database.
    // Note: This option is ignored if using JSON Web Tokens
    // updateAge: 24 * 60 * 60, // 24 hours
  },

  // JSON Web tokens are only used for sessions if the `jwt: true` session
  // option is set - or by default if no database is specified.
  // https://next-auth.js.org/configuration/options#jwt
  jwt: {
    // A secret to use for key generation (you should set this explicitly)
    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
    // Set to true to use encryption (default: false)
    // encryption: true,
    // You can define your own encode/decode functions for signing and encryption
    // if you want to override the default behaviour.
    // encode: async ({ secret, token, maxAge }) => {},
    // decode: async ({ secret, token, maxAge }) => {},
  },

  // You can define custom pages to override the built-in pages.
  // The routes shown here are the default URLs that will be used when a custom
  // pages is not specified for that route.
  // https://next-auth.js.org/configuration/pages
  pages: {
    signIn: '/signin',  // Displays signin buttons
    // signOut: '/api/auth/signout', // Displays form with sign out button
    // error: '/api/auth/error', // Error code passed in query string as ?error=
    // verifyRequest: '/api/auth/verify-request', // Used for check email page
    // newUser: null // If set, new users will be directed here on first sign in
  },

  // Callbacks are asynchronous functions you can use to control what happens
  // when an action is performed.
  // https://next-auth.js.org/configuration/callbacks
  callbacks: {
    signIn: async (user, account, profile) => {
      console.log(user, account, profile);
      debugger;
      return Promise.resolve(true);
    },
    // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
    // session: async (session, user) => { return Promise.resolve(session) },
    // jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
  },

  // Events are useful for logging
  // https://next-auth.js.org/configuration/events
  events: {},

  // Enable debug messages in the console if you are having problems
  debug: true,
};

const options = {
  providers: [provider,
    Providers.Credentials({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: "Credentials",
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      credentials: {
        name: { label: "username", type: "text", placeholder: "pg" }, // I can already predict mixing name / and username is gonna get hairy... just comment with the alt every tiem
        email: { label: "email", type: "email" },
      },
      authorize: async (credentials) => {
        // Add logic here to look up the user from the credentials supplied
        // const user = { id: 1, name: 'J Smith', email: 'jsmith@example.com' }

        const {
          getUserByEmail,
          createUser,
          createVerificationRequest,
        } = await adapter.getAdapter(myOptions);

        const user = await getUserByEmail(credentials.email);

        if (user) {
          // Any object returned will be saved in `user` property of the JWT
          return Promise.resolve(user);
        } else {
          // If you return null or false then the credentials will be rejected
          if (!credentials.name || !credentials.email) {
            return Promise.reject(new Error("please enter username and email")); // Redirect to error page
          }

          await createUser(credentials);

          const identifier = credentials.email;
          const token = randomBytes(32).toString("hex");
          const secret = provider.secret || myOptions.secret;

          const url = `${baseUrl}${basePath}/callback/${encodeURIComponent(
            provider.id
          )}?email=${encodeURIComponent(
            credentials.email
          )}&token=${encodeURIComponent(token)}`;

          debugger
          await createVerificationRequest(
            identifier,
            url,
            token,
            secret,
            provider
          );

          // then we fire off email and redirect user to the check your email page
          return Promise.reject(
            "/checkYaEmail"
          );
          // You can also Reject this callback with an Error or with a URL:
          // return Promise.reject(new Error('error message')) // Redirect to error page
          // return Promise.reject('/path/to/redirect')        // Redirect to a URL
        }
      },
    }),
  ],
};

export default (req, res) => {
  return NextAuth(req, res, {...myOptions, ...options } );
};

ps I really wish more of the things I had to copy were exportable and the code was more decoupled (would love suggestions on how it could be cleaned up) but this got my project unblocked so ¯_(ツ)_/¯

[MrNghia123]

I have the same problem. I am using next-auth for a role-based authorization system and the verification request need to be created by the admin for the other users. Each user will then have roles attached to their account.
To implement that the closest thing we have is the signIn('email',{email}) function in which I would need to be able to extend the second parameter to include a list of roles for the user, something like signIn('email',{email, roles}). Then the roles need to be persisted into the verification_requests table, maybe by extending the model and a custom createVerificationRequest method.
However looking at the signin route (src/server/routes/signin.js in the source code, only the email is extracted from the request body for the emailSignin function.

I think it make more sense for not just the email but all the submission data (phone, user name, roles, etc,) to be passed into the emailSignin and later on, to the createVerificationRequest so it can be persisted and later on taken out to create the user.

@iaincollins if you think it make sense I can make a pull request.

} else if (type === 'email' && req.method === 'POST') { if (!adapter) { logger.error('EMAIL_REQUIRES_ADAPTER_ERROR') return redirect(${baseUrl}${basePath}/error?error=Configuration`)
}
const { getUserByEmail } = await adapter.getAdapter(options)

// Note: Technically the part of the email address local mailbox element
// (everything before the @ symbol) should be treated as 'case sensitive'
// according to RFC 2821, but in practice this causes more problems than
// it solves. We treat email addresses as all lower case. If anyone
// complains about this we can make strict RFC 2821 compliance an option.
const email = req.body.email ? req.body.email.toLowerCase() : null

// If is an existing user return a user object (otherwise use placeholder)
const profile = await getUserByEmail(email) || { email }
const account = { id: provider.id, type: 'email', providerAccountId: email }

// Check if user is allowed to sign in
try {
  const signinCallbackResponse = await callbacks.signIn(profile, account, { email, verificationRequest: true })
  if (signinCallbackResponse === false) {
    return redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
  }
} catch (error) {
  if (error instanceof Error) {
    return redirect(`${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`)
  } else {
    return redirect(error)
  }
}

try {
  await emailSignin(email, provider, options)
} catch (error) {
  logger.error('SIGNIN_EMAIL_ERROR', error)
  return redirect(`${baseUrl}${basePath}/error?error=EmailSignin`)
}

return redirect(`${baseUrl}${basePath}/verify-request?provider=${encodeURIComponent(
  provider.id
)}&type=${encodeURIComponent(provider.type)}`)

} else {
return redirect(${baseUrl}${basePath}/signin)
}
`

[joepetrillo]

Did you ever figure this out?

[DeBraid]

But I also cannot found a way to add/update the information to the user/profile

I am trying to decorate session.user with additional properties, like role.

Docs show that user object resolved from authorize fn will be saved in user, but my experience this NOT true for arbitrary properties added to user on the fly.

authorize: async (credentials) => {
  // Add logic here to look up the user from the credentials supplied
  let user = { id: 1, name: 'J Smith', email: '[email protected]' }
  user.foo = 'bar'; // ADD property foo to user
  if (user) {
    // Any object returned will be saved in `user` property of the JWT
    return Promise.resolve(user);
  }
  ...

In the above example, my session.user will NOT contain a reference to foo, but only 3 properties (name, email, image).

{ name: '[email protected]', email: '[email protected]', image: null }

Can I not extend the user object?

EDIT: this example from Arunoda shows how to override the user object, but this requires another API call. In the authorize function, I have already made an API to get user data from customer auth provider server. Seems silly to make same request twice?

callbacks.session = async function session(session, token) {
  session.accessToken = token.accessToken
  session.user = getUserFromTheAPIServer(session.accessToken)

  return session
}

[ClementRocket]

That's why I came here, thanks !

[asifsaho]

Unfortunately, this way doesn't work in the 4.xx version!

[benderillo]

I wonder if there was any action taken on next-auth to provide a way for this to happen?
I have a similar need. Using "passwordless" flow, i.e. an email provider, I need to check if the user signing in for the first time, then I want to redirect them to registration page. This step seems doable if I check the database in signIn callback.
However, I am not sure how to go about the registration using next-auth. How do I pass the extra data like user name and anything else really along with the email to next-auth when they sign up?
If there is recommended way, is it documented anywhere? @balazsorban44

[j-lee8]

Also need this info. There are no real world examples of common use cases like this.

[balazsorban44]

I believe we track this at #1358 and #1633

[j-lee8]

I believe we track this at #1358 and #1633

Awesome! I'll check these out. I have just read about augmenting the session to add new fields which sounds like what I'm looking for. I don't need to extend the user model as I'll be adding these additional fields into a different table.

[NoHara42]

Assuming one already separate pages for Login and SignUp, and one has SignUp form inputs like name, wouldn't it make sense to provide name as a param to the SignIn("email", {email, name, ...}) function call importable from next-auth?

That way the additional signup metadata step after the email has been verified could be reduced to one step.

Couldn't that be possible?
I've been digging for a solution in the tracked issues you suggested, but haven't been able to find anything - has there been any development on this solution? @balazsorban44

Thanks!

[abetoots]

Any updates or guides on thiss? @balazsorban44 Seems like augmenting user data on signIn/signUp is a highly common use case. Maybe a section on adding extra user metadata would be helpful.

[TomYeoman]

I ended up rolling my own, as I use multiple providers (github, and e-mail) neither of which support usernames.

1. Add userName String? @unique to User model

2. Create a read/update User method (I use TRPC in my example), and render a screen to collect username if it doesn't already exist, example code below

App

    <SessionProvider session={session}>
      <Wrapper {...pageProps}>
        <Component {...pageProps} />
      </Wrapper >
    </SessionProvider>

Wrapper

import { api } from "~/utils/api";
import { Button } from "./Button";
import { Header } from "./Header";

import {
  uniqueNamesGenerator,
  adjectives,
  colors,
  animals,
} from "unique-names-generator";
import { useState } from "react";
import { useSession } from "next-auth/react";

export function Wrapper({ children }: any) {
  const userQuery = api.primaryRouter.getUser.useQuery();
  const userMutation = api.primaryRouter.updateUsername.useMutation();
  const { data: sessionData } = useSession();

  const [username, setUsername] = useState("");

  // Only try and get userdata & then potentially set username if we're actually logged in
  if (sessionData) {
    if (userQuery.status !== "success") {
      return <p>Loading...</p>;
    }

    if (userQuery.data?.userName === null) {
      return (
        <div className="flex flex-col items-center justify-center px-4 pt-24 sm:px-6 lg:px-8 lg:pt-14">
          <div className="pb-5 text-3xl">Welcome!</div>
          <h1 className="pb-5">
            Please add a username to complete account creation
          </h1>

          <div className="mt-2 flex rounded-md shadow-sm">
            <div className="relative flex flex-grow items-stretch focus-within:z-10">
              <input
                type="username"
                name="username"
                id="username"
                className="block w-72 border-0 p-3 py-1.5 text-center text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
          </div>

          <div className="pt-3">
            <Button
              variant="secondary"
              onClick={() => {
                const randomName: string = uniqueNamesGenerator({
                  dictionaries: [adjectives, colors, animals],
                }); // big_red_donkey

                setUsername(randomName);
              }}
            >
              Generate Name
            </Button>
          </div>

          <div className="p-5">
            <Button
              onClick={() => {
                userMutation.mutate(
                  {
                    userName: username,
                  },
                  {
                    onSuccess: () => {
                      // Invalidate userQuery, we'll now render the children instead of this block
                      userQuery.refetch().catch((err) => {
                        console.error(err);
                      });
                    },
                  }
                );
              }}
            >
              Submit
            </Button>
          </div>
        </div>
      );
    }
  }

  return (
    <>
      <Header userName={userQuery.data?.userName} />
      <main className="px-4 pt-24 sm:px-6 lg:px-8 lg:pt-14">
        {/* <Prose as="article">{children}</Prose> */}
        {children}
      </main>
    </>
  );
}

[jasondainter]

Do I understand correctly that its still not possible to easily collect and store a "name" (eg Richard Hendricks) via the Email Provider (aka magic link) route once the user has verified (or any other way).

I really need this functionality and hitting a bit of a brick wall on that. Eg so a user can type

Name: Richard Hendricks
Email: [email protected]

Then ideally on verification of the magic link (eg when they actually get signed in) the name gets stored?

Any help much appreciated, can't figure out if this is a nextauth limitation or if I'm just doing it wrong :-)

[fkozlicki]

right 👍

[jjalonso]

same here, Im using email provider but i realised by default nothing is stored in DB, (as doc pretty much say as well) but after verification on some callback i want to set a default data in the user that need to be persisted in this case avatar: 'avatar-1', and then using pages: welcome prop i redirect the user to the welcome to him to be able to change his avatar if he wish but as he could close at any time, thats why i have previoyusly saved the default avatar-1,

The question is, is not clear whats the callback i need to use to intercept first time user and also if just returning a new user object in the promise if it will work persistenly on DB?

documentation is really horrendous on this

[iShubhamPrakash]

Here is how I tackled a similar problem.

In my case, the user modal had following required fields: id, email and username.

When using oAuth Providers (like Google, Github etc) I was able to get username value or create a fallback using the Provider's profile method:

  providers: [
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM
    }),
    GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      scope: 'read:user',
      profile(profile) {
        return {
          id: profile.id.toString(),
          email: profile.email,
          name: profile.name || profile.login || `${profile.email.split('@')[0]}`,
          username: profile.login || `${profile.email.split('@')[0]}_${Math.random().toString(36).substring(7)}`,
          image:
            profile.avatar_url ||
            `https://www.gravatar.com/avatar/${Math.random().toString(36).substring(7)}?d=identicon&r=PG`
        };
      }
    })
  ]

But in case of EmailProvider there was no username being passed to the database adapter so it was throwing errors when a new user was trying to sign in using email.

To fix this error, I had to override the database adapter I was using. I was using Prisma so I customised the PrismaAdapter as follow:

import { PrismaAdapter } from '@next-auth/prisma-adapter';

/** @return { import("next-auth/adapters").Adapter } */
export default function CustomPrismaAdapterForNextAuth(prisma) {
  const adapter = PrismaAdapter(prisma);

  adapter.createUser = async data => {
    const userExist = await prisma.user.findUnique({
      where: {
        email: data.email
      }
    });

    if (userExist) {
      return userExist;
    }

    return prisma.user.create({
      data: {
        email: data.email,
        name: data.name || data.email.split('@')[0],
        username: data.username || `${data.email.split('@')[0]}_${Math.random().toString(36).substring(7)}`,
        image:
          data.image || `https://www.gravatar.com/avatar/${Math.random().toString(36).substring(7)}?d=identicon&r=PG`,
        emailVerified: data.emailVerified
      }
    });
  };

  return adapter;
}

Then I used the above adapter instead of the PrismaAdapter:

export const authOptions = {
  adapter: CustomPrismaAdapterForNextAuth(prisma),
  providers: [
....

You can see in the above code snippet that I just had to override the adapter's createUser method which is called to create an entry in the User table when a new user signs in.

Basically, here I gave the user a default username in case it was not available (you can have your own logic to create a default username here).

I also created a profile page and an API endpoint allowing user to update any of their information (Name, username or image).

Hope this can help/guide you to solve a similar problem you are having.

[jasondainter]

Thanks @iShubhamPrakash this is helpful, I'm going through your solution however I'm struggling to see how this accomodates the verification process, eg when a user clicks the "magic link" email sent by the email provider.

In my case I use FaunaDB and its adapter.

I see when a user is created in Fauna in the "verifications_tokens" collection something like:

{
"ref": Ref(Collection("verification_tokens"), "371968227507437776"),
"ts": 1690995395110000,
"data": {
"identifier": "[email protected]",
"token": "fdee7a631329e0a8fa6d17e47bd61b6a9ec1528e2547b9c5f5d047ba7f38d39x",
"expires": Time("2023-08-03T16:56:34.846Z")
}
}

Then once the magic link is created, only then the user is created in the "users" collection (and the verification_tokens document is auto deleted).

I'm struggling to see high level how your solution handles, would you be so kind as to elaborate on that?

My theory is that I would need to store the users full name (eg the field I am trying to save on signin using the email provider) into the verifications_tokens table as seen above, then somehow adapt this so that it gets passed over to users once the email gets clicked (and user is verified). Am I misunderstanding anything?

[phantomato]

Hey @jasondainter , you've probably solved the issue already, but the way I went is by generating a custom verification token based on JWT.

In my case I have a form which has an email and a username, therefore I needed a way to pass the username payload in the same request as the email sign-in.

Here's my approach:
When the user clicks 'sign in with magic link' I pass his username as an additional auth parameter to the next auth's signIn function. On the server side, I've manually implemented generateVerificationToken which extracts the username from the raw NextRequest URL and generates a JWT token instead.

When the user clicks the email link, next auth's signIn callback is called and inside I retrieve the JWT token from the URL, decode it and that's how I get access to the username.

Yes, this is a bit hacky, but AuthJs' generateVerificationToken function doesn't provide any useful context at the moment, so the key ingredient here is to have access to the raw NextRequest (as mention in the Advanced Initialization section).
https://next-auth.js.org/configuration/initialization

[LixvYang]

Awesome!🎉

[paaax]

I encountered the same issue, and here's how I resolved it:

• Redirect the user to a page where they can enter a username if no username is found in the session object.
• Store the entered username in the database.
• Add a check to see whether session.user.name exists in the session callback. If it does not, pull the username from the database.

layout.ts

const LayoutServer = async ({ children }: { children: ReactNode }) => {
    const session = await auth();
    if (!session?.user) redirect("/signin");
    if (!session?.user?.name) redirect("/exampleUsernameRoute");
    
    return ( ... );

pages.tsx

const handleSubmit = async (e: any) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    
    const formData = new FormData(e.target);
    const username = formData.get("name")?.toString() ?? "";
    
    try {
        const response = await addUsernameToDatabase({ email: session?.user.email, username });
        if (!response.success) {
            throw new Error("Error: " + response.error);
        }
    } catch (error: any) {
        console.error("Failed to add username to database", error);
        setError(error.message);
    } finally {
        setLoading(false);
    }
    };

actions/db.tsx

export const addUsernameToDatabase = async ({
    email,
    username,
}: {
    email: string;
    username: string;
}) => {
    try {
        await prisma.user.update({
            where: { email },
            data: { name: username },
        });
    } catch (error: any) {
        console.error("Failed to update user ", error);
        return { success: false, error: error.message };
    }
    redirect("/dashboard");
};

auth.ts

async session({ session, token }) {
    session.accessToken = token.accessToken;
    session.error = token.error;
    
    if (!session.user.name) {
        try {
            const dbUser = await getUserByEmail(session.user.email);
            if (!dbUser) {
                console.error(`User not found in DB for email: ${session.user.email}`);
                return session;
            }
            session.user.name = dbUser.name;
        } catch (error) {
            console.error("Error fetching user from DB:", error);
            return session;
        }
    }
    
    return session;
    },

[shawnmclean]

So theres no way to accept a bunch of information from the user at signup time and override the database calls to create this user?

[Bima42]

I had the same problem with NextAuth v5 and the EmailProvider. I just wanted to add a field to my user when I first connected with the magic link.
In my case, I use MongoDb and Mongoose, but I think the solution applies to other databases and adapters.
Here's what I did to get by with crashes and typescript errors:

Extends User model

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

interface UserCustomFields {
    balance: number;
}

declare module 'next-auth' {
    interface Session {
        user: DefaultSession['user'] & UserCustomFields;
    }

    interface User extends DefaultUser, UserCustomFields {}
}

Create a CustomAdapter for NextAuth

import { MongoDBAdapter } from '@auth/mongodb-adapter';
import type { Adapter } from 'next-auth/adapters';

export function CustomAdapter(client: any, options = {}): Adapter {
    const baseAdapter = MongoDBAdapter(client, options) as Adapter;

    return {
        ...baseAdapter,
        createUser: async (data) => {
            // Add additional fields to the user data
            const initialUserData = getInitializeUserData();
            const customUserData = {
                ...data,
                balance: 0
            };

            const user = await baseAdapter.createUser?.(customUserData);
            if (!user) {
                throw new Error('Failed to create user');
            }

            return user;
        }
    };
}

NextAuth config for NextAuth v5

Be careful here, some things may not be compatible with earlier versions

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import EmailProvider from 'next-auth/providers/email';
import client from '@/lib/mongodb';
import { env } from '@/env';
import config from '@/config';
import { CustomAdapter } from '@/lib/customAdapter';

const authProviders = [
    EmailProvider({
        server: {
            host: env.EMAIL_SERVER_HOST,
            port: +env.EMAIL_SERVER_PORT,
            auth: {
                user: env.EMAIL_SERVER_USER,
                pass: env.EMAIL_SERVER_PASSWORD
            }
        },
        from: env.EMAIL_FROM
    }),
    GoogleProvider({
        clientId: env.GOOGLE_CLIENT_ID,
        clientSecret: env.GOOGLE_CLIENT_SECRET,
        profile(profile) {
            return {
                id: profile.sub,
                name: profile.name,
                email: profile.email,
                image: profile.picture,
                balance: 0
            };
        }
    }),
    GitHubProvider({
        clientId: env.GITHUB_CLIENT_ID,
        clientSecret: env.GITHUB_CLIENT_SECRET,
        profile(profile) {
            return {
                id: profile.id.toString(),
                name: profile.name || profile.login,
                email: profile.email,
                image: profile.avatar_url,
                balance: 0
            };
        }
    })
];

const authCallbacks = {
    async jwt({ token, user, account }: any) {
        if (user) {
            token.balance = user.balance;
        }
        return token;
    },

    async session({ session, token }: any) {
        if (token && session.user) {
            session.user.balance = token.balance;
        }
        return session;
    }
};

export const { auth, handlers, signIn, signOut } = NextAuth({
    adapter: CustomAdapter(client),
    providers: authProviders,
    callbacks: authCallbacks,
    session: {
        strategy: 'jwt'
    }
});

Hope this help !

[cereallarceny]

This is no longer possible in the latest version of next-auth as the email provider only takes an email when performing login. https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/lib/actions/callback/handle-login.ts#L28

[imyuanli]

这是自动回复的邮件。您好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。