Call Your API from Your Single-Page App
Everything you need to know to call your API from your single-page app (SPA)
Using Auth0 in your applications means that you will be "outsourcing" the authentication process to a centralized login page in the same way that Gmail, YouTube, and any other Google property redirects to accounts.google.com whenever a user signs in.
Your user will authenticate, and Auth0 will generate an ID Token and Access Token that will be passed back to your application. The Access Token can then be used to call your API.
How it works
How it works
When your app needs to fetch user data from your API:
- If the user is not already authenticated, our SDK redirects the user to your Auth0 Authorization Server, requesting an ID Token.
- The user authenticates with Auth0 using one of your configured login options (e.g., username/password, social identity provider, SAMLSAML),
- Auth0 responds with the user's ID Token and Access Token.
- The Access Token can be used to call your API and retrieve requested data.
For single-page web apps, Auth0 uses the Implicit Flow.
Implementation overview
Implementation overview
- 1
Configure your API
Once you have created your API, you will need to configure any scopes that applications can request during authorization. - 2
Get an Access Token
Your app requests an Access Token (and optionally, a Refresh Token) from your Auth0 Authorization Server using the Authorization Code Flow with PKCE. - 3
Call your API
When your app calls your API, it includes the retrieved Access Token in the HTTP Authorization header. - 4
Refresh your Access Token
When the Access Token expires you can use the Refresh Token to get a new one from your Auth0 Authorization Server.
- 1
Configure your API
Once you have created your API, you will need to configure any scopes that applications can request during authorization. - 2
Get an Access Token
Your app requests an Access Token from your Auth0 Authorization Server using the Implicit Flow. - 3
Call your API
When your app calls your API, it includes the retrieved Access Token in the HTTP Authorization header.
The easiest way to implement the Implicit Flow is to follow our Single-Page App Quickstarts.
You can also use our Auth0.js SDK.
Finally, to use our API endpoints, you can follow our tutorial: Call Your API Using the Implicit Flow.
Keep reading
Guides
Step-by-step instructions for tasks
Keep reading
Guides
Step-by-step instructions for tasks
What's next
- Auth0 offers many ways to personalize your user's login experience and customize tokens using rules and hooks.
- If you are building your own API and you want to secure the endpoints using Auth0, see Protect Your API.
- If you need to add login to your own single-page app, learn how at: Add Login to Your Single-Page App.