Universal Login Sample App

This is a sample application to help you build a customized login screen for Auth0 login using React, TypeScript, and Vite. Universal Login offers a streamlined experience for users and does not require the use of JavaScript for customization.

Prerequisites

Before you start, make sure you have the following:

1. An Auth0 staging or development tenant with an active custom domain.
2. Configure the auth0 tenant to use the Identifier First Authentication Profile.
3. A React quickstart application configured to run with your custom domain.
4. Configure Application metadata to run quickstart.

Getting Started

Follow these steps to get the application up and running locally:

1. Clone the Repository

git clone <repository-url>
cd <repository-directory>

2. Install Dependencies

npm install

3. Build the Application

npm run build

4. Serve the Application

After building the application, you can serve it locally using http-server:

npx http-server dist -p 3032

This will start a local server on port 3032. You can access the application by navigating to http://127.0.0.1:3032 in your web browser.

5. Test the Application with sample quickstart

Go to your quickstart applicaiton and Login.

How the Login Works

Creating and Appending the Root Element

In the src/main.tsx file, we create a div element and append it to the body of the document. This is necessary for the Universal Login to work correctly. Here is the relevant code:

const rootElement = document.createElement("div");
rootElement.id = "root";

document.body.appendChild(rootElement);
document.body.style.overflow = "hidden";

Initializing Screen Objects LoginId, LoginPassword ...

In the src/screens/LoginId/index.tsx file, we initialize an object for the LoginId screen. This allows us to manage the state and behavior specific to this screen.

import React, { useState } from "react";
import LoginIdInstance from "ul-javascript";

const LoginIdScreen: React.FC = () => {
  const [loginIdManager] = useState(() => new LoginIdInstance()); //lazy initialization

  const handleLogin = () => {
    //Logic for continue
    loginIdManager.login({username:"", captcha: ""})
  }

  return (
    <div>
      {/* Render the login ID screen content */}
      <button onclick={handleLogin}>Continue<button>
    </div>
  );
};

export default LoginIdScreen;

Additional Information

• This project uses Vite for fast development and build processes.
• ESLint is configured to enforce code quality and consistency.
• SCSS is used for styling, with a focus on modular and reusable styles.

For more details on how to customize and extend this application, refer to the official documentation of the libraries and tools used:

• React
• TypeScript
• Vite
• Auth0

Have Fun with Your Own Coding Style!

Feel free to use your own coding style to create beautiful login pages. Customize the styles, add animations, and make the user experience delightful.