feat(ST-1005): add pairing server actions + mobile confirmation page
actions/pairing.ts (Server Actions, volgt docs/patterns/server-action.md): - getPairingForApproval(pairingId, mobileSecret): auth + Zod + lookup + status + expiry + verifyToken-check; retourneert UA/IP/username voor de bevestigingspagina. Demo MAG aanroepen (read-only). - approvePairing: zelfde checks PLUS demo-blokkade (session.isDemo). Update status pending→approved, zet user_id + approved_at, bumpt expires_at +5min. Postgres-trigger emit pg_notify automatisch — desktop-SSE pikt het op. - cancelPairing: status pending→cancelled. Demo mag annuleren. - Tagged-union return-type uit loadPendingPairing voor schone discriminatie. app/(app)/m/pair/page.tsx (Server Component, achter (app)/layout-guard): - Geen searchParams uitlezen — page leest URL niet. Alleen statische uitleg + PairConfirmation client-island. app/(app)/m/pair/pair-confirmation.tsx (Client Component): - useEffect parseert window.location.hash voor #id=…&s=… (server ziet de fragment nooit) - Roept getPairingForApproval om UA/IP/username op te halen - Toont kaart "Inloggen als <username> op dit apparaat?" met UA + IP + expliciete waarschuwing tegen phishing-QR; Bevestig/Annuleer-knoppen - Na approve: window.history.replaceState wist de hash zodat back/forward de secret niet meer onthult; transitioneert naar success-state - queueMicrotask voor synchrone setState om React-Compiler "cascading renders" warning te vermijden Tests __tests__/actions/pairing.test.ts (11 cases): - getPairingForApproval: ok + 5 fail-paths (geen sessie, approved, verlopen, verkeerd secret, ongeldige cuid) - approvePairing: happy + demo-block + verkeerd secret (geen DB-write) - cancelPairing: happy + demo mag annuleren Quality gates: lint 0 errors, tsc clean, vitest 132/132. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
2a0c6a512d
commit
625221f9ee
4 changed files with 512 additions and 0 deletions
26
app/(app)/m/pair/page.tsx
Normal file
26
app/(app)/m/pair/page.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// ST-1005: Mobiele bevestigingspagina voor de QR-pairing-flow (M10).
|
||||
//
|
||||
// Server Component achter de bestaande (app)/layout.tsx auth-guard — onbekende
|
||||
// mobielen worden eerst naar /login gestuurd. Bewust géén searchParams
|
||||
// uitlezen: het mobileSecret zit in het URL-fragment (#id=…&s=…), wat alleen
|
||||
// client-side leesbaar is. De Client Component PairConfirmation parseert
|
||||
// location.hash en doet de Server Action-calls.
|
||||
|
||||
import { PairConfirmation } from './pair-confirmation'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Inloggen op desktop',
|
||||
}
|
||||
|
||||
export default function PairPage() {
|
||||
return (
|
||||
<main className="container mx-auto max-w-md py-12">
|
||||
<h1 className="text-2xl font-semibold">Inloggen op desktop</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Bevestig hieronder dat je wilt inloggen op het apparaat dat de QR-code
|
||||
toont.
|
||||
</p>
|
||||
<PairConfirmation />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
174
app/(app)/m/pair/pair-confirmation.tsx
Normal file
174
app/(app)/m/pair/pair-confirmation.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
'use client'
|
||||
|
||||
// ST-1005: Mobiele bevestigings-island voor de QR-pairing-flow (M10).
|
||||
//
|
||||
// De QR-URL is /m/pair#id=…&s=… — de fragment wordt door browsers nooit naar
|
||||
// de server gestuurd, dus alleen client-side leesbaar via location.hash. Hier
|
||||
// halen we 'm op, doen via Server Action de bevestigings-roundtrip, en wissen
|
||||
// de hash zodra de approve gelukt is zodat back/forward de secret niet meer
|
||||
// onthult.
|
||||
|
||||
import { useEffect, useState, useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
getPairingForApproval,
|
||||
approvePairing,
|
||||
cancelPairing,
|
||||
} from '@/actions/pairing'
|
||||
|
||||
type State =
|
||||
| { kind: 'loading' }
|
||||
| { kind: 'invalid'; error: string }
|
||||
| {
|
||||
kind: 'ready'
|
||||
pairingId: string
|
||||
mobileSecret: string
|
||||
desktop_ua: string | null
|
||||
desktop_ip: string | null
|
||||
username: string
|
||||
}
|
||||
| { kind: 'approved'; username: string }
|
||||
| { kind: 'cancelled' }
|
||||
|
||||
function parseHash(): { id: string; s: string } | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
const raw = window.location.hash.replace(/^#/, '')
|
||||
if (!raw) return null
|
||||
const params = new URLSearchParams(raw)
|
||||
const id = params.get('id')
|
||||
const s = params.get('s')
|
||||
return id && s ? { id, s } : null
|
||||
}
|
||||
|
||||
function clearHash() {
|
||||
if (typeof window === 'undefined') return
|
||||
window.history.replaceState(null, '', window.location.pathname + window.location.search)
|
||||
}
|
||||
|
||||
export function PairConfirmation() {
|
||||
const [state, setState] = useState<State>({ kind: 'loading' })
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
useEffect(() => {
|
||||
const parsed = parseHash()
|
||||
if (!parsed) {
|
||||
queueMicrotask(() => {
|
||||
setState({ kind: 'invalid', error: 'Ongeldige of ontbrekende pairing-link' })
|
||||
})
|
||||
return
|
||||
}
|
||||
void getPairingForApproval(parsed.id, parsed.s).then((res) => {
|
||||
if (!res.ok) {
|
||||
setState({ kind: 'invalid', error: res.error })
|
||||
return
|
||||
}
|
||||
setState({
|
||||
kind: 'ready',
|
||||
pairingId: parsed.id,
|
||||
mobileSecret: parsed.s,
|
||||
desktop_ua: res.desktop_ua,
|
||||
desktop_ip: res.desktop_ip,
|
||||
username: res.username,
|
||||
})
|
||||
})
|
||||
}, [])
|
||||
|
||||
function onApprove() {
|
||||
if (state.kind !== 'ready') return
|
||||
startTransition(async () => {
|
||||
const res = await approvePairing(state.pairingId, state.mobileSecret)
|
||||
if (!res.ok) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
clearHash()
|
||||
setState({ kind: 'approved', username: state.username })
|
||||
})
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
if (state.kind !== 'ready') return
|
||||
startTransition(async () => {
|
||||
const res = await cancelPairing(state.pairingId, state.mobileSecret)
|
||||
if (!res.ok) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
clearHash()
|
||||
setState({ kind: 'cancelled' })
|
||||
})
|
||||
}
|
||||
|
||||
if (state.kind === 'loading') {
|
||||
return (
|
||||
<div className="text-muted-foreground mt-6 text-sm" aria-live="polite">
|
||||
Pairing controleren…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state.kind === 'invalid') {
|
||||
return (
|
||||
<div className="bg-destructive/10 text-destructive-foreground mt-6 rounded-md p-4">
|
||||
<p className="font-medium">Kan deze QR-code niet gebruiken</p>
|
||||
<p className="text-sm">{state.error}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state.kind === 'approved') {
|
||||
return (
|
||||
<div className="bg-primary/10 mt-6 rounded-md p-4">
|
||||
<p className="font-medium">Klaar — je kunt deze tab sluiten.</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Het apparaat met de QR-code is nu ingelogd als <strong>{state.username}</strong>.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state.kind === 'cancelled') {
|
||||
return (
|
||||
<div className="bg-muted text-muted-foreground mt-6 rounded-md p-4">
|
||||
<p className="font-medium">Geannuleerd</p>
|
||||
<p className="text-sm">Er is geen sessie aangemaakt op het andere apparaat.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-card mt-6 rounded-md border p-4">
|
||||
<p>
|
||||
Wil je inloggen als <strong>{state.username}</strong> op dit apparaat?
|
||||
</p>
|
||||
<dl className="text-muted-foreground mt-3 space-y-1 text-sm">
|
||||
<div className="flex gap-2">
|
||||
<dt className="w-16 shrink-0">Browser:</dt>
|
||||
<dd className="font-mono text-xs">{state.desktop_ua ?? 'onbekend'}</dd>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<dt className="w-16 shrink-0">IP:</dt>
|
||||
<dd className="font-mono text-xs">{state.desktop_ip ?? 'onbekend'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p className="text-muted-foreground mt-3 text-xs">
|
||||
Bevestig alleen als je deze QR-code zelf op een eigen scherm ziet — geen
|
||||
screenshot of foto van iemand anders.
|
||||
</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<Button onClick={onApprove} disabled={pending} className="flex-1">
|
||||
Bevestig
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
disabled={pending}
|
||||
variant="secondary"
|
||||
className="flex-1"
|
||||
>
|
||||
Annuleer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue