fix(phase-5): responder review remediation — callable hardening, E2E decline flow, auth error surfacing

apps/responder-app/src/app/auth-provider.tsx

@@ -20,10 +20,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     const unsub = onAuthStateChanged(auth, (u) => {
       setUser(u)
       if (u) {
-        void u.getIdTokenResult(true).then((token) => {
-          setClaims(token.claims as Record<string, unknown>)
-          setLoading(false)
-        })
+        void u
+          .getIdTokenResult(true)
+          .then((token) => {
+            setClaims(token.claims as Record<string, unknown>)
+          })
+          .catch((err: unknown) => {
+            console.error('[AuthProvider] token refresh failed:', err)
+            setClaims(null)
+          })
+          .finally(() => {
+            setLoading(false)
+          })
       } else {
         setClaims(null)
         setLoading(false)

apps/responder-app/src/app/await-auth-token.ts

@@ -0,0 +1,19 @@
+import { onIdTokenChanged, type Auth, type User } from 'firebase/auth'
+
+export async function awaitFreshAuthToken(auth: Auth): Promise<User | null> {
+  const user = auth.currentUser
+  if (!user) return null
+
+  const refreshed = new Promise<User | null>((resolve) => {
+    const unsubscribe = onIdTokenChanged(auth, (nextUser) => {
+      if (nextUser?.uid !== user.uid) {
+        return
+      }
+      unsubscribe()
+      resolve(nextUser)
+    })
+  })
+
+  await user.getIdToken(true)
+  return refreshed
+}

apps/responder-app/src/app/firebase.ts

@@ -3,6 +3,7 @@ import { getAuth } from 'firebase/auth'
 import { getFirestore } from 'firebase/firestore'
 import { getFunctions } from 'firebase/functions'
 import { getDatabase } from 'firebase/database'
+import { initializeAppCheck, ReCaptchaV3Provider, CustomProvider } from 'firebase/app-check'
 
 const USE_EMULATOR = import.meta.env.VITE_USE_EMULATOR === 'true'
 const PROJECT_ID = import.meta.env.VITE_FIREBASE_PROJECT_ID ?? 'bantayog-alert-dev'
@@ -16,23 +17,64 @@ export function getFirebaseApp(): FirebaseApp {
 }
 
 export const app = getFirebaseApp()
+
+const RECAPTCHA_SITE_KEY = import.meta.env.VITE_RECAPTCHA_SITE_KEY as string | undefined
+
+if (RECAPTCHA_SITE_KEY) {
+  initializeAppCheck(app, {
+    provider: new ReCaptchaV3Provider(RECAPTCHA_SITE_KEY),
+    isTokenAutoRefreshEnabled: true,
+  })
+} else if (USE_EMULATOR) {
+  initializeAppCheck(app, {
+    provider: new CustomProvider({
+      getToken: () =>
+        Promise.resolve({
+          token: 'responder-emulator-app-check',
+          expireTimeMillis: Date.now() + 60 * 60 * 1000,
+        }),
+    }),
+    isTokenAutoRefreshEnabled: false,
+  })
+} else {
+  console.warn(
+    '[firebase] VITE_RECAPTCHA_SITE_KEY not set - App Check disabled. DO NOT USE IN PRODUCTION.',
+  )
+}
+
 export const db = getFirestore(app)
 export const auth = getAuth(app)
-export const functions = getFunctions(app)
+export const functions = getFunctions(app, 'asia-southeast1')
 export const rtdb = getDatabase(app)
 
 if (USE_EMULATOR) {
   const FIRESTORE_EMULATOR_PORT = import.meta.env.VITE_FIRESTORE_EMULATOR_PORT ?? '8081'
-  void import('firebase/firestore').then(({ connectFirestoreEmulator }) => {
-    connectFirestoreEmulator(db, 'localhost', Number(FIRESTORE_EMULATOR_PORT))
-  })
-  void import('firebase/auth').then(({ connectAuthEmulator }) => {
-    connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
-  })
-  void import('firebase/functions').then(({ connectFunctionsEmulator }) => {
-    connectFunctionsEmulator(functions, 'localhost', 5001)
-  })
-  void import('firebase/database').then(({ connectDatabaseEmulator }) => {
-    connectDatabaseEmulator(rtdb, 'localhost', 9000)
-  })
+  void import('firebase/firestore')
+    .then(({ connectFirestoreEmulator }) => {
+      connectFirestoreEmulator(db, 'localhost', Number(FIRESTORE_EMULATOR_PORT))
+    })
+    .catch((err: unknown) => {
+      console.error('[firebase] firestore emulator connect failed:', err)
+    })
+  void import('firebase/auth')
+    .then(({ connectAuthEmulator }) => {
+      connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
+    })
+    .catch((err: unknown) => {
+      console.error('[firebase] auth emulator connect failed:', err)
+    })
+  void import('firebase/functions')
+    .then(({ connectFunctionsEmulator }) => {
+      connectFunctionsEmulator(functions, 'localhost', 5001)
+    })
+    .catch((err: unknown) => {
+      console.error('[firebase] functions emulator connect failed:', err)
+    })
+  void import('firebase/database')
+    .then(({ connectDatabaseEmulator }) => {
+      connectDatabaseEmulator(rtdb, 'localhost', 9000)
+    })
+    .catch((err: unknown) => {
+      console.error('[firebase] database emulator connect failed:', err)
+    })
 }

apps/responder-app/src/hooks/useAcceptDispatch.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { httpsCallable } from 'firebase/functions'
-import { functions } from '../app/firebase'
+import { auth, functions } from '../app/firebase'
+import { awaitFreshAuthToken } from '../app/await-auth-token'
 
 export function useAcceptDispatch(dispatchId: string) {
   const [loading, setLoading] = useState(false)
@@ -15,12 +16,14 @@ export function useAcceptDispatch(dispatchId: string) {
     setLoading(true)
     setError(undefined)
     try {
+      await awaitFreshAuthToken(auth)
       const fn = httpsCallable<{ dispatchId: string; idempotencyKey: string }, { status: string }>(
         functions,
         'acceptDispatch',
       )
       await fn({ dispatchId, idempotencyKey: keyRef.current })
     } catch (err: unknown) {
+      console.error('[useAcceptDispatch] accept failed:', err)
       if (err instanceof Error) setError(err)
       else setError(new Error(String(err)))
     } finally {

apps/responder-app/src/hooks/useAdvanceDispatch.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 import { httpsCallable } from 'firebase/functions'
-import { functions } from '../app/firebase'
+import { auth, functions } from '../app/firebase'
+import { awaitFreshAuthToken } from '../app/await-auth-token'
 import type { DispatchStatus } from '@bantayog/shared-types'
 import type { AdvanceDispatchRequest, AdvanceDispatchTarget } from '@bantayog/shared-validators'
 
@@ -16,6 +17,7 @@ export function useAdvanceDispatch(dispatchId: string) {
         if (to === 'resolved' && !extras?.resolutionSummary) {
           throw new Error('resolutionSummary_required')
         }
+        await awaitFreshAuthToken(auth)
         const advanceDispatch = httpsCallable<AdvanceDispatchRequest, { status: DispatchStatus }>(
           functions,
           'advanceDispatch',
@@ -27,6 +29,7 @@ export function useAdvanceDispatch(dispatchId: string) {
           idempotencyKey: crypto.randomUUID(),
         })
       } catch (err: unknown) {
+        console.error('[useAdvanceDispatch] advance failed:', err)
         if (err instanceof Error) setError(err)
         else setError(new Error(String(err)))
       } finally {

apps/responder-app/src/hooks/useDeclineDispatch.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { httpsCallable } from 'firebase/functions'
-import { functions } from '../app/firebase'
+import { auth, functions } from '../app/firebase'
+import { awaitFreshAuthToken } from '../app/await-auth-token'
 
 interface DeclineDispatchRequest {
   dispatchId: string
@@ -20,13 +21,15 @@ export function useDeclineDispatch(dispatchId: string) {
   async function decline(declineReason: string) {
     const trimmedReason = declineReason.trim()
     if (!trimmedReason) {
-      setError(new Error('declineReason_required'))
-      return
+      const error = new Error('declineReason_required')
+      setError(error)
+      throw error
     }
 
     setLoading(true)
     setError(undefined)
     try {
+      await awaitFreshAuthToken(auth)
       const fn = httpsCallable<DeclineDispatchRequest, { status: string }>(
         functions,
         'declineDispatch',
@@ -37,6 +40,7 @@ export function useDeclineDispatch(dispatchId: string) {
         idempotencyKey: keyRef.current,
       })
     } catch (err: unknown) {
+      console.error('[useDeclineDispatch] decline failed:', err)
       if (err instanceof Error) setError(err)
       else setError(new Error(String(err)))
     } finally {

apps/responder-app/src/hooks/useDispatch.ts

@@ -1,43 +1,90 @@
 import { useEffect, useState } from 'react'
 import { doc, onSnapshot } from 'firebase/firestore'
 import { db } from '../app/firebase'
-import type { DispatchStatus } from '@bantayog/shared-types'
+import {
+  dispatchDocSchema,
+  type DispatchDoc as SharedDispatchDoc,
+} from '@bantayog/shared-validators'
 import {
   getResponderUiState,
   getTerminalSurface,
   type ResponderUiState,
   type TerminalSurface,
 } from '../lib/dispatch-presentation'
 
-export interface DispatchDoc {
+export type DispatchDoc = SharedDispatchDoc & {
   dispatchId: string
-  reportId: string
-  assignedTo: { uid: string; agencyId: string; municipalityId: string }
-  dispatchedBy: string
-  dispatchedByRole: string
-  dispatchedAt: number
-  status: DispatchStatus
-  lastStatusAt: number
-  acknowledgementDeadlineAt?: number
-  acknowledgedAt?: number
-  enRouteAt?: number
-  onSceneAt?: number
-  resolvedAt?: number
-  cancelledAt?: number
-  cancelledBy?: string
-  cancelReason?: string
-  declineReason?: string
-  resolutionSummary?: string
-  proofPhotoUrl?: string
-  requestedByMunicipalAdmin?: boolean
-  requestId?: string
-  idempotencyKey?: string
-  idempotencyPayloadHash?: string
-  schemaVersion?: number
   uiStatus: ResponderUiState
   terminalSurface: TerminalSurface
 }
 
+function toMillis(value: unknown): number | undefined {
+  if (typeof value === 'number') return value
+  if (value && typeof value === 'object' && 'toMillis' in value) {
+    const candidate = value as { toMillis: () => number }
+    if (typeof candidate.toMillis === 'function') {
+      return candidate.toMillis()
+    }
+  }
+  return undefined
+}
+
+function normalizeDispatchSnapshot(data: Record<string, unknown>): Record<string, unknown> {
+  const normalized: Record<string, unknown> = {}
+  const schemaKeys = [
+    'reportId',
+    'assignedTo',
+    'dispatchedBy',
+    'dispatchedByRole',
+    'dispatchedAt',
+    'status',
+    'statusUpdatedAt',
+    'acknowledgementDeadlineAt',
+    'acknowledgedAt',
+    'enRouteAt',
+    'onSceneAt',
+    'resolvedAt',
+    'cancelledAt',
+    'cancelledBy',
+    'cancelReason',
+    'timeoutReason',
+    'declineReason',
+    'resolutionSummary',
+    'proofPhotoUrl',
+    'requestedByMunicipalAdmin',
+    'requestId',
+    'idempotencyKey',
+    'idempotencyPayloadHash',
+    'schemaVersion',
+  ] as const
+
+  for (const key of schemaKeys) {
+    if (key in data) {
+      normalized[key] = data[key]
+    }
+  }
+
+  const millisFields = [
+    'dispatchedAt',
+    'statusUpdatedAt',
+    'acknowledgementDeadlineAt',
+    'acknowledgedAt',
+    'enRouteAt',
+    'onSceneAt',
+    'resolvedAt',
+    'cancelledAt',
+  ] as const
+
+  for (const field of millisFields) {
+    const value = toMillis(normalized[field])
+    if (typeof value === 'number') {
+      normalized[field] = value
+    }
+  }
+
+  return normalized
+}
+
 export function useDispatch(dispatchId: string | undefined) {
   const [dispatch, setDispatch] = useState<DispatchDoc | undefined>(undefined)
   const [loading, setLoading] = useState(true)
@@ -47,29 +94,42 @@ export function useDispatch(dispatchId: string | undefined) {
     if (!dispatchId) {
       queueMicrotask(() => {
         setDispatch(undefined)
+        setError(undefined)
         setLoading(false)
       })
       return
     }
     const unsub = onSnapshot(
       doc(db, 'dispatches', dispatchId),
       (snap) => {
-        if (!snap.exists()) {
-          setDispatch(undefined)
-        } else {
-          const data = snap.data()
-          const status = data.status as DispatchStatus
+        try {
+          if (!snap.exists()) {
+            setDispatch(undefined)
+            setError(undefined)
+            return
+          }
+
+          const parsed = dispatchDocSchema.parse(
+            normalizeDispatchSnapshot(snap.data() as Record<string, unknown>),
+          )
           setDispatch({
-            ...(data as Omit<DispatchDoc, 'dispatchId' | 'uiStatus' | 'terminalSurface'>),
+            ...parsed,
             dispatchId: snap.id,
-            status,
-            uiStatus: getResponderUiState(status),
-            terminalSurface: getTerminalSurface(status),
+            uiStatus: getResponderUiState(parsed.status),
+            terminalSurface: getTerminalSurface(parsed.status),
           })
+          setError(undefined)
+        } catch (err: unknown) {
+          console.error('[useDispatch] snapshot mapping failed:', err)
+          setDispatch(undefined)
+          setError(err instanceof Error ? err : new Error(String(err)))
+        } finally {
+          setLoading(false)
         }
-        setLoading(false)
       },
       (err) => {
+        const error = err as { code?: string; message?: string }
+        console.error('[useDispatch] listener error:', error.code, error.message)
         setError(err as Error)
         setLoading(false)
       },