Sign In and Sign Up

Demo: password password1!, code 123456

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/auth.json

Features

Every step in one block. Sign in, sign up, forgot password, check your email and verify code. Each view swaps in place with the transitions.dev swap-in, and Back returns to sign in.
Show and hide. Password fields have an eye toggle that keeps focus in the field.
Strength as you type. Sign up shows a four segment Meter and a rule list that checks off 8 characters, a number and a symbol as each one is met.
Validation that shakes. Every view is a real form. Empty or wrong fields turn red, show a message under the field, shake, and play Cuelume's error sound once.
Code step. Six slots that submit on their own when the last digit lands. A wrong code clears the red as soon as you type again.
Email links. Send a reset or a sign-in link, then a Resend button counts down before it works again.
Other ways in. Google, Apple and GitHub buttons, plus a passkey button. Each one shows a spinner while its handler runs.
Card or split. The split layout adds a brand panel with a quote beside the form when there is room for it, and drops it on phones.
No network of its own. Every action goes through a handler prop, so you wire it to your auth provider.

Usage

import { Auth } from "@/components/blocks/auth"

<Auth
  variant="split"
  product="Invoicely"
  onSignIn={async ({ email, password, remember }) => {
    const res = await signIn(email, password, remember)
    return res.ok
  }}
  onSignUp={({ name, email, password }) => signUp(name, email, password)}
  onSendReset={(email) => sendLink(email)}
  onVerify={async (email, code) => (await checkCode(email, code)).ok}
  onProvider={(provider) => startOAuth(provider)}
  onAuthenticated={(email) => router.push("/dashboard")}
/>

Props

variant. "card" (default) or "split".
defaultView. The first view: "sign-in", "sign-up", "forgot", "check-email", "verify" or "done".
product. The name used in the sign in heading and the brand panel.
brand. Replaces the brand panel content in the split layout.
resendSeconds. How long Resend waits. 30 by default.
onSignIn. Resolve true to move to the code step, or false to show a wrong password message.
onSignUp, onSendReset. Run before the block moves to the next view. A spinner shows while they run.
onVerify. Resolve true when the code is right. A wrong code turns the slots red and shakes them.
onProvider. Called with "google", "apple", "github" or "passkey".
onAuthenticated. Runs after the code checks out.

Command Palette Availability Scheduler

Sign In and Sign Up

Sign in to Invoicely

Installation

Features

Usage

Props

Sign In and Sign Up

Sign in to Invoicely

Installation

Features

Usage

Props