I am trying to build a Gatsby app. I am wrapping my root component in the following was:
<Auth0Provider
      domain={process.env.GATSBY_AUTH0_DOMAIN}
      clientId={process.env.GATSBY_AUTH0_CLIENTID}
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: audience,
        scope: "read:current_user update:current_user_metadata"
      }}
      onRedirectCallback={onRedirectCallback}
      useRefreshTokens={true}
      cacheLocation="localstorage"
    >
      {element}
    </Auth0Provider>
Later on I access the username like this:
const {
    isAuthenticated,
    logout,
    user,
  } = useAuth0();
return isAuthenticated && (
    <>
      <p className='text-xl' >Hi {user.email}</p>
</>
 );
Whenever I am not specifying a scope, this works perfectly fine. When I am specifying a scope (which I need to access the management api to change the user metadata), the only information I am getting from the user object is the user.sub. I searched up and down the web and cannot find a solution to this.
Is anyone facing a similar issue and can tell me what I am missing here?