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?
I tried dozens of APIs and audiences including my “https://.auth0.com/” URL, and none returned an actual JWT. Please provide guidance.
tyf
May 28, 2024, 9:18pm
5
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
May 28, 2024, 11:55pm
6
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.
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.
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.
1 Like
@tyf did you have any opinion about the above question? Thanks!
1 Like
tyf
June 5, 2024, 7:03pm
10
That’s correct - Unless the application is first-party with Allow Skipping User Consent
setting enabled:
system
Closed
June 19, 2024, 7:04pm
11
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.