feat(web): add login, register, forgot-password, and verify-email pages

[amoomustakim-hue]

What does this PR do?

Builds the W-03 web authentication flow for Twizrr.

This includes:

• Auth layout with no app navigation chrome
• Login page
• Universal registration wizard
• Forgot password page
• Verify email page
• Frontend validation and safe auth handling
• No buyer/merchant role selection
• Store prompt only for eligible 18+ users

The flow follows Twizrr’s universal USER model. Store setup remains optional and is not built in this PR.

Type of change

• New feature
• Bug fix
• Refactor / cleanup
• Database migration included
• Chore / maintenance

How to test this

1. Checkout feat/web-auth

2. Run:

   cd apps/backend
   npx prisma generate
   npx tsc --noEmit

3. Run web checks:

   cd apps/web
   pnpm run lint
   npx tsc --noEmit
   pnpm run build

4. Visit:

   • /login
   • /register
   • /forgot-password
   • /verify-email

5. Confirm:

   • Login form validates correctly
   • Register flow has no role selection
   • Under-13 DOB is blocked
   • 13–17 users do not see store prompt
   • 18+ users see store prompt
   • No JWT/token is stored in localStorage
   • No backend/env files were modified by this PR

Pre-commit checklist

• Web lint/type/build commands pass
• Backend TypeScript check passes after Prisma client generation
• No console.log left in production code
• No hardcoded hex values in page/component files
• No secrets committed
• No any types added
• No database migration included
• No emojis added to UI
• No backend source files changed

Notes

The local pre-commit backend TypeScript failure was caused by a stale generated Prisma client. Running npx prisma generate resolved it without backend source changes.

Summary by CodeRabbit

• New Features
  • Added complete user authentication system with registration, login, password recovery, and email verification
  • Implemented multi-step account setup wizard during registration
  • Added email verification workflow
  • Integrated API client for authentication requests

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This pull request introduces a complete authentication system for the web application: an HTTP API client library, a reusable auth layout wrapper, and four pages implementing login, password recovery, email verification, and a complex multi-step registration wizard that validates user data and integrates with the backend.

Changes

Authentication System

Layer / File(s)	Summary
HTTP API client infrastructure apps/web/src/lib/api.ts	Defines API_BASE, ApiError type, and a generic request helper that handles fetch, JSON parsing, credentials inclusion, and error throwing; exports api object with post and get methods.
Auth pages layout wrapper apps/web/src/app/(auth)/layout.tsx	Provides AuthLayout component rendering a branded header with logo and centering child content in a constrained container.
Login page and redirect flow apps/web/src/app/(auth)/login/page.tsx	Validates email and password via Zod, submits to /auth/login, determines redirect from query parameter or response, and displays password visibility toggle and errors.
Forgot password recovery apps/web/src/app/(auth)/forgot-password/page.tsx	Collects email, submits to /auth/forgot-password, transitions to success state regardless of backend response, and provides login link.
Email code verification apps/web/src/app/(auth)/verify-email/page.tsx	Renders 6-digit code input, verifies via backend, provides resend flow with 30-second timeout, suppresses errors to prevent email enumeration, and redirects on success.
Registration wizard infrastructure apps/web/src/app/(auth)/register/page.tsx — schemas and types	Defines interest categories, age calculation helper, and step-specific Zod validation schemas for email/password, phone (Nigerian format), DOB (with age gates), and identity fields; exports inferred types.
Registration wizard state and logic apps/web/src/app/(auth)/register/page.tsx — state management	Manages multi-step wizard state including current step, minor status, aggregated form data, server errors, and loading flags; implements navigation helpers and submit handlers with async backend registration call and error handling.
Registration form steps 1–5 apps/web/src/app/(auth)/register/page.tsx — form collection	Renders sequential form steps: account type selection, email and password entry with visibility toggle, phone validation, date-of-birth input with live age computation, and identity collection; step 5 calls backend registration endpoint.
Registration post-flow steps 6–8 apps/web/src/app/(auth)/register/page.tsx — optional flow	Renders optional post-registration steps: interests selection via chips, optional bio with live character count, and for adults only a store setup prompt; branches to verification with age-aware and selection-aware next destinations.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Suggested reviewers

• onerandomdevv
• SAHEED2010

🐰 A hop-skip through auth today,
Five new pages light the way,
Schemas and logins align,
Passwords toggle, codes verify fine,
The registration wizard—eight steps to stay! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: adding login, register, forgot-password, and verify-email pages to the web app.
Description check	✅ Passed	The description covers all required template sections: clear explanation of changes, type of change marked, area affected (Web), detailed testing steps, completed pre-commit checklist, and notes for reviewer.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/web-auth

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}