JWT malformed from Vue SPA using auth0-spa-js library

[kristen-s]

The JWT submitted from our client app to Express server is malformed. When I paste it into the debugger at jwt.io, the payload is empty because the first dot-separation is a double dot. The token is 490 chars total.

~header~..~signature? but there's another '.' character 16 chars in~

The client app uses Vue 2 and Typescript. Two examples used to develop the Auth0 wrapper are:

1. Primarily from Auth0 documentation for Vue 2.
2. Secondarily from another page for Typescript types.

From another question here, I found others have said to add an audience. I would link to it but the community guidelines have me limited.
They weren’t specific as to where to add the audience. So, we tried to add audience to two different methods with no change to the resulting token. Methods below are both from the @auth0/auth0-spa-js library.

Options fed into createAuth0Client() look like this:

const options: Auth0ClientOptions = {
          domain: <tenant>.us.auth0.com,
          clientId: <clientId>,
          authorizationParams: {
              redirect_uri: http://localhost:<port>/,
              audience: https://<domain>.net/,
          }
      };

Options fed into getTokenSilently() look like this:

const options: GetTokenSilentlyOptions = {
          authorizationParams: {
              audience: https://<domain>.net/
          }
      };

Do we need to put the audience value somewhere else?

Has anyone else successfully implemented the Vue2 example but found they needed to make a critical change compared to the example?

[tyf]

Hey there @kristen-s welcome to the community, and thanks for the detailed description of what you’re experiencing

Looking at our quickstart for calling an API leads me to believe you’d want to add the audience to your Auth0ClientOptions like:

const options: Auth0ClientOptions = {
          domain: <tenant>.us.auth0.com,
          clientId: <clientId>,
          audience: <your_api_identifier>,
          authorizationParams: {
              redirect_uri: http://localhost:<port>/,
          }
      };

You are correct though in that you will need an audience in the context of using it against your Express server:

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 …

Keep us posted!

[kristen-s]

Hi Tyf,

Thank you for your quick response. Unfortunately, moving the audience parameter as you suggested doesn’t make a difference in the token returned.

Any other ideas?

Thanks,
Kristen

[tyf]

Hey @kristen-s no problem, happy to help where I can!

That’s interesting you’re still having an issue with the token being malformed, I don’t have any other ideas off the top of my head

Have you had a chance to walk through our Vue samples? In particular, I’d be curious if you were to work through the bit regarding calling an API in particular, and compare that against your own code/environment. The calling an API sample is from the quickstart I linked previously.

[kristen-s]

Tyf,

Thank you.

I went through that reference, and didn’t find any new information there specifically.

However, I did find my issue as I was double-checking everything. I had initially expected the environment variable for audience to only be needed on the express server side. So I did not prepend the variable name with ‘VUE_APP_’. That turned out to be my problem, as there was no value for my audience variable. It works now!

Hopefully this can help others who have a similar Vue setup.

[tyf]

Hey @kristen-s good to know you got it working, and thanks a bunch for following up with the community!