ArticlesQuickstartsAuth0 APIsSDKs
Contact sales Log in
Add Login to Your Single-Page App
Contact sales Log in

Add Login to Your Single-Page App

Everything you need to know to implement login for a 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 that will be passed back to your application.

How it works

In a single-page application (SPA):

  1. The user clicks your "login" button or link, and 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 the user's ID Token.
  4. Auth0 responds with the user's ID Token.

For security in SPAs, 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 the sign-in methods

    Auth0 supports a wide range of authentication methods: regular username/password (users can be stored in Auth0 or your own database), social (i.e., Google, Facebook, and 50+ other providers), passwordless (email magic link, email code, and phone code), and enterprise (e.g., SAML-based, ADFS, Ping, Okta).

    Go to the dashboard and turn on the methods you want to allow; they will automatically show up in the login/sign-up page. By default, email/password and Google are enabled.
  2. 2

    Customize the sign-in UI (optional)

    The default experience is demonstrated in the image below and can be completely customized in the dashboard, from changing the logo and primary colors to completely overriding it with your own login screen.

    Default Login Screen for Native/Mobile Apps
  3. 3

    Use the Auth0 SDK to trigger the flow

    The SDK will take care of the details of redirecting to Auth0, parsing the response back, and validating the ID Token.

    Your app can keep the ID Token in memory.

    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.

What's next

  • Auth0 offers many ways to personalize your user's login experience and customize tokens using rules and hooks.
  • Many single-page apps access APIs to retrieve data, which can also be done using Auth0. Learn how to call your API from your app: Call Your API from Your Single-Page App.
  • If you are building your own API and you want to secure the endpoints using Auth0, see Protect Your API.
Ready to start building?