Add Login to Your Regular Web App

Add Login to Your Regular Web App

Everything you need to know to implement login for a regular web app

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 regular web application:

  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 server-side web apps, Auth0 uses the Authorization Code Flow.

Flow Overview for Regular Web 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 an SDK for your chosen platform to trigger the flow

    An open-source OpenID Connect (OIDC) SDK for your chosen platform can redirect to the Auth0 Universal Login page and handle the response, validating the ID Token.

    Your app can store the ID Token. Follow one of our Regular Web 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.
  • Most regular web 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 Regular Web 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?