Call Your API from Your Single-Page App

Everything you need to know to call your API from your single-page app (SPA)

Ready to start building?

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

When your app needs to fetch user data from your API:

  1. If the user is not already authenticated, our SDK redirects the user to your Auth0 Authorization Server, requesting an ID Token.
  2. The user authenticates with Auth0 using one of your configured login options (e.g., username/password, social identity provider, SAML),
  3. Auth0 responds with the user's ID Token and Access Token.
  4. The Access Token can be used to call your API and retrieve requested data.

For single-page web apps, Auth0 uses the Single-Page Login Flow.

Flow Overview for Single-Page Apps

Implementation overview

  1. 1

    Configure your API

    Once you have created your API, you will need to configure any scopes that applications can request during authorization.
  2. 2

    Get an Access Token

    Your app requests an Access Token from your Auth0 Authorization Server using the Single-Page Login Flow.
  3. 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 Single-Page Login 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 Single-Page Login Flow.

Keep reading

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.

Ready to start building?