Auth0 Invalid Compact JWS

Perhaps there may just be issues with the service?

Im using a simple React SPA and express graphql backend.

My Auth provider looks like:

<Auth0Provider domain="mydomain" clientId="clientid" redirectUri={window.location.origin} audience="test" > <App /> </Auth0Provider> 

I am then using getAccessTokenSilently, i have tried with and without adding audience here:

 const token = await getAccessTokenSilently({ audience: 'test', }); 

This returns me a JWE / opaque token that is unusable.

The audience on my API is the same but regardless i cant get past opaque access token from the front end call so it seems the problem is here. This is with a default simple setup for Single Page Application, and an API where the identifier is set to 'test'

Thanks in advance for your help

1 Answer

TL;DR

1. Verify which auth0 script version you are using
2. Check that all auth0 methods keys match your version by verifying an appropriate auth0 sample code, e.g. vanilla JS

Details

I had this issue using vanilla JS auth0 sample, but in any case, I also forward a Github answer of an auth0 member regarding React usage:

When you login to Auth0 and don't specify an Audience, you will get an opaque access token. It looks like a regular JWT, but actually it's a self contained encrypted JWT. The only way to validate an opaque token is to call the server that issued the token, in this case the /userinfo endpoint.

In order to get an access token JWT, you need to create a custom api. Then use this as the audience in your react app to login… [code in the Github thread]

In my case, I already had the proper audience value in both methods: createAuth0Client and auth for verification, but I was using an older CDN version (v1.13).

I firstly noticed the following:

1. in DevTools\Network, upon user authentication the returned access_token in JWT.io had an empty payload eyJ…..6g2LPYaj3WGTjMpj.… with a header:

   { "alg": "dir", "enc": "A256GCM", "iss": "" } 

2. according to their audience docs:

   In only one specific instance, access tokens can have multiple target audiences. This requires that your custom API's signing algorithm is set to RS256. (...) If you specify an audience of your custom API identifier and a scope of openid, then the resulting access token's aud claim will be an array rather than a string, and the access token will be valid for both your custom API and for the /userinfo endpoint

3. I verified that the version I was using (v1.13) had a few different parameters from the newest version (v2.0), so I started checking my entire script against their vanilla JS sample

4. then I logged the result of the token creation:

    auth0Client = await auth0.createAuth0Client({ domain: config.domain, client_id: config.clientId, authorizationParams: { audience: config.audience } }); console.log('> auth0 obj', auth0Client); 

5. which returned an undefined client id in several of its values, e.g.:

   "orgHintCookieName": "auth0.undefined.organization_hint", "isAuthenticatedCookieName": "auth0.undefined.is.authenticated" 

6. so the main culprit causing the "Invalid Compact JWS" error was the client id in createAuth0Client — after I changed it from client_id to clientId, the token returned upon authentication started using the RS256 algorithm:

    { "alg": "RS256", "typ": "JWT", "kid": "w4kIQ24N6SxmN-ELskX_b" } 

7. the payload was no longer empty and had both endpoints mentioned in the docs:

    "aud": [ "", "" ],