Auth0 Home Blog Docs

Calling API in a SPA

lock
api
management-api
spa

#1

I have a SPA in React and am trying to login with auth0-lock and then make requests to a .NET Web API 2 on Azure registered on auth0.

My lockOptions are:


{  
oidcConformant: true,
auth: {  
        responseType: 'id_token token',  
        params: {  
          audience: auth_audience,  
          scope: 'openid'  
        }  
      }  
}

I am passing through the consent page and getting an access_token and id_token but when I try to make a request using my access_token, I receive a 401 Unauthorized. The API is working fine when I make a request to a public endpoint.
I tried to follow this example, but I am facing this issue


#2

You need to ensure that your API is validating the access_token correctly.

  • If your API is configured for HS256,
    ensure that your API is using the API
    Signing Secret to validate the
    token. You can find this in the API
    settings in the Auth0 Dashboard.

  • If configured for RS256, you need to
    ensure you are using the public key
    to validate the token - this can be
    obtained from
    https://your-tenant.auth0.com/.well-known/jwks.json.


#3

I’ve used this example to implement our WEB API 2:
https://github.com/auth0-samples/auth0-aspnet-owin-webapi-sample/tree/master/01-Authentication/WebApi
It only uses Audience and Domain as parameters to configure the authentication, so I’m assuming it is working with RS256?
When using a Non-Interactive client, everything works as expected, the access_token is validated properly with the registered API, the same just isn’t true for the react client.


#4

I’ve used this example to implement our WEB API 2: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-sample/tree/master/01-Authentication/WebApi It only uses Audience and Domain as parameters to configure the authentication, so I’m assuming it is working with RS256? When using a Non-Interactive client, everything works as expected, the access_token is validated properly with the registered API, the same just isn’t true for the react client.


#5

@brandao You need to ensure that you are requesting the desired scopes for the API, e.g. read:contacts. The following document outlines the execution of the implicit grant flow:

https://auth0.com/docs/api-auth/tutorials/implicit-grant


#6