getIdTokenClaims resolves successfully but returns undefined for ID Claims

[shahid7292]

Please do not report security vulnerabilities here. The Responsible Disclosure Program details the procedure for disclosing security issues.

Thank you in advance for helping us to improve this library! Please read through the template below and answer all relevant questions. Your additional work here is greatly appreciated and will help us respond as quickly as possible. For general support or usage questions, use the Auth0 Community or Auth0 Support. Finally, to avoid duplicates, please search existing Issues before submitting one here.

By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.

Describe the problem

Provide a clear and concise description of the issue

https://community.auth0.com/t/getidtokenclaims-resolves-successfully-but-returns-undefined-for-id-claims/48139/4

I am having exact same issue discussed in this blog

What was the expected behavior?

Tell us about the behavior you expected to see

If getIdTokenClaims resolves successfully then it should return id_token value

Environment

Please provide the following:

• **Version of auth0-react used : 1.10.2
• **Which browsers have you tested in? Chrome
• **Which framework are you using, if applicable (Angular, React, etc): React
• Other modules/plugins/libraries that might be involved:

[adamjmcgrath]

Hi @shahid7292 - thanks for raising this

Did you provide different scopes to loginWithRedirect than those you provided to <Auth0Provider>?

Calling loginWithRedirect with a custom scope should only be used to get additional tokens to the one's you already have, you then pass the different scopes to getAccessToken/getIdTokenClaims to tell the SDK which token you want. eg

<Auth0Provider>...</Auth0Provider>
// SDK's default scope is now "openid profile email"
loginWithRedirect({ scope: 'custom-scope' });
// the cache is now populated with 1 token for scope=custom-scope
getIdTokenClaims()
// this looks up the cache for default scope=openid profile email and finds nothing, since only scope=custom-scope is in the cache
getIdTokenClaims({ scope: 'custom-scope' })
// will return the ID token in the cache

Note there is work to simplify this behaviour in SPA JS v2 auth0/auth0-spa-js#967

[shahid7292]

@adamjmcgrath i have not passed scope anywhere. I have left it to default values

[shahid7292]

This code is working fro me in this way.
If we wait for access_token to be generated then we will get id_token.

useEffect(() => {
    const getToken = async () => {
      const {getAccessTokenSilently, getIdTokenClaims} = useAuth0();
      const access_token = await getAccessTokenSilently();
      const id_token = await getIdTokenClaims();
      console.log("access_token", access_token);
      console.log("id_token", id_token);
      CookieService().setAppToken({access: id_token.__raw});
    };
    getToken();
 }, [getAccessTokenSilently, getIdTokenClaims]);

[reify-tanner-stirrat]

I just ran into this behavior and it's unintuitive and frustrating. Is there a reason that getIdTokenClaims doesn't wait until there's a token available?

[frederikprijck]

As explained in the other issue, having no id token is a valid use case when the user hasnt authenticated.

[TurkishCat]

This code is working fro me in this way. If we wait for access_token to be generated then we will get id_token.

useEffect(() => {
    const getToken = async () => {
      const {getAccessTokenSilently, getIdTokenClaims} = useAuth0();
      const access_token = await getAccessTokenSilently();
      const id_token = await getIdTokenClaims();
      console.log("access_token", access_token);
      console.log("id_token", id_token);
      CookieService().setAppToken({access: id_token.__raw});
    };
    getToken();
 }, [getAccessTokenSilently, getIdTokenClaims]);

Thanks dude, why does it even behave this way.