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?