SPA + API issue with JWT token

[alexxx]

I have a simple React app + backend. I want to use an auth0 JWT to authorize API access in the backend.

I have read this tutorial, especially SPA Angular 2 Implementation (SPAs + API)

The issue is that I always get an opaque token, never a valid JWT so I can’t use it in the backend.

I have configured a single page application and an API in the Auth0 dashboard.

I get the token like this:

    const token = await getAccessTokenSilently({
      authorizationParams: {
        audience: `http://127.0.0.1:3100`,
      },
    });

I double checked that the audience is the same as set in the API in the dashboard. It doesn’t work, what am I missing here?

[alexxx]

I tried dozens of APIs and audiences including my “https://.auth0.com/” URL, and none returned an actual JWT. Please provide guidance.

[alexxx]

Even examples under here look like my code auth0-react/examples/README.md at 6bf58e8b89f3ed49b1fbf701aee7d9088f4ccedb · auth0/auth0-react · GitHub

[tyf]

Hey there @alexxx welcome to the community!

@alexxx

    const token = await getAccessTokenSilently({
      authorizationParams: {
        audience: `http://127.0.0.1:3100`,
      },
    });

I double checked that the audience is the same as set in the API in the dashboard. It doesn’t work, what am I missing here?

In your call to getAccessTokenSilently are you attempting to get a token for a different audience than specified previously? In provideAuth0 for example:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth0({
      domain: '{yourDomain}',
      clientId: '{yourClientId}',
      authorizationParams: {
        redirect_uri: window.location.origin,
        audience: '{your_api_audience}'
      }
    }),
  ]
});

Here is our Angular quickstart for reference.

[alexxx]

Thanks!

I’m requesting the same audience:

import {Auth0Provider, withAuthenticationRequired} from '@auth0/auth0-react';
// ...
      <Auth0Provider
      domain={AUTH0_DOMAIN}
      clientId={AUTH0_CLIENT_ID}
      onRedirectCallback={onRedirectCallback}
      authorizationParams={{
        audience: 'http://127.0.0.1:3100',
      }}
      {...props}
    >
      <Outlet />
    </Auth0Provider>

I’ve already looked at the Angular tutorial and seems to do the same things.

[alexxx]

The odd thing is I get ApolloError: Login required and a redirect when I run the getAccessTokenSilently part. So it feels like it’s not using the session I created by logging in.

It redirects my app to /authorize and I can see the request contains the right audience in the parameters.

[alexxx]

Found the bug in the code above, props from a higher level component was overriding my authorizationParams.

One more question: do my users have to register and then also accept that OAuth prompt to share email/name? It sounds like a duplicated UX and more attrition for the signup.

[alexxx]

@tyf did you have any opinion about the above question? Thanks!

[tyf]

@alexxx

One more question: do my users have to register and then also accept that OAuth prompt to share email/name? It sounds like a duplicated UX and more attrition for the signup.

That’s correct - Unless the application is first-party with Allow Skipping User Consent setting enabled:

User Consent and Third-Party Applications