Home/Patterns/Auth flow

Auth flow

Sign in, two-factor, reset, magic link, sign-up. Centered card layouts with one focused form.

Stable5 compositions
COMPOSITION 01

Sign in · email + password

Default flow. Optional "keep me signed in" + SSO escape hatch.

Use whenMost users; the standard sign-in experience.
Huchu

Sign in

Welcome back to Mukamba Group.

or
COMPOSITION 02

Two-factor · authenticator code

6-digit code from an authenticator app. Backup options sit below.

Use whenAfter password success when the workspace requires 2FA. Most security-sensitive verticals do.

Verify it’s you

Enter the 6-digit code from your authenticator app.

2
8
4
1
9
COMPOSITION 03

Magic link · email-only

No password. Send a one-time link to the email on file. Used for low-frequency portals (parent, student).

Use whenAudiences who sign in rarely and shouldn't be asked to remember a password.

Sign in

Enter your email; we’ll send you a one-time link.

Check your inbox

We sent a link to tendai@parent.co.zw. It expires in 10 minutes.

Resend
COMPOSITION 04

Reset password

Two screens: request, then set new. The request screen is identical to sign-in for muscle memory.

Use whenThe operator has forgotten their password.

Reset password

We’ll email you a link.

Set new password

The link expires in 10 minutes.

COMPOSITION 05

Sign-up · new workspace

Three-question setup followed by the onboarding wizard. No credit card.

Use whenA new tenant signing up directly from the marketing site.
Huchu

Start your free trial

30 days, all features. No card required.

Shared rules

Do

Lead the primary action with a verb — "Sign in", not "Submit".

Don't

Show 8 different sign-in options. Email + one SSO is plenty.

Do

State the workspace name once the user lands.

Don't

Send the operator to a generic error page on bad credentials. Show the error inline.