7.4 KiB
7.4 KiB
Unified "Get Started" Flow
Overview
The unified get-started flow provides a single entry point for customer account creation and eligibility checking. It replaces separate /signup and /migrate pages with a streamlined flow at /auth/get-started.
User Flows
1. Direct Account Creation (/auth/get-started)
/auth/get-started
│
├─→ Step 1: Enter email
│
├─→ Step 2: Verify email (6-digit OTP)
│
└─→ Step 3: System checks accounts & routes:
│
├─→ Portal exists → "Go to login"
├─→ WHMCS exists (unmapped) → "Link account" (enter WHMCS password)
├─→ SF exists (unmapped) → "Complete account" (pre-filled form)
└─→ Nothing exists → "Create account" (full form)
2. Eligibility Check First (/services/internet/check-availability)
For customers who want to check internet availability before creating an account:
/services/internet (public)
│
└─→ Click "Check Availability"
│
└─→ /services/internet/check-availability (dedicated page)
│
├─→ Step 1: Enter name, email, address
│
├─→ Step 2: Verify email (6-digit OTP)
│
└─→ Step 3: SF Account + Case created immediately
│
├─→ "Create Account Now" → Redirect to /auth/get-started
│ (email pre-verified, goes to complete-account)
│
└─→ "Maybe Later" → Return to /services/internet
(SF Account created for agent to review)
Account Status Routing
| Portal | WHMCS | Salesforce | Mapping | → Result |
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | Go to login |
| ✓ | ✓ | - | ✓ | Go to login |
| - | ✓ | ✓ | - | Link WHMCS account (migrate) |
| - | ✓ | - | - | Link WHMCS account (migrate) |
| - | - | ✓ | - | Complete account (pre-filled) |
| - | - | - | - | Create new account (full form) |
Frontend Structure
apps/portal/src/features/get-started/
├── api/get-started.api.ts # API client functions
├── stores/get-started.store.ts # Zustand state management
├── components/
│ ├── GetStartedForm/
│ │ ├── GetStartedForm.tsx # Main form container
│ │ └── steps/
│ │ ├── EmailStep.tsx # Email input
│ │ ├── VerificationStep.tsx # OTP verification
│ │ ├── AccountStatusStep.tsx# Route based on status
│ │ ├── CompleteAccountStep.tsx # Full signup form
│ │ └── SuccessStep.tsx # Success confirmation
│ └── OtpInput/OtpInput.tsx # 6-digit code input
├── views/GetStartedView.tsx # Page view
└── index.ts # Public exports
Eligibility Check Page
Location: apps/portal/src/features/services/views/PublicEligibilityCheck.tsx
Route: /services/internet/check-availability
A dedicated page for guests to check internet availability. This approach provides:
- Better mobile experience with proper form spacing
- Clear user journey with bookmarkable URLs
- Natural browser navigation (back button works)
- Focused multi-step experience
Flow:
- Collects name, email, and address (with Japan ZIP code lookup)
- Verifies email with 6-digit OTP
- Creates SF Account + Eligibility Case immediately on verification
- Shows success with options: "Create Account Now" or "Maybe Later"
Backend Endpoints
| Endpoint | Rate Limit | Purpose |
|---|---|---|
POST /auth/get-started/send-code |
5/5min | Send OTP to email |
POST /auth/get-started/verify-code |
10/5min | Verify OTP, return account status |
POST /auth/get-started/quick-check |
5/15min | Guest eligibility (creates SF Account + Case) |
POST /auth/get-started/complete-account |
5/15min | Complete SF-only account |
POST /auth/get-started/maybe-later |
3/10min | Create SF + Case (legacy) |
Domain Schemas
Location: packages/domain/get-started/
Key schemas:
sendVerificationCodeRequestSchema- email onlyverifyCodeRequestSchema- email + 6-digit codequickEligibilityRequestSchema- sessionToken, name, addresscompleteAccountRequestSchema- sessionToken + password + profile fieldsaccountStatusSchema-portal_exists | whmcs_unmapped | sf_unmapped | new_customer
OTP Security
- Storage: Redis with key format
otp:{email} - TTL: 10 minutes
- Max Attempts: 3 per code
- Rate Limits: 5 codes per 5 minutes
Handoff from Eligibility Check
When a user clicks "Create Account Now" from the eligibility check page:
- Email stored in sessionStorage:
get-started-email - Verification flag stored:
get-started-verified=true - Redirect to:
/auth/get-started?email={email}&verified=true - GetStartedView detects handoff and:
- Sets account status to
sf_unmapped(SF Account was created during eligibility) - Skips to
complete-accountstep - User only needs to add password + profile details
- Sets account status to
When a user clicks "Maybe Later":
- Returns to
/services/internetplans page - SF Account already created during eligibility check (agent can review)
- User can return anytime and use the same email to continue
Testing Checklist
Manual Testing
- New customer flow: Enter new email → Verify OTP → Full signup form
- SF-only flow: Enter email with SF account → Verify → Pre-filled form, just add password
- WHMCS migration: Enter email with WHMCS → Verify → Enter WHMCS password
- Eligibility check: Click "Check Availability" on plans page → Dedicated page → Enter details → OTP → "Create Account" or "Maybe Later"
- Return flow: Customer returns, enters same email → Auto-links to SF account
- Mobile experience: Test eligibility check page on mobile viewport
Security Testing
- Verify OTP expires after 10 minutes
- Verify max 3 attempts per code
- Verify rate limits on all endpoints
- Verify email enumeration is prevented (same response until OTP verified)
Routes
| Route | Action |
|---|---|
/auth/get-started |
Unified account creation page |
/auth/signup |
Redirects to /auth/get-started |
/auth/migrate |
Redirects to /auth/get-started |
/services/internet/check-availability |
Guest eligibility check (public) |
Environment Variables
# OTP Configuration
OTP_TTL_SECONDS=600 # 10 minutes
OTP_MAX_ATTEMPTS=3
GET_STARTED_SESSION_TTL=3600 # 1 hour