Add logic to pass newUserInfo when creating a new user

[stoickeyboard]

☕️ Reasoning

What changes are being made? What feature/bug is being fixed here?

Added logic that allows the passing of additional info when creating a new user. I wanted the ability to give prospective users a verification code that they could use to allow them to create accounts because I don't want anyone to be able to create an account at the moment. I can then check this verification code in the signup callback before the user is created. That being said, I believe there are more use cases for this such as, allowing the user to save things like their display name when creating an account. I think it's pretty common to ask for a little bit more info when signing up other than just wanting a user's email or Gmail/apple/etc account.

Note: This is my very first pull request so if there is anything I'm missing, please lmk.

🧢 Checklist

• [x] Documentation
• [x] Tests (passed pnpm test)
• [x] Ready to be merged

🎫 Affected issues

Please scout and link issues that might be solved by this PR.

Fixes: https://github.com/nextauthjs/next-auth/issues/1069

📌 Resources

• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
next-auth	✅ Ready (Inspect)	Visit Preview	Jun 21, 2022 at 10:25PM (UTC)

[stoickeyboard]

Hi, @balazsorban44 and @ndom91, I know you two are pretty busy but I was wondering if I can get an update about this proposal? Thanks for all your work!

[balazsorban44]

Thanks, our top priority is elsewhere right now, I'll revisit other PRs like this when #4299 and #4769 are merged and tested. :slightly_smiling_face:

I will most likely want to iterate on this PR later.

[stoickeyboard]

Thanks, our top priority is elsewhere right now, I'll revisit other PRs like this when #4299 and #4769 are merged and tested. 🙂

I will most likely want to iterate on this PR later.

Understood. Thanks for the quick response and thanks again for all the hard work you've done! It's truly appreciated 🙌🏽

[sakibulalam]

are there any plans to merge this? is there a workaround currently to enable this?

[michal-kapala]

are there any plans to merge this? is there a workaround currently to enable this?

For user creation you probably have to make a separate request as there is no space in the core types to add your custom data into as of now. For getting custom user data from a database to a client you could use session() callback to pass any extension properties to your User model and add them to the returned session object for the data to make it to the client. This method currently has two drawbacks for Typescript:

• it's type-unsafe because it forces the use of [...nextauth].js rather than typed config
• useSession() and unstable_getServerSession() return a session object with nullable user property of unnamed type which is not extendable when using typed nextauth config:

(property) DefaultSession.user?: {
    name?: string | null | undefined;
    email?: string | null | undefined;
    image?: string | null | undefined;
} | undefined

Accessing a custom property of session.user returned by the session hooks results in a type error:

`Property X does not exist on type '{ name?: string | null | undefined; email?: string | null | undefined; image?: string | null | undefined; }'.

To get around that right now you can define an extension for User or AdapterUser type and cast the user returned by a hook to the extension.

Example

Say you'd want to add a role property and return it to the client:

// CustomUser.ts
import { User } from "next-auth"

export interface CustomUser extends User {
   role: string
}

To pass the value down to the client, you define session callback:

// [...nextauth].js
import NextAuth from "next-auth";

export const authOptions = {
  adapter: yourAdapter,
  providers: yourProviders,
  callbacks: {
    // invoked on a session hook call
    async session({ session, token, user }) {
      // With JS we can add a 'role' prop on session.user (currently impossible with TS)
      session.user.role = user.role;
      return session;
    }
  },
}
export default NextAuth(authOptions);

Lastly, to access role in a component we cast the user object returned by a session hook to our custom type to avoid a type error:

// Component.tsx
import { useSession } from "next-auth/react"
import type { CustomUser } from './CustomUser'

export default function Component() {
  const { data: session} = useSession();

  // Cast user data to include role injected in session() callback
  var userCast = session?.user as CustomUser;

  // Errors out
  console.log(session?.user.role)

  // Ok
  return (
    <div>{userCast.role}</div>
  )
}

This PR would allow you to define your extension object using AdapterUser, which is a possible arg type inside of session callback, however I think then DefaultSession.?user needs to become AdapterUser too so you can use [...nextauth].ts and pass your custom user with useSession/getSession/unstable_getServerSession without that much worry about the core types.

For reference here's a dashboard page that utilizes the above trick. Looking forward to see this merged.

[ThangHuuVu]

Hi there @stoickeyboard I think we're ready to review this PR again - could you please help resolve the conflicts and move the changes under packages/core instead? 🙌 In packages/next-auth we will only be accepting critical fix moving on.

[AlexErrant]

I build on this PR here https://github.com/nextauthjs/next-auth/pull/7234

[ThangHuuVu]

Let's close this and move the discussion to https://github.com/nextauthjs/next-auth/pull/7234 🙏