How to use/receive the user's name as "first name" and "last name" instead of the full name?

[alexandrepaiva-dev]

Your question
How to use/receive the user's name as "first name" and "last name" instead of the full name?

What are you trying to do
I would like to use the user's name as "first name" and "last name", I know I can create a custom model and insert these new fields into the database but I'm wondering how I could integrate this with the information coming from the providers (Facebook, for example)? Will I need to also create a custom provider, requiring those fields? If anyone can help, clarifying the best way to achieve this. Thanks.

• 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

[iandjx]

This is an example of retrieving the first_name, and last_name from Facebook

    Providers.Facebook({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
      profileUrl:
        "https://graph.facebook.com/me?fields=email,first_name,last_name",
      profile: (_profile) => {
        return {
          id: _profile.id,
          firstName: _profile.first_name,
          lastName: _profile.last_name,
          email: _profile.email,
        };
      },
    }),

We should overwrite the profileUrl with the fields we want returned. The profile url and the fields available will be different for every OAuth provider, so check their documentation to be sure.

Be sure to check the default settings of each provider. https://github.com/nextauthjs/next-auth/tree/main/src/providers

[taha-khoumani]

Can you pleas show me how to do it with Google ?

[SChoumiloff]

GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      profile: (_profile: GoogleProfile) => {
        return {
          id: _profile.sub,
          firstname: _profile.given_name,
          lastname: _profile.family_name,
          email: _profile.email,
          image: _profile.picture
        };
      },
    }),

use this syntax for google provider

[HTHoussam]

where can i find the profileUrl for other providers ??

[bperun123]

at the other provider files. eg https://github.com/nextauthjs/next-auth/blob/main/src/providers/linkedin.ts#L35

[JamesDelfini]

The option profile callback NextAuth Provider, if you add more custom user information to be saved on the database like @iandjx example, once it got inserted to the database. In the next login with the same OAuth Provider, how can you update its details if there are any changes since the creation of the user is handled here?

[iandjx]

Updating the user's details is beyond the scope of next-auth. There are several ways to do it but in principle you should access the users table in the db and update the user's details there.

[JamesDelfini]

I see thank you, just wondering if there are some callbacks that handle this.

[Elmosh]

Can anyone help with getting the user first and last name from facebook provider, for v5?

The profileUrl seems not available anymore in v5, however there's userinfo, I tried the following but it didn't work:

Facebook({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
      allowDangerousEmailAccountLinking: true,
      userinfo: {
       URL: "https://graph.facebook.com/me?fields=id,name,email,picture,first_name,last_name",
      },
      profile: (profile: FacebookProfile) => {
        return {
          id: profile.id,
          name: profile.name,
          firstName: profile.first_name,
          lastName: profile.last_name,
          email: profile.email,
          image: profile.picture.data.url,
        };
      },
}),

[themilkman1770]

Make URL lowercase