Login & Signup Standards Checklist | Development Standards

Actual Auth UI Examples

Try `user@example.com` with `SecretPass1!`, `suspended@example.com`, or `locked@example.com`.

Email *

Remember me for 30 days

or continue with

OAuth buttons should show provider-specific loading and fallback messages.

Signup Form

First Name *

Last Name *

Email *

Password *

Strength: Strong

Confirm Password *

Phone Number

I accept the Terms & Conditions *

Send me product updates

Try `existing@example.com` to see the duplicate-email state.

Forgot Password

Check your inbox

If an account exists with that email, you'll receive a password reset link shortly.

Please wait 60s before requesting another email.

Email *

Reset Password

This reset link is invalid or has expired.

Request a new one to continue.

New Password *

Strength: Strong

Confirm New Password *

Email Verification

Check your email

We sent a verification link to john.smith@example.com.

Resend available now.

Social Login States

Social sign-in

Google succeeds, Apple cancels, GitHub simulates a provider error.

1. Login Form

Fields

Field	Type	Required
Email	Email input	Yes
Password	Password input masked	Yes
Remember Me	Checkbox	No

Validation Rules

Email — required, valid email format, trimmed, lowercase before submission
Password — required, minimum 1 character
No client-side password complexity check on login
Trim whitespace from email before submitting
Do NOT trim password — spaces in passwords are valid

Error Messages

Empty email: "Email is required."
Invalid email format: "Enter a valid email address."
Empty password: "Password is required."
Wrong email or password: "Incorrect email or password."
Account not found: "Incorrect email or password."
Account disabled/locked: "Your account has been suspended. Contact support."
Too many failed attempts: "Too many failed attempts. Try again in X minutes."
Network/API error: "Something went wrong. Please try again."

Security Rule

Never reveal whether the email exists. Use the same message for wrong password and account not found.

States

Default state — form visible, submit enabled
Loading state — submit button shows spinner, disabled, no double submit
Error state — inline field errors or banner error shown
Success state — redirect to dashboard or intended page
Rate-limited state — submit disabled with countdown or message

UI Requirements

Password field has show/hide toggle
Forgot password link visible near password field
Submit button full-width or prominently placed
Enter key submits the form
No autocomplete="off" on email
Password field has autocomplete="current-password"
Form does not reset on error

2. Signup / Registration Form

Fields

Field	Type	Required	Notes
First Name	Text	Yes	Min 1 char
Last Name	Text	Yes	Min 1 char
Email	Email	Yes	Unique check on backend
Password	Password	Yes	Complexity enforced
Confirm Password	Password	Yes	Must match
Phone Number	Tel	Depends on app	E.164 format
Terms & Conditions	Checkbox	Yes	Must be checked
Marketing Emails	Checkbox	No	Optional opt-in

Validation Rules

First name — required, min 1 char, max 100 chars, no special chars except hyphens and apostrophes
Last name — required, min 1 char, max 100 chars
Email — required, valid format, trimmed, lowercased before submission
Password — required, minimum 8 chars, at least 1 uppercase, 1 lowercase, 1 number, 1 special char
Confirm Password — required, must exactly match password field
Phone — if required, E.164 format, country code included, validated on backend
Terms checkbox — must be checked before submission allowed
Show password strength indicator as user types

Password Strength Indicator

Weak: Less than 8 chars OR only one character type
Fair: 8+ chars, 2 character types
Strong: 8+ chars, 3+ character types

Show strength as a progress bar or label. Do NOT block submission with a custom strength rating. Only enforce the rules in the validation list above.

Error Messages

Empty first name: "First name is required."
Empty last name: "Last name is required."
Empty email: "Email is required."
Invalid email: "Enter a valid email address."
Email already registered: "An account with this email already exists. Log in instead?"
Weak password: "Password must be at least 8 characters with uppercase, lowercase, number, and special character."
Passwords don't match: "Passwords do not match."
Terms not checked: "You must accept the Terms & Conditions to continue."
API error: "Something went wrong. Please try again."

States

Default — form empty, submit disabled until required fields valid
Typing — inline validation shows after field is blurred
Loading — submit spinner, button disabled
Success — redirect to email verification page or dashboard
Duplicate email — show error with Log in instead link

UI Requirements

Password field has show/hide toggle
Confirm Password field has show/hide toggle
Password strength indicator visible while typing
Terms & Conditions link opens in new tab
Clear visual indicator for required fields
Already have an account? Log in link visible
Enter key does NOT submit if confirm password is not filled
autocomplete="new-password" on both password fields
autocomplete="email" on email field

3. Forgot Password Flow

Steps

1. User clicks "Forgot password?" on login page
2. User is shown a single email input field
3. User submits email
4. Backend sends reset email if account exists
5. User sees confirmation message
6. User receives email → clicks link → lands on Reset Password form

Validation Rules

Email — required, valid email format, trimmed, lowercased
No indication of whether account exists with that email

Messages

Valid submission: "If an account exists with that email, you'll receive a password reset link shortly."
Empty email: "Email is required."
Invalid email format: "Enter a valid email address."
API error: "Something went wrong. Please try again."
Already sent recently: "A reset link was already sent. Check your inbox or try again in a few minutes."

States

Default — email input, submit button
Loading — spinner, button disabled
Success — confirmation message shown, form hidden
Error — appropriate error message

UI Requirements

Back to login link visible
Success state clearly shows next step
Resend link available on success state with rate limit
Email link expires on backend

4. Reset Password Form

Accessed via: Link in email containing token.

Validation Rules

New password — same complexity as signup
Confirm password — must exactly match new password
Token from URL validated on backend before allowing submission
Invalid/expired token shows error before displaying form
Password cannot be same as previous password — enforced on backend

Error Messages

Token invalid or expired: "This reset link is invalid or has expired. Request a new one."
Token already used: "This reset link has already been used. Request a new one."
Empty new password: "New password is required."
Weak password: "Password must be at least 8 characters with uppercase, lowercase, number, and special character."
Passwords don't match: "Passwords do not match."
Same as old password: "Your new password must be different from your previous password."
API error: "Something went wrong. Please try again."

States

Loading while validating token before rendering form
Invalid token — error message and link to forgot password page, form not shown
Form visible — ready to enter new password
Submitting — spinner, button disabled
Success — password updated, redirect to login with success message

UI Requirements

Token validated immediately on page load before rendering form
Both password fields have show/hide toggles
Show same password strength indicator as signup
Back to login link
On success: auto-redirect after 3 seconds or show Go to login button
Do NOT auto-login after password reset

5. Email Verification

When Required

After signup if email verification is required before dashboard access
After changing email address

Flow

1. After signup → show "Check your email" page
2. User clicks link in email
3. Backend validates token
4. User redirected to dashboard or login with success message

States

Check your email page clearly tells user to check email and shows which email was used
Verifying — token validated on page load with spinner
Success — Email verified successfully or redirect
Invalid/expired token — show error and resend button
Resend triggered — success confirmation and rate limit enforced

Messages

Initial page: "We sent a verification link to [email]. Check your inbox."
Token valid: "Email verified successfully."
Token expired: "This verification link has expired. Click below to resend."
Token invalid: "This verification link is invalid. Try requesting a new one."
Resend success: "Verification email resent. Check your inbox."
Resend rate limited: "Please wait before requesting another verification email."

UI Requirements

Show the email address the link was sent to
Resend email button visible
Wrong email? Sign up again link visible
Resend button disabled for 60 seconds after sending
Backend tokens expire after configurable time
Backend tokens are single-use

6. Social / OAuth Login

Common Providers

Google
Apple — required for iOS apps that offer social login
Microsoft
GitHub — developer apps

Standards

OAuth handled entirely on backend — frontend only initiates redirect
Backend creates or updates user record on first login
Role assigned on backend from database — never from OAuth payload
If account exists with email, link accounts or show correct provider message
If account disabled, block login even via OAuth
Store OAuth provider and user ID on backend
Never store OAuth access token in localStorage

Error Handling

OAuth cancelled by user: Return to login page silently or show "Login cancelled"
OAuth provider error: "Could not connect to [Provider]. Try again or use email."
Email already registered: "An account with this email exists. Log in with [original method] instead."
Account disabled: "Your account has been suspended. Contact support."

UI Requirements

Social login buttons show provider logo and name
Social buttons styled per provider brand guidelines
Clear visual divider between social login and email/password
Loading spinner shown while OAuth redirect is processing

7. Session & Token Handling

Auth tokens stored in HTTP-only cookies OR memory — NOT localStorage
Refresh token rotation: issue new refresh token each time it is used
Access token short expiry — 15 minutes recommended
Refresh token longer expiry — 7–30 days
On logout: invalidate token on backend
On session expiry: redirect to login page with session expired message
On 401 from API: trigger refresh token flow before showing error
On refresh token failure: log out user and redirect to login
Remember Me extends refresh token expiry
Concurrent session handling defined

8. Security Rules

Passwords are NEVER logged — not in console, not in API logs
Passwords are NEVER sent in query string
Reset/verification tokens are never exposed beyond intended use
Auth endpoint has rate limiting
Lockout after too many failures with clear user feedback
HTTPS required — no auth flow over HTTP
CSRF protection enabled on all auth endpoints
Service role key NEVER in frontend code
JWT secret NEVER in frontend code
Email enumeration prevented
Frontend validation is UX only — backend validates and enforces everything

9. UX Standards

Loading state on every auth button
Enter key submits the focused form
Tab order is logical
Error messages shown inline next to relevant field
General/API errors shown as a banner
Form does NOT reset on submission error
Redirect after login goes to intended page
Back link always available
Already have an account and Don't have an account links are mutually visible
Mobile keyboard does not cover submit button
Mobile input types show correct keyboard

Before Marking Done

10. Auth Checklist

Login Form

Email and password validated
Loading state on submit
Error shown in UI
Same message for wrong password and unknown email
Password show/hide toggle works
Forgot password link visible and functional
Redirect to intended page after login
Mobile tested

Signup Form

All required fields validated
Password complexity rules enforced and communicated
Confirm password match checked on client
Terms & Conditions checkbox required
Duplicate email error shown with Log in instead link
Loading state on submit
Success redirect or email verification flow initiated
Mobile tested

Forgot Password

Email validated
Same message regardless of whether email exists
Success state shown clearly
Backend sends email if account exists
Backend reset link expires
Backend rate limit on requests

Reset Password

Token validated on page load before rendering form
Invalid/expired token shows error
New password complexity enforced
Confirm password match checked
Same password as old blocked on backend and shown to user
Success redirects to login, not auto-login

Session & Security

Tokens not in localStorage
Logout invalidates token on backend
Session expiry handled gracefully
Rate limiting on login and forgot password
No password or token in logs
Backend enforces all auth rules — frontend only displays

Practice Task

Apply what you learned by building the full auth flow: login, forgot password, and reset password.

Open Task 02