Converting from ID Token to Access Token in "Single-Page App"

[steve.steinitz]

Hi,

I have inherited a “single-page app” which uses an Auth0 ID Token to connect to Hasura. I would like to, instead, use an Auth0 Access Token.

I’ve written code to create the Access Token, via the useAuth0 hook from '@auth0/auth0-react’, and added the Access Token pipeline rule in Auth0 config, but Hasura returns “Could not verify JWT: JWSError CompactDecodeError Invalid number of parts: Expected 3 parts; got 5”.

The ID Token continues to work with Hasura without issue.

[tyf]

Hello @steve.steinitz welcome to the community!

@steve.steinitz

Hasura returns “Could not verify JWT: JWSError CompactDecodeError Invalid number of parts: Expected 3 parts; got 5”.

While I’m not familiar with Hasura myself, I looked this tutorial and judging on the error you’re seeing am guessing it is an issue having to due with than opaque access token. Check out the “create an API” section in that tutorial as it outlines the steps you need to take in order to receive a JWT rather than the aforementioned opaque access token.

Keep us posted!

[steve.steinitz]

Hi @tyf

Thanks for your reply. Yes, your opaque-vs-JWT-Access–Token idea makes sense. Thanks for a direction for focus.

The tutorial you reference has a lot of Hasura-specific information which confuses the issue slightly - for me, anyway. My perception is I’m doing what tutorial says. Is there a tutorial from Auth0 with a tighter focus on creating a JWT Access Token? If so, great, if not I’ll separate the wheat from the chaff in the Hasura tutorial.

I’ll also raise the question on the Hasura forum.

Thanks again for your reply. I’ll report any discoveries.

[tyf]

No problem, happy to help!

You basically just need to include an audience parameter in the /authorize request one way or another. The following FAQs go into this in more detail if you’re curious:

Why is my access token not a JWT? (Opaque Token)

Question: Why is my access token not a JWT? (Opaque Token) Answer: An access token will be issued in one of the following formats: JSON Web Token (JWT) : Tokens that conform to the JSON Web Token standard and contain information about an entity in the form of claims. They are self-contained in that it is not necessary for the recipient to call a server to validate the token. Access Tokens issued for the Auth0 Management API and Access Tokens issued for any custom API that you have registere…

What is the Audience?

Question: What is the Audience? Answer: The audience parameter exists as part of the OAuth2.0 protocol. You can read more information from the specification here. What is it? The audience (presented as the aud claim in the access token) defines the intended consumer of the token. This is typically the resource server (API, in the dashboard) that a client (Application) would like to access. It can be added to the request to authorize i.e. audience: 'https://test-api' Here is an example where …

[steve.steinitz]

For future readers, the trick seemed to be getting the audience working. I didn’t accomplish that but my colleague, having more Auth0-Hasura integration experience, was able to do it. I remain unclear why his code worked but mine did not.

He surmises that deleting our Auth0 Custom API (that’s what specifies the audience) and recreating it was the secret sauce.

There are so many moving parts that I find it unfeasible to nail down a clear path to a solution. But here are two tentative observations:

1. an ID Token can give API access (e.g. to Hasura) without an audience but a non-“opaque”, i.e. JWT, Access Token requires an audience. Part of my problem was I wanted to get audience working with my ID Token before I converted to Access Token (to be able to quickly roll back to ID Token if necessary). That nicety may present difficulty or worse. I eventually abandoned the idea and went “all in”.

2. Without the audience you get an “opaque” Access Token rather than a JWT and will get “Expected 3 parts; got 5” from e.g. Hasura.

Again, I state neither of the above with certainty.

What I will say is if you want to convert from accessing an API, e.g. Hasura, via ID Token to accessing it via Access Token, besides modifying the Auth0 “pipeline”, you may have to get audience working (end to end: Auth0, your code, API service) and, if all else fails, try deleting and recreating your Auth0 Custom API.

Note: we were actually able to access Hasura before we set up audience there. They key seemed to be setting up the correct audience our custom in-app Auth0 config code (a React Hook in our case). We set the audience in Hasura later.

I hope this saves someone head scratching.

[tyf]

Hey @steve.steinitz good to know you were able to get this working and really appreciate you sharing your insights with the community - I’m sure this will benefit others in the future!