How do I get the logged in user's JWT?

[MIPS]

I have a simple question, how do I get the logged in user’s JWT?
I am using React and I have implemented login and everything, but I need the user’s JWT for testing purposes.

Please do not link the documentation I have already read it, it did not help at all. I don’t understand why am I required to call an API to get something that is on the user’s side?

Can anyone help me with this it is really important.

Thank you.

[dan.woda]

Hi @MIPS,

Welcome to the Community.

Do you want the ID token or the access token?

[MIPS]

I need the ID token and thank you

[dan.woda]

Assuming you are using the auth0 react SDK:

const claims = await getIdTokenClaims();

https://auth0.github.io/auth0-react/interfaces/auth0contextinterface.html#getidtokenclaims

[MIPS]

Thank you for the answer, I also have a question. When I get the access token why can’t I get it from the client, why do I have to get it from the API which on server Auth0 side, or what I am saying is wrong?

[dan.woda]

@MIPS,

You are correct. When you get an access token with getAccessTokenSilently you are making a request to auth0’s servers to issue an access token.

To understand why, we need to understand more about JWTs. These tokens are signed, which means they include a signature that validates their payload. This is a cryptographic technique that uses a set of public and private keys (asymmetric), or a set of private keys (symmetric) to create a signature that could only be created with a private key. This is why I can’t fabricate a token in a text editor and pretend to be you.

With Auth0, you are likely to be using the default asymmetric signing method, which means the signature can then be validated by an external API or client using the freely available public key.

That brings us to your question, why tokens can’t be issued by your React app. As a client-side application, your React app is unable to store a private key securely. This is because the entire app is sent out to a user’s browser every time someone visits your website. Sending a private key with that app would mean any user could inspect the app and grab the key.

Because of this, you use an authentication and authorization server (Auth0) that authenticates users and apps, issues tokens with up-to-date info, and provides user’s profiles on request. This server also keeps a record of what user’s have authorized which applications, what their roles and permissions are, which applications have access to what APIs, and so forth.

[MIPS]

Thank you for the answer I understand now, I have just one and last question. What I am supposed to do is when the user logs out the React App to delete the JWT from the client side.
My question is do I have to implement additional methods to handle local storage deletion or the token is not even stored in the local storage and the logout function from Auth0 handles everything and I don’t have to worry about it, as stated in the documentation that the SSO cookie is deleted?

[dan.woda]

@MIPS,

You can add logout to your react app by using the logout method. This will redirect the user to Auth0’s logout endpoint, which will delete the cookie (like you have mentioned). This means that the user can no longer do a silent login, or getTokenSilently. Any tokens that have already been issued are valid until they expire, but are stored in memory and as such will be deleted when you use the logout method. The SDK will handle the tokens, so unless you stored something outside of the SDK the logout method will suffice.