How to Collect First and Last Name During Signup?

I’m using the web_8base auth method, as outlined in the 8base react starter app.

In the 8base-hosted signup form, First Name and Last Name are collected from the user:

How do I actually add the First Name and Last Name to the 8base user table?

I can see that I need to add it to the UserSignUp Mutation:

/**
 * Sign up a new user mutation.
 */
export const USER_SIGN_UP_MUTATION = gql`
  mutation UserSignUp($user: UserCreateInput!, $authProfileId: ID) {
    userSignUpWithToken(user: $user, authProfileId: $authProfileId) {
      id
      email
      firstName /** <--- ADDED HERE! **/
      lastName /** <--- ADDED HERE! **/
    }
  }
`;

But I think it also needs to be added in the callback file, and I can’t figure out how to get that data there:

  async handleAuthentication({ idToken, email }) {
    
    /** Auth headers for communicating with the 8base API. **/
    client.setIdToken(idToken)

    /** Check if user exists in 8base. **/
    try {
      await client.request(gql.CURRENT_USER_QUERY)
    } catch {
      /**
       * If user doesn't exist, an error will be
       * thrown, which then the new user can be
       * created using the authResult values.
       */
      await client.request(gql.USER_SIGN_UP_MUTATION, {
        user: { email: email }, /** <---- NEEDS TO BE ADDED HERE! **/
        authProfileId: process.env.REACT_APP_EIGHTBASE_AUTH_PROFILE_ID,
      })
    }
  }

I’ve console logged the data that handleAuthentication receives, and the First Name and Last Name is not included there. Shouldn’t it be? What happens to that data after the user submits the signup form?

@Serena do you use our Auth0 or own Auth0? You can try decode idToken via https://www.npmjs.com/package/jwt-decode it should contain the first name and last name. If it doesn’t work for you - let me know.

1 Like

I’m collecting first and last name but that’s with a custom signup flow, not through the auth0 login.

@vladimir.osipov Thanks for the suggestion! I’m using 8base’s Auth0.

Just gave that a try and I’m not seeing it in there. Here’s what I see:

{
  at_hash: [...]
  aud: [...]
  email: "testing@gmail.com"
  email_verified: false
  exp: 1587006319
  iat: 1586970319
  iss: "https://secure.8base.com/"
  name: "testing@gmail.com"
  nickname: "testing"
  nonce: [...]
  picture: "https://s.gravatar.com/avatar/9ad574806427070b94735f216e9abdc1?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fte.png"
  sub: [...]
  updated_at: "2020-04-15T17:05:06.225Z"
}

@vladimir.osipov Any further feedback on this?

I have the same question. Getting the same result as @Serena