Getting auth0 username from React auth0Client

Get Help
3

Hi @CameronKnaus,

Sorry if this response is too late for you, but you may want to take a look at a new blog post that has come out since you posted - The Complete Guide to React User Authentication with Auth0
This makes use of our React SDK - Auth0 React SDK for Single Page Apps

As for getting the username, as it is not directly part of the OIDC standard claims you will need to add it to the ID token using custom namespaced claims in a rule.

For example, by adding this rule:

function (user, context, callback) {
  const namespace = 'https://myapp.example.com/';
  context.idToken[namespace + 'username'] = user.username;
  return callback(null, user, context);
}

I was able to retrieve the username from the user object by editing the react quickstart’s Profile.js:

export const ProfileComponent = () => {
  const { user } = useAuth0();

  return (
    <Container className="mb-5">
      <Row className="align-items-center profile-header mb-5 text-center text-md-left">
        <Col md={2}>
          <img
            src={user.picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </Col>
        <Col md>
          <h2>{user.name}</h2>
          <p className="lead text-muted">{user.email}</p>
          <p className="lead text-muted">Username:{user['https://myapp.example.com/username']}</p>
        </Col>
      </Row>
      <Row>
        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
      </Row>
    </Container>
  );
};
1 Like