Auth

7 blocks

Composed blocks for the auth surface. Each variant is a separate registry item with its own install command, source files, and fullscreen preview.

Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/auth-mfa.json
/view/auth-mfa Expand

Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/auth-password-reset.json
/view/auth-password-reset Expand

Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/auth-sign-in.json
/view/auth-sign-in Expand

Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/auth-sign-up.json
/view/auth-sign-up Expand

Centered login card. Email + password fields with a "Forgot password?" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/login-01.json
/view/login-01 Expand

Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/login-02.json
/view/login-02 Expand

Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.

$ npx shadcn-vue@latest add https://uipkge.dev/r/nuxt/register-01.json
/view/register-01 Expand