How does authorization work with an API and an SPA

Help
, ,
1

Hey there,

at the moment I did following:

I have a React Frontend (SPA) and I followed the tutorial till the point where I receive an accessToken, idToken and expiry date. The refresh mechanism in frontend works.

I set now an accessToken to the header with very request I fire to my API. The header is basically the accessToken NOT the idToken.

Now → how do I verify that the accessToken is a correct one on the API site? Basically I use an AuthorizationFilter with Java and a typical SecurityConfig (Spring Security).

When I make requests to userInfo I end up with too many requests.

Unfortunately I’m a bit confused on how to do this and would greatly appreciate help.

2

Hey there @flurz123, we actually have a helpful quickstart on this which I have linked below that dives into how to validate your access tokens. When you get a minute give it a look and let us know if you have any additional questions or if helped you in your quest, Thanks!

https://auth0.com/docs/quickstart/backend/java-spring-security/01-authorization#validate-access-tokens

4

I wanted to follow up @flurz123 and see if you had any additional questions in regards to this subject? Please let us know if we can be of further assistance. Thanks!

5

Thanks @James.Morrison for the link.

I’m using this config on the front end to login:

  auth0 = new auth0.WebAuth({
    clientID: env.authClientId,
    domain: env.authDomain,
    responseType: 'token id_token',
    redirectUri: env.authCallbackUrl,
    scope: 'openid',
  });

Then if I make a call to the backend with these headers:

    'Content-Type':  'application/json',
    'Authorization': `Bearer ${authResult.idToken}`

And I get back a 401 unauthorized response. However, if I use the bearer token on the API test page it works fine.

I’ve also tried using the authResult.accessToken in place of the authResult.idToken with no better luck.

What am I doing wrong? Any help would be most appreciated!

6

Hey there @jeb, I’d be happy to dig into this with you. When get a chance can you recreate the workflow when you receive the 401 unauthorized response, capture it in a HAR file, and direct message it over to me. Please be sure to select “Preserve log” to catch redirects and scrub the file of user passwords before passing it over, thanks!

8

After further inspecting your HAR file with our team, we were able to deduce that the error appears to belong to your declaration of your audience. This needs to corrected by declaring your audience in your config when your go to authenticate. To do so, you need to create an API on Auth0 from our dashboard and leverage that audience identifier in your call to be able to successfully proceed forward. It’s important to note that the audience value needs to be the API you want to call. Thanks!

10

That worked!

On the front end I changed my auth0.webAuth to

  auth0 = new auth0.WebAuth({
    clientID: env.authClientId,
    domain: env.authDomain,
    responseType: 'token id_token',
    redirectUri: env.authCallbackUrl,
    scope: 'openid',
    audience: env.authAudience
  });

Then in the Http headers to the backend i use:

'Authorization': `Bearer ${this.accessToken}`

11

Fantastic! I’m glad we were able to help in getting this resolved. Please let us know in the future if you have any other questions pop up!

12

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.