How to Create an Auth0 Application and Customize the Login Page

When building modern applications, authentication is one of the most crucial features to secure user data. Instead of reinventing the wheel, many developers rely on Auth0, a powerful identity-as-a-service platform. Auth0 makes it easy to integrate authentication and authorization into your Auth0 Application while providing flexibility to customize the login experience.

In this blog, we’ll walk through creating an Auth0 Application, setting up login for your app, and customizing the login page to match your brand.

Setting Up Your Auth0 Account

Before we dive into building an application, let’s start by creating a free Auth0 account.
Go to the Auth0 Dashboard.

• • Sign up using your email, GitHub, or Google account.
• • Once logged in, you’ll land on the Auth0 Dashboard, the central place to manage your Auth0 Application, users, and settings.

Creating an Auth0 Application

1. From the dashboard, click on Applications → Applications.

2. Click the + Create Application button.

3. Provide a name for your application (e.g., My React App).

4. Choose the application type depending on your project:

• • Single Page Web Application → For React, Angular, or Vue apps.
• • Native Application → For iOS, Android, or React Native apps.
• • Regular Web Application → For backend-rendered apps (Node.js, Django, etc.).

5. Click Create.

Auth0 will generate:

• • Domain → Your tenant URL (e.g., dev-xyz123.us.auth0.com).
• • Client ID → A unique identifier for your Auth0 Application.
• • Client Secret → Used for server-side authentication flows.

Save these values; you’ll need them when integrating authentication into your app.

Setting Up the Login Flow

Once the Auth0 Application is created, configure your Allowed Callback URLs and Allowed Logout URLs:

• • Navigate to Settings of your Auth0 Application.
• • Under Allowed Callback URLs, add the URL where Auth0 should redirect after login (e.g., http://localhost:3000/callback).
• • Under Allowed Logout URLs, add the logout redirect path (e.g., http://localhost:3000/).
• • Click Save Changes.

Now your Auth0 Application is ready to handle login and logout requests.

Customizing the Login Page

Auth0 provides a Universal Login Page out of the box. But often, you’ll want it to align with your brand.

Option 1: Use Classic Universal Login

In the Auth0 Dashboard, go to Branding → Universal Login.
Switch to Classic.

You’ll see a code editor where you can edit the login page template (HTML, CSS, and JavaScript). You can:

• • Add your company logo.
• • Change the color scheme to match your branding.
• • Customize text and buttons.

For example, updating the background color:

body {

  background-color: #f0f4f8;

  font-family: Arial, sans-serif;

}

Option 2: Use New Universal Login (Recommended)

If you prefer a modern approach with less code management:

Go to Branding → Universal Login → Login.

• • Upload your logo and favicon.
• • Choose primary/secondary colors.
• • Customize the login text.

This way, your Auth0 Application gets a sleek login UI without needing to manage code manually.

Option 3: Customizing the Login Page

Auth0 provides a Universal Login Page out of the box it’s the hosted page where users sign in or sign up. While it works well by default, you can easily customize it to match your brand’s look and feel.

🔹Classic Universal Login Fully Customizable

The Classic Universal Login gives you full control over HTML, CSS, and JavaScript perfect if you want to completely redesign the login and password pages for your Auth0 Application.

Steps to Enable and Customize:

1. Go to your Auth0 Dashboard.
2. Navigate to Branding → Universal Login.
3. Switch to Classic.
4. Click the “Classic” tab to enable the editable login page.
5. Open the Login Page Editor.
6. Click “Customize Login Page”. This opens a code editor where you can modify the entire HTML and JavaScript of the login form.

<script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>

<script>

  var lock = new Auth0Lock(

    config.clientID,

    config.auth0Domain,

    {

      auth: { redirectUrl: config.callbackURL },

      theme: {

        logo: 'https://your-logo-url.com/logo.png',

        primaryColor: '#0A74DA'

      },

      languageDictionary: {

        title: "Welcome Back!"

      }

    }

  );

  lock.show();

</script>

🔹Customize Your Branding

• • Replace the logo URL with your company’s logo.
• • Update the primary Color to match your brand colors.
• • Change text using language Dictionary (e.g., “Sign in to continue”).

Apply a background color or image using custom CSS:

body {

  background-color: #f0f4f8;

  font-family: 'Poppins', sans-serif;

}

.auth0-lock-widget {

  border-radius: 16px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.1);

}

🔹Preview and Save

Click “Save Changes” and use the Preview option to see your new login design.
Look at the above image we redirect Auth0 with a customized page inside your Auth0 Application.

Customizing the Password Page (Forgot Password)

You can also customize the password reset page to keep your brand consistent.

Steps:

• • In the Auth0 Dashboard, go to Branding → Universal Login → Password Reset.
• • Click Customize Password Reset Page.
• • You’ll see an editable HTML/JS template similar to the login page.
• • You can use the same Auth0 Lock widget but configured for password reset.

<script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>

<script>

  var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {

    theme: {

      logo: 'https://your-logo-url.com/logo.png',

      primaryColor: '#0A74DA'

    },

    languageDictionary: {

      title: "Reset Your Password",

      emailInputPlaceholder: "Enter your email address",

      emailSent: "Password reset instructions have been sent to your email."

    }

  });

</script>

<style>

  body {

    background: linear-gradient(to bottom right, #eef2f3, #8e9eab);

    font-family: 'Poppins', sans-serif;

  }

</style>

Add your logo, brand colors, and text just like the login page.

Click Save Changes and test by selecting “Forgot Password” on your login screen.

Testing the Login

From your Auth0 Application dashboard:

• • You’ll be redirected to your customized login page.
• • Use the test credentials (or sign up) to verify the flow.

If everything works, your app is now integrated with Auth0 authentication.