> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 Universal Login

> Universal Login provides you with the means to prove your users' identities with our authorization server.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Auth0 <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip> provides the essential feature of an <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=authorization+server">authorization server</Tooltip>: the login flow. When a user needs to prove their identity to gain access to your application, you can redirect them to Universal Login and let Auth0 handle the authentication process.

With Universal Login, you don’t have to complete any integration work to accommodate different methods of authentication. You can start with a simple authentication flow, then add additional features, such as passwordless login, social login, or <Tooltip tip="Multi-factor authentication (MFA): User authentication process that uses a factor in addition to username and password such as a code via SMS." cta="View Glossary" href="/docs/glossary?term=multi-factor+authentication">multi-factor authentication</Tooltip> (MFA), to customize a secure and user-friendly login experience.

Configuring Universal Login is dynamic and does not require any application-level changes, as web pages hosted on Auth0’s centralized <Tooltip tip="Authentication Server: Server that confirms or denies a user’s identity." cta="View Glossary" href="/docs/glossary?term=authentication+server">authentication server</Tooltip> completely drive the login flow. Additionally, you don’t need to manually update your code for applications to benefit from improvements Auth0 makes to Universal Login.

From the <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, you can customize the appearance and behavior of login pages to create a consistent, branded experience. For advanced use cases, you can also change the code of each page individually.

To learn more about the differences between Universal Login and embedded login, review [Centralized Universal Login vs. Embedded Login](/docs/authenticate/login/universal-vs-embedded-login).

## Configure Universal Login

On your Auth0 Dashboard, you can choose which experience to use for default login pages under [Branding > Universal Login > Advanced Options](https://manage.auth0.com/#/universal-login/customizations-new).

Auth0 offers two hosted login experiences:

* **Universal Login** offers a streamlined experience for users and does not require the use of JavaScript for customization.
* **Classic Login** uses JavaScript controls for each page of the login flow.

At this time, Auth0’s active development efforts are focused on Universal Login, and Classic Login no longer receives updates. Unless your specific use case requires the Classic experience, implementing Universal Login is recommended.

To learn more about how these two experiences compare, review [Universal Login vs. Classic Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login).

### Accessibility

Auth0 employs the following standards to improve access to Universal Login flows for people who use assistive technologies:

* [Web Content Accessibility Guidelines (WCAG) version 2.2 AA](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [EN 301 549](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility)

Auth0 Universal Login enables these standards by default. Below are areas that could impact customer customizations:

* Validation errors are shown inline instead of as tooltips so they are accessible to screen readers.
* The default interface component colors are aligned with WCAG guidelines around color contrast.
* Forms use autocorrect.
* The [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) and other attributes of the interface components allow easy screen reader navigation.
* Email addresses are validated client side and follow the same formatting rules as the server side validation.
* HTML labels are accessible and associated with their respective input fields.
* Password complexity requirements and inline error messages are announced by screen readers.
* All <Tooltip tip="Authorization Flow: Authorization grant (or workflow) specified in the OAuth 2.0 framework." cta="View Glossary" href="/docs/glossary?term=authorization+flow">authorization flow</Tooltip> screens have a useful and distinct page title.
* Required fields include a visual indicator on the label.

### Customize login page

After enabling Universal Login, you can customize your login page directly from the Auth0 Dashboard. Specifically, you can customize page templates and themes, signup and login prompts, and other text elements. To learn more, review Customize Universal Login.

If you decide to implement Classic Login, you can customize basic branding options from the Auth0 Dashboard. You can then configure advanced customization with the SDK used to build your login flow. To learn more, review [Customize Classic Login](/docs/customize/login-pages/classic-login).

## Implement Universal Login

After enabling either Universal Login or Classic Login within your tenant, follow the steps below to implement the experience:

1. [Register your application](/docs/get-started/auth0-overview/create-applications) with Auth0.
2. Configure your application to call the [Login endpoint](https://auth0.com/docs/api/authentication#login) of the Authentication API to trigger the login flow and handle the response. and handle the response. You can configure this directly or use one of Auth0's [SDKs](/docs/libraries).
3. Create a [Database](/docs/get-started/applications/set-up-database-connections), [Enterprise](/docs/authenticate/enterprise-connections), or [Social](/docs/authenticate/identity-providers/social-identity-providers) connection and enable it for your application.

### Navigate to the login page

You can call the [Login endpoint](https://auth0.com/docs/api/authentication#login) directly from any browser:

export const codeExample = `https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri=https://{yourApp}/callback&
  state={yourState}`;

<AuthCodeBlock children={codeExample} language="bash" filename="cURL" />

The request must include the following values:

* `response_type` (either `code` or `token`)
* `client_id`
* `redirect_uri`
* `state`

  * To better understand why this value is required review [Prevent Attacks and Redirect Users With OAuth 2.0 State Parameters](/docs/secure/attack-protection/state-parameters).

Optionally, you can include the `connection` parameter to prompt users to authenticate with the specified connection.

### Correlation ID

<ReleaseStageNotice feature="Correlation ID" stage="ea" terms="true" contact="Auth0 Support or your Techncial Account Manager" />

Universal Login supports Correlated Events across all authentication flows. Once you implement Universal Login, your application generates a unique ID you pass as the `correlation_id` to the `/authorize` endpoint. The unique ID persists through the following authentication events:

* Signup
* Login
* Multi-Factor Authentication (MFA) enrollment and challenges
* Password reset

Once `correlation_id` is passed, you can trace authentication events in [Auth0 Logs](/docs/deploy-monitor/logs).

To learn more, read [Correlation ID](/docs/authenticate/login/configure-correlation-id).

### Use the Quickstart guides

For more information on how you can set up Universal Login for your application, review the [Quickstart guides](/docs/quickstarts). Choose the approach that best fits your technologies and follow the Quickstart for a walkthrough of the implementation.