Skip to content
Pinky UI

mobile

Progressive Auth Surface

Moves identity, method and verification into one mobile surface so each step stays legible and reversible.

  • mobile
  • auth
  • progressive
  • verification
  • forms
Related pattern

A mobile auth sequence reveals only the next useful decision while retaining a clear back path.

Live preview

Access / identity

01 / 04

Start with your identity.

Only the next useful decision appears; your previous choice stays attached to this surface.

Quick usage

usage
import { ProgressiveAuthSurface } from "@pinky-ui/systems";

<ProgressiveAuthSurface />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a progressive auth surface when a mobile sign-in flow should reveal identity, method and verification one decision at a time.

Interaction anatomy

  • Identity is collected before choosing a method.
  • Verification is shown only when requested.
  • Back paths preserve the previous decision without opening a new route.

Good for

Passkey or code sign-in, compact onboarding and trusted-device verification.

Avoid

Long account setup, multi-factor administration or forms with many independent fields.

Live example

Enter an email, choose a method and continue through the verification step.

Usage

tsx
<ProgressiveAuthSurface />

Tune

Keep one decision in view, explain what happens next and preserve a clear Back action.

Accessibility and reduced motion

Use native labels, autocomplete="one-time-code", text status and keyboard-submit paths. Reduced motion keeps each step and its status language visible.

Open this skill on its own page