Skip to main content
Pricing

Authentication

Authentication flows are the first interaction users have with your product. A smooth, clear auth experience builds trust and reduces drop-off. This pattern covers sign in, sign up, password reset, and MFA verification.

Components used

Anatomy

1
Split Page Layout — brand illustration or gradient on the left, auth form on the right
2
Auth Card — centered card containing the form, logo, and footer links
3
Form fields — stacked vertically with 16px gap, labels above inputs
4
Action area — primary Button (full-width), secondary links below (Forgot password?, Sign up)
5
Social providers — divider + row of social login buttons

Best practices

Sign in

Email + Password fields, "Remember me" checkbox, "Forgot password?" link below the form. Primary button: "Sign in". Below the form: "Don't have an account? Sign up" link. Optional social provider buttons separated by "or" divider.

Sign up

Name + Email + Password fields. Show password strength meter as the user types. Terms of service checkbox (required). Primary button: "Create account". Below: "Already have an account? Sign in" link.

Password reset

Three-step flow: (1) Enter email → "Send reset link", (2) Enter OTP code from email, (3) Enter new password + confirm. Show Alert for success/error states at each step. Allow "Back to sign in" at every step.

Loading states

When the form submits, show a Spinner inside the Button and disable all form fields. This prevents duplicate submissions and gives clear feedback. On error, re-enable the form and show an Alert with the error message.

Layout

Use Split Page Layout on desktop — brand/illustration on the left, form on the right. On mobile, hide the illustration panel and show only the form card, centered. Keep the form narrow (max 400px) for comfortable reading.

Responsive behaviour

Split Page Layout collapses to single-column on mobile — form only, no illustration.
Auth card becomes full-width with 16px horizontal padding on mobile.
Social login buttons stack vertically on very small screens.
OTP Input fields remain side-by-side — they are designed for compact display.

Accessibility

Auto-focus the first input field when the page loads.
Password fields have a show/hide toggle with aria-label="Show password" / "Hide password".
Error alerts use role="alert" to announce server errors to screen readers.
OTP inputs use aria-label="Digit 1 of 6" etc. for clear screen reader context.
Links for "Forgot password?" and "Sign up" are clearly labelled — not "Click here".
Form submission must work with keyboard alone — Enter key submits.