Auth0 custom login page in React (ACUL)

Most apps should start with Auth0's built-in Universal Login branding, which is free. If you want your own React screen on Auth0's hosted login page, that is ACUL. It needs a custom domain and a paid Auth0 plan. This page wires the pull-cord lamp login into ACUL's login screen.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it as your Auth0 login screen

src/screens/login/index.tsx

import { login, useErrors, useScreen, useTransaction } from "@auth0/auth0-acul-react/login";
import PullCordLogin from "@/components/PullCordLogin";

export default function LoginScreen() {
  const screen = useScreen();
  const transaction = useTransaction();
  const { errors } = useErrors();
  // Wrong password, blocked user, failed captcha: Auth0 reloads this screen and the message lands here.
  const serverError = errors.byType("auth0")[0]?.message;

  return (
    <main className="grid min-h-dvh place-items-center overflow-hidden bg-[#07080c]">
      {serverError && (
        <p role="alert" className="fixed left-1/2 top-6 z-10 -translate-x-1/2 rounded-full bg-red-500/15 px-4 py-2 text-sm text-red-200">
          {serverError}
        </p>
      )}
      <PullCordLogin
        defaultOn
        subtitle="Sign in to continue"
        forgotHref={screen.resetPasswordLink ?? "#"}
        forgotLabel={transaction.isForgotPasswordEnabled ? "Forgot password?" : ""}
        footerText={transaction.isSignupEnabled ? "No account?" : ""}
        footerAction={transaction.isSignupEnabled ? "Create one" : ""}
        onFooterAction={
          transaction.isSignupEnabled && screen.signupLink
            ? () => window.location.assign(screen.signupLink!)
            : undefined
        }
        onSubmit={async (email, password) => {
          // login() posts a form to Auth0 and the browser leaves the page.
          // It does not reject on a wrong password, so keep the spinner going
          // until the page unloads instead of showing a success label.
          await login({ username: email, password });
          await new Promise<never>(() => {});
        }}
      />
    </main>
  );
}

src/index.css (add at the end)

/* src/index.css in the ACUL sample: keep its existing lines, add this at the end. */

/* Pull-Cord's inputs carry font-sans. Tailwind v4 doesn't read the piece's
   tailwind.config.js, so pin the room's font here, scoped to the room. */
.qpc-room .font-sans {
  font-family: "Space Grotesk", system-ui, sans-serif;
}

Good to know

This file replaces the login screen in Auth0's ACUL sample project (auth0-samples/auth0-acul-samples, MIT). Its screen loader renders src/screens/login when Auth0 asks for the login screen, and the sample already runs Tailwind v4, so the piece's classes build. Copy PullCordLogin.tsx and pull-cord-login.css from the zip into src/components.
login() does not wait for Auth0's answer. We read the SDK source (acul-js 1.10.0): it builds a hidden form and submits it, so the browser leaves the page. A wrong password never rejects the promise. Auth0 reloads the screen and the message shows up in useErrors(), which the file above prints at the top. That's also why onSubmit never resolves: the spinner keeps going until the page unloads, instead of flashing "Signed in" before Auth0 has checked anything.
So the card's shake only fires for an empty or badly formed field, which the piece checks itself. It doesn't shake for a wrong password, because the page reloads first.
After a failed attempt the email field comes back empty. The piece has no prop for a starting email. If you want it filled, add a defaultEmail prop to your copy and pass screen.data?.username.
The piece checks for an email shape. If your connection lets people sign in with a username or a phone number, change EMAIL_RE in your copy or use a different form.
The links come from Auth0: Forgot password goes to screen.resetPasswordLink and Create one to screen.signupLink, each shown only when the tenant has that flow on. With forgot password off, the label is empty but the link element stays; delete it from your copy if that bothers you.
PullCordLogin.tsx starts with "use client". That's for Next.js. Vite ignores it and may print a warning in the build log.
The room is drawn at 1000 x 660. On a phone, scale it with the className or style props.
What we ran: the file above type-checks (TypeScript 5.9.3) against @auth0/auth0-acul-react 1.10.0, @types/react 19.3.0, framer-motion 14.6.0 and the shipped PullCordLogin.tsx, and four deliberate mistakes (a hook name, a screen field, a transaction flag, a missing password) fail as they should. What we didn't run: it has not been deployed to a real Auth0 tenant or opened in Auth0's context inspector.

How to customize the Auth0 login page without code

Start here. Universal Login's own branding settings change the logo, colours and look of Auth0's hosted page. Auth0's pricing page lists Brand Customization and Configurable Login Experience on every plan, Free included.
If your goal is your logo and your colours on a clean form, that fits better than anything on this page. You keep Auth0's tested login, password reset and MFA screens, and you write no code.
Go custom only when branding isn't enough: a fully different layout, your own React components, analytics or A/B tests on the login screen. That is ACUL.

What Auth0 ACUL needs before you write React

ACUL (Advanced Customizations for Universal Login) lets you "replace the hosted login UI with your own React or Vanilla JS app while Auth0 still drives the authentication state machine", in Auth0's own words.
Auth0's docs list the requirements: a tenant with Universal Login and a custom domain, a first party application, and a CDN with a CI/CD pipeline to host your built JavaScript and CSS. Auth0 serves a small host page and loads your files from that CDN, checking them with Subresource Integrity hashes.
Plan: Auth0's pricing page shows Customize Signup & Login as not included on Free and included from Essentials up. Auth0's ACUL docs don't name a plan themselves, but an answer posted as official recommendations on the Auth0 Community (Oct 2026) says ACUL starts with the Essentials plan and that this pricing row covers it. So budget for a paid plan, and check with Auth0 if you're on an older contract.
Custom domain: the Free plan includes one, but Auth0 asks for credit card verification to set it up.
If any of this rules you out, go back to the branding settings above, or to a self-hosted login form with another auth library.

Which ACUL screen the login form replaces

The pull-cord card has the email and the password on one form. In ACUL that is the login screen, which Auth0 shows when Identifier First is off.
With Identifier First on, Auth0 splits sign-in into two screens, login-id (email) and login-password. The card doesn't fit that flow without changes. Note that Auth0's ACUL quickstart turns Identifier First on and scaffolds login-id, so switch it off, or add the login screen with auth0 acul screen add login.
The hooks used here come from the per-screen import @auth0/auth0-acul-react/login (version 1.10.0, MIT, published Oct 23 2026): login, useScreen, useTransaction and useErrors. The ACUL sample project pins an older 1.0.0, which is why the install line asks for 1.10.0. Read the SDK's changelog before upgrading a project that already runs on 1.0.0.
The piece's font: Auth0 serves the page HTML, so you can't add a font link to it. Load Space Grotesk from your own CSS bundle, and keep the scoped rule above so the sample's own components keep their font.

Install

Copy from the zipPut react/src/components into src/, then npm i framer-motion @auth0/[email protected].
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit: (email, password) → promise; here it calls ACUL's login()
defaultOn: start with the light on
forgotHref: Auth0's reset password link
onFooterAction: goes to Auth0's sign up link
accent: bead and button colour

How qodesign compares

qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

Can I customize the Auth0 login page for free?

Yes, with Universal Login's branding settings: logo, colours and the look of the hosted page. A fully custom React screen (ACUL) needs a paid plan from Essentials up, per Auth0's pricing page, plus a custom domain.

Does this work with Auth0's Next.js or React SDK?

Those SDKs live in your app and send people to Auth0's login page. ACUL replaces what that login page shows. You use both: your app keeps its Auth0 SDK, and this screen is built and hosted separately.

Why doesn't the card shake on a wrong password?

Because ACUL's login() submits a form and the page reloads. Auth0 checks the password on the server and sends the error back with the new page, where useErrors() reads it.

Can I add Google sign-in?

The piece is an email and password form. Put a button next to it that calls federatedLogin({ connection: "google-oauth2" }) from the same import, using your connection's name.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.