How to generate access token and idToken both in JWT format

Tools:
javascript SDK auth0-js version 9.14.0

This is my application flow at high level.
Client (ReactJS) <-> Server (NodeJS Backend)

I linked the client to the Universal Login (Auth0) to facilitate the authentication process which works seamlessly and I’m able to sign up and sign in, however I’m not able to implement the authorization process that well.

This is a snippet from my frontend project:

this.auth0 = new auth0.WebAuth({
  domain: auth.domain,
  clientID: auth.clientID,
  audience: auth.audience,
  redirectUri: auth.redirect,
  responseType: "token id_token",
  scope: "openid email profile"
})

This indeed returns an access token and an id token, however the access token is just a sample opaque string which is not a JWT and which is not useable by the BE. Even supplying the aud didn’t change the format of the access token.

Ideally, I’d like to keep the idToken only in the client as it contains sensitive information and transmit the access token from the client to the backend through an Authorization header. There I’d like to validate the token and extract the user id from the sub property.

I’d assume also that the permissions that I set for that user should be also part of claims in the access_token after login. I find a bit confusing the auth0 documentation and I couldn’t understand how I can achieve that. Could you please give me a hint?

2 Likes

You must pass an audience claim that is a registered API identifier in your Auth0 dashboard. Go to the dashboard, register and API, and use that identifier as the audience. You should have a JWT access token returned after that.

The first handshake gives you an ID token and I believe it’s an opaque access token that you can use to access data from the profile API (not 100% sure about this). If you want an JWT for an specific API, you will have to do what Dan mentioned, and also make another call to Auth0 but passing an additional parameter called “audience”, which matches the audience you registered and associated to your API in the dashboard.

2 Likes

@cibrax That’s correct, thanks for the addition :handshake: