Auth0-spa-js: How does one actually get the JWT?

[mcblum]

I have created the SPA and I've created an API. When I use the example and call the handleRedirect function, I see the call go out to the /token endpoint which does return an id_token. That said, I don't see any way to actually get that token and save it to local storage.

I copied it and used it directly in Postman to call an API, and I'm getting Expected {different audience} and auth does not work. What am I missing here?

Also how does the API know that the SPA's client I created is authorized to access it? Do I need a service to use the secret key to generate a token or something?

[luisrudge]

Currently, we don't expose the raw id_token. You should use the token returned via getTokenSilently to call your API. Please follow one of our quick starts to understand it better. Here's the vanillajs one: https://auth0.com/docs/quickstart/spa/vanillajs/02-calling-an-api

[mcblum]

@luisrudge cool - I did that and every time I get a JWT is malformed error. It appears to be much too short to be a JWT with claims based on what I've seen in the past.

[luisrudge]

can you decode it here http://jwt.io?

[mcblum]

Nope, it's invalid. An example of what I'm getting when I do getTokenSilently is v9xKjqcpmgPg4esf9PMDX9T5MEjhAIxs

[mcblum]

it really doesn't appear to be a JWT

[luisrudge]

Yup, this is not a JWT. This is a regular access token, which means it wasn't issued for a custom audience. Not sure if you're using react or angular, but take a look at our quick starts. It will guide you through creating and consuming an API.

• angular: https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api
• react: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api

[mcblum]

Wow - yep, I apparently had a dumb few hours. Adding the audience worked. Apparently even though I read that page 100 times I never noticed the difference. Thank you!!!

[luisrudge]

@mcblum haha. no problem! they look very much the same, except for the audience param 😬

[rally25rs]

Ran into the same issue, because we were going by the Getting Started guide in this repo, which does not pass an audience

https://github.com/auth0/auth0-spa-js#creating-the-client

[tomchambers2]

this is really confusing as well because the docs don't mention audience as a valid parameter. Had to do a lot of hunting to find this!

https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html

[luisrudge]

We mention the audience here: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#specify-the-api-audience

[paulfalgout]

I'm not sure one point of documentation is really successful in documenting the feature. The docs on this repo have an example of how to call an API, but no mention of audience anywhere. https://github.com/auth0/auth0-spa-js#2---calling-an-api

[luisrudge]

The readme in the repo is just a quick reference guide. Our actual docs page has more information on how to get an access token for a different audience: https://auth0.com/docs/libraries/auth0-spa-js#get-access-token-for-a-different-audience

[stcalica]

1. Adding the audience to the config in the SPA's config.
2. And then passing it to the wrapping Auth0Provider component around my app

This worked for me! Thanks, guys!

Side note: Also does not work in Postman's auth tab cause you can't pass the audience as well. But you can hit https://<tenant>.auth0.com/oauth/token in a custom request to get the access token.