ArticlesQuickstartsAuth0 APIsSDKs
Contact sales Log in
Call Your API from Your Single-Page App
Contact sales Log in

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.
  2. The user authenticates with Auth0 using one of your configured login options (e.g., username/password, social identity provider, SAML).
  3. Your app requests an ID Token and Access Token.
  4. Auth0 responds with the requested tokens.
  5. The Access Token can be used to call your API and retrieve requested data.

For single-page apps, Auth0 uses the Authorization Code Flow with PKCE.

Flow Overview for Single-Page Apps with Auth Code Flow with PKCE

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 Authorization Code Flow with PKCE.
  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 Authorization Code Flow with PKCE is to follow our Single-Page App Quickstarts. You can also use our Auth0 Single-Page App SDK.

Finally, to use our API endpoints, you can follow our tutorial: Call Your API Using the Authorization Code Flow with PKCE.

Keep reading

Guides

Step-by-step instructions for tasks

References

API endpoints, libraries, and best practices

Concepts

Understand the fundamentals

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?