I’m using auth0-spa-js and logging in from my API frontend. Everything seems to be good from an authentication perspective (I get logged in and can display my profile, navigate to protected resources, etc.). My issue comes in when I call getTokenSilently() to retrieve an access token for accessing the API backend.
Note that when I look in the Auth0 log, I see “Success Exchange” “Authorization Code for Access Token”
JWT tokens should be broken into three segments, each separated by a dot (“.”). The value returned from getTokenSilently() is a 32-character string with no dots. When I pass this value to my API as a bearer token, it’s no surprise that it’s not getting decoded.
When you initiate the Auth0Client, you need to specify the audience to get the access token in JWT.
The audience should be the API identifier you created in your Auth0 tenant dashboard.
EDIT: Never mind - I had to restart npm serve to relaunch the application so that my initialization process worked correctly. I’m good now. Thanks for the help.
This is my plugin activation:
Vue.use(Auth0Plugin, {
domain, // my Auth0 domain name <xxx>.auth0.com
clientId, // my ClientID from my dashboard
audience, // the API identifier from my dashboard
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl ?
appstate.targetUrl :
window.location.pathname
)
}}
I’m using the following as my login function:
this.$auth.loginWithRedirect({
redirect_uri: <my redirect URL>,
audience: <the API identifier from my dashboard>
})
It wasn’t working without the “audience” parameter on the loginWithRedirect() call, so I added that. Made no difference.