How can I support multiple user types using EmailProvider?

[longlostnick]

Question 💬

When the user first “registers” (i.e. verifies) their email using the EmailProvider, I’d like to add a couple additional fields to the form. I’d then like this to carry these through to the user creation, but having a lot of trouble doing this.

I plan to have two user types. You can think of them as:

1. consumer
2. service_provider

Initially I only want to allow UserType.service_provider users signing up, and then will present them with custom pages and functionality when they log in (different from normal users).

I’ve been able to get a hold of the request object and pass that into a custom PrismaAdapterWithRequest. This let’s me store the user type on the verification request… this is great, but how can I connect the dots to createUser?

// [nextAuth].ts

export default (req: NextApiRequest, res: NextApiResponse) => {
  return NextAuth(req, res, {
    adapter: PrismaAdapterWithRequest(prisma, req),
    providers: [
      EmailProvider({
        server: process.env.EMAIL_SERVER,
        from: process.env.EMAIL_FROM,
      }),
    ],
    callbacks: {
      async signIn({user, account, profile, email, credentials}) {
        if (email.verificationRequest) {
          // First time verification request (i.e. registration).
          // We currently only allow service providers to sign in.
          return req.body.userType === UserType.service_provider;
        } else {
          return true;
        }
      },
    },
  });
}

// adapter.ts

export const PrismaAdapterWithRequest = (p: PrismaClient, req: NextApiRequest): Adapter => {
  const adapter = PrismaAdapter(p);

  adapter.createUser = (data) => {
    console.log('createUser', data, req.body);
    return p.user.create({data});
  };

  adapter.createVerificationToken = (data) => {
    return p.verificationToken.create({
      data: {
        ...data,
        type: req.body.userType,
      }
    });
  };

  return adapter;
};

I was hoping for a built-in way to do this, but EmailProvider appears more limited than others. One idea I suppose is to tack this onto the verification/callback url, but that seems kinda dirty?

Seems like modifying some of the internals of packages/next-auth/src/core/routes/callback.ts could work. Happy to do it if you provide guidance!

How to reproduce ☕️

Provided the context above. LMK if there’s anything else.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ivan-kleshnin]

I'm also curious about this.

In some issue @balazsorban44 says to not use signIn to inject custom fields and prefer profile callback like this:

GithubProvider({
  ...
  profile(profile) {
    return {
      id: profile.id.toString(),
      ...
      role: "student",
    }
  },
}),

But EmailProvider does not have a callback like that. I see that questions like "how to add custom field" are the most popular:

• Ability to extend provider's profile with additional keys #287
• Custom fields with EmailProvider #4847
• Prisma Adapter: Extend profile/user #1194
• ... tens of threads

---

I get there's no single correct answer because it depends on the final flow: with registration / without registration, etc.

But IMO, the universal answer, in many cases, is to override createUser callback of the adapter!
Unfortunately, the docs imply that adapters are "pre-made" and you should not "reimplement" existing ones.

If you have a database/backend that we don't officially support, you can create your own adapter.
https://next-auth.js.org/adapters/overview

https://next-auth.js.org/tutorials/creating-a-database-adapter contains no descriptions of what callbacks are meant to do (hinting it's for advanced users only).

Docs don't mention how easy (and useful!) is to override adapter methods. Etc, etc.

---

Adapters should receive more priority in the docs. For example, this document https://next-auth.js.org/adapters/models helped me to understand how NextAuth works much better than all shallow tutorials here https://next-auth.js.org/tutorials I was initially very confused about the difference between user, profile, account and no tutorial even touched this topic. Unfortunately, this document is hidden well among other links.

[balazsorban44]

Unfortunately, the docs imply that adapters are "pre-made" and you should not "reimplement" existing ones.

I'm sorry if you got this impression, it's totally reasonable to modify the adapter to your needs! There are many examples of the official ones that should help you understand how adapters work: https://github.com/nextauthjs/next-auth/tree/main/packages

Indeed, the Models is the best resource to understand the relationships.

Tutorials are partially community-based so we don't have control over their content, but we are working on restructuring the documentation, and I'll note down to add some guides on extending adapters, thank you!