Hi @PTanwarCS,
Typically with a SPA, authentication looks like this:
- The user logs into Auth0 which acts as the authorization server (e.g. Universal Login)
- Auth0 redirects the user back to the SPA along with a code
- The SPA requests tokens using the code
- Auth0 issues two tokens, an ID Token and an Access Token
This process is simplified with Auth0 SDKs such as the React SDK. If you haven’t checked it out already, you may want to take a look at the React Quickstart or the Complete Guide to React Authentication
The React app can use the ID Token to find data on the user such as their name, email, etc. The Access Token is used for calling an API.
When you register your API with Auth0 and provide an audience
when you initialize the Auth0Provider
, then Auth0 will issue you a JWT Access Token that can be used with your API as a bearer token. Your API can validate the JWT Access Token to ensure it was issued by Auth0.
ReactDOM.render(
<Auth0Provider
domain={config.domain}
clientId={config.clientId}
audience={config.audience}
redirectUri={window.location.origin}
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
Since it sounds like you have multiple APIs and you can only pass one audience to the Auth0Provider
, you may want to look into this solution: Represent Multiple APIs Using a Single Logical API
Here is an architecture scenario that may be helpful for a SPA + API: SPA + API