Issue with Token from SPA login for authorizing API calls

Help
,
1

I’m having an issue with the access token received through logging into my SPA frontend to allow access to my API routes protected by Auth0 middleware.

I have followed advice from a number of similar threads here without success.

When using the test machine-to-machine token, the API behaves as expected. However, I get a 500 error when using the access token from logging into my SPA.

Frontend

  • Vue 2, using auth0-spa-js SDK v2.1.3
  • I’m including the API ID in the audience field
  • Frontend is connected to a SPA application on the Auth0 dashboard.
  • I’ve checked the decoded JWT I receive through the frontend - it matches the pattern of an access token, not an ID token.

Backend

  • Lumen PHP framework v8.3.1
  • Auth0-php v8.3

I’ve tried adding permissions to the API and the user without success.

The error I get has code: “ERR_BAD_RESPONSE” with error response data saying “InvalidArgumentException” with message: “The HTTP status code "0" is not valid.” :man_shrugging:

4

Hi @tokonoma,

Welcome to the Auth0 Community!

When requesting an access token for your frontend SPA app, make sure to pass the API identifier instead of the API ID.

image

The description states that the identifier is used as the audience parameter on authorization calls.

Could you please give it a try and let me know how it goes?

Thanks,
Rueben

5

Hi @rueben.tiow thank you for the response! I apologize for the mistype in my original post - when I wrote API ID - I was using that as short for “identifier” - not realizing that there is in fact a separate ID field. So I am submitting that identifier value in the audience field - both when I create the auth0 client and when I call the getTokenSilently function.

this.auth0Client = await createAuth0Client({
        ...pluginOptions,
        domain: pluginOptions.domain,
        clientId: pluginOptions.clientId,
        authorizationParams: {
            redirect_uri: redirectUri,
            audience: pluginOptions.audience
        }
})

Where pluginOptions.audience is defined by a value in an auth_config file that matches my API identifier value.

Some additional details: I’m noticing when decoding my JWT received through frontend login, the audience is an array holding both the identifier I submitted AND the domain - even though in my configuration I’m only using the identifier.

Also, I am testing this on localhost - I see inconsistent mentions in other threads that getTokenSilently may or may not work when testing locally.