Add Login to Your Single-Page App

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 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 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.

For security in SPAs, Auth0 uses the Implicit Flow.

Flow Overview for Single-Page Apps

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. Follow one of our Single-Page App Quickstarts to get started with the integration.

Keep reading

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?