ray
93 lines
3.7 KiB
Markdown
93 lines
3.7 KiB
Markdown
# Phone-Verification Gate for Public Share/Approval Pages
|
|
|
|
## Problem
|
|
|
|
You have a public share link (UUID-based token in URL) that lets customers approve or decline services. Anyone with the URL can access it — forwarding the link gives full control. You need a low-friction identity check without adding SMS gateways, email infrastructure, or database changes.
|
|
|
|
## Solution
|
|
|
|
Gate the page behind a **last-4-digits phone verification** screen. The customer's phone number is already stored on the record (`customerPhone`). Show a simple 4-digit input before revealing the decision UI.
|
|
|
|
## Pattern
|
|
|
|
### 1. Add a new page status
|
|
|
|
```ts
|
|
type PageStatus = 'loading' | 'invalid' | 'expired' | 'done' | 'error' | 'phone_verify';
|
|
const MAX_PHONE_ATTEMPTS = 3;
|
|
```
|
|
|
|
### 2. Add state variables
|
|
|
|
```ts
|
|
const [phoneInput, setPhoneInput] = useState('');
|
|
const [phoneAttempts, setPhoneAttempts] = useState(0);
|
|
```
|
|
|
|
### 3. Extract phone from record and gate
|
|
|
|
After loading the record, check if a phone exists (≥4 digits). If yes → `'phone_verify'`, else skip to `'done'`:
|
|
|
|
```ts
|
|
const rawPhone = (record.customerPhone as string) || '';
|
|
const hasPhone = rawPhone.replace(/\D/g, '').length >= 4;
|
|
setPageStatus(hasPhone ? 'phone_verify' : 'done');
|
|
```
|
|
|
|
**Important:** Do NOT call `setPageStatus('done')` unconditionally after loading — the phone-verify check must be the one that sets it.
|
|
|
|
### 4. Verification handler
|
|
|
|
```ts
|
|
function handlePhoneVerify() {
|
|
if (!record) return;
|
|
const digitsOnly = record.customerPhone.replace(/\D/g, '');
|
|
const last4 = digitsOnly.slice(-4);
|
|
const inputDigits = phoneInput.replace(/\D/g, '');
|
|
if (inputDigits === last4) {
|
|
setPhoneAttempts(0);
|
|
setPageStatus('done');
|
|
} else {
|
|
const newAttempts = phoneAttempts + 1;
|
|
setPhoneAttempts(newAttempts);
|
|
setPhoneInput('');
|
|
if (newAttempts >= MAX_PHONE_ATTEMPTS) {
|
|
setError('Too many incorrect attempts. Please contact the shop directly.');
|
|
} else {
|
|
setError(`Incorrect. ${MAX_PHONE_ATTEMPTS - newAttempts} attempt(s) remaining.`);
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5. Verification UI (screen component)
|
|
|
|
Render this when `pageStatus === 'phone_verify'`:
|
|
|
|
- Logo/branding header (reuse same accent color)
|
|
- Customer name display ("This quote is for John")
|
|
- Instruction: "Enter last 4 digits of phone on file"
|
|
- Large centered input (24px font, letter-spacing, `inputMode="numeric"`)
|
|
- Submit button (disabled until 4 digits entered)
|
|
- Enter key support (`onKeyDown`)
|
|
- Locked state after max attempts (show shop phone number, hide input)
|
|
|
|
### 6. Skip when no phone
|
|
|
|
If the record has no phone or <4 digits, the verification screen never shows — backward compatible with existing records.
|
|
|
|
## Key Details
|
|
|
|
- **Stripping non-digits:** Always normalize both sides with `.replace(/\D/g, '')` before comparing. Phone formats vary (555-0100, +1 555 0100, 555.0100).
|
|
- **Last 4 only:** Slice with `.slice(-4)` — handles any phone length globally.
|
|
- **3 attempts max:** Prevents brute force. After lockout, show a "call the shop" message with the shop's business phone from settings.
|
|
- **No backend changes:** The phone is already on the record the token gives access to. The verification is client-side — anyone who already has the token can see the record, but can't submit decisions without the verification step.
|
|
- **Field name:** `customerPhone` matches the PocketBase collection field name used in SPQ-v2's `quoteWriteSchema`.
|
|
|
|
## Design Notes
|
|
|
|
- The input uses `tracking-[0.5em]` for wide spacing between digits (easy to read)
|
|
- `autoFocus` and `maxLength={4}` make it feel like a PIN entry
|
|
- On Enter, submit the verify, not the whole form
|
|
- The shop's business phone number (`settings.businessPhone`) is shown on the lockout screen
|