@sparkvault/sdk-mobile 0.1.3

package/src/identity-dialog.tsx

@@ -0,0 +1,955 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import type { SparkVaultMobile } from './client.js';
+import type {
+  IdentityConfig,
+  IdentityJwks,
+  IdentityMethodId,
+  IdentityType,
+  IdentityVerifyResult,
+  PasskeyAuthOptions,
+  PasskeyCredential,
+} from './types.js';
+
+type DialogStep = 'loading' | 'identity' | 'methods' | 'passkey' | 'totp' | 'error';
+type TotpMethod = 'email' | 'sms' | 'voice';
+type SupportedMethodId = 'passkey' | 'totp_email' | 'totp_sms' | 'totp_voice';
+
+export interface MobilePasskeyProvider {
+  isSupported(): boolean | Promise<boolean>;
+  authenticate(options: PasskeyAuthOptions): Promise<PasskeyCredential | null>;
+}
+
+export interface SparkVaultIdentityDialogProps {
+  client: SparkVaultMobile;
+  visible: boolean;
+  initialIdentity?: string;
+  initialIdentityType?: IdentityType;
+  passkeyProvider?: MobilePasskeyProvider;
+  onSuccess(result: IdentityVerifyResult & { jwks: IdentityJwks }): void | Promise<void>;
+  onCancel(): void;
+  onError?(error: Error): void;
+}
+
+const SUPPORTED_METHODS = new Set<IdentityMethodId>(['passkey', 'totp_email', 'totp_sms', 'totp_voice']);
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const E164_PHONE_REGEX = /^\+[1-9]\d{7,14}$/;
+
+export function SparkVaultIdentityDialog({
+  client,
+  visible,
+  initialIdentity,
+  initialIdentityType,
+  passkeyProvider,
+  onSuccess,
+  onCancel,
+  onError,
+}: SparkVaultIdentityDialogProps) {
+  const [step, setStep] = useState<DialogStep>('loading');
+  const [config, setConfig] = useState<IdentityConfig | null>(null);
+  const [identity, setIdentity] = useState(initialIdentity ?? '');
+  const [identityType, setIdentityType] = useState<IdentityType>(initialIdentityType ?? 'email');
+  const [selectedMethod, setSelectedMethod] = useState<SupportedMethodId | null>(null);
+  const [kindling, setKindling] = useState<string | null>(null);
+  const [expiresAt, setExpiresAt] = useState<number | null>(null);
+  const [pin, setPin] = useState('');
+  const [countdown, setCountdown] = useState('');
+  const [isBusy, setIsBusy] = useState(false);
+  const [error, setError] = useState('');
+  const sessionRef = useRef(0);
+  const onSuccessRef = useRef(onSuccess);
+  const onCancelRef = useRef(onCancel);
+  const onErrorRef = useRef(onError);
+
+  const branding = config?.branding;
+  const effectiveTheme = branding?.themeMode ?? 'light';
+  const colors = effectiveTheme === 'dark' ? darkColors : lightColors;
+  const allowedTypes = useMemo(() => normalizeAllowedTypes(config), [config]);
+  const methodsForIdentity = useMemo(
+    () => getMethodsForIdentity(config, identityType, passkeyProvider),
+    [config, identityType, passkeyProvider]
+  );
+
+  useEffect(() => {
+    onSuccessRef.current = onSuccess;
+    onCancelRef.current = onCancel;
+    onErrorRef.current = onError;
+  }, [onCancel, onError, onSuccess]);
+
+  useEffect(() => {
+    if (!visible) {
+      sessionRef.current += 1;
+      return;
+    }
+
+    let cancelled = false;
+    const sessionId = sessionRef.current + 1;
+    sessionRef.current = sessionId;
+    setStep('loading');
+    setError('');
+    setPin('');
+    setKindling(null);
+    setExpiresAt(null);
+    setSelectedMethod(null);
+    setIdentity(initialIdentity ?? '');
+    setIdentityType(initialIdentityType ?? 'email');
+
+    client.auth.getConfig()
+      .then((nextConfig) => {
+        if (cancelled || !isActiveSession(sessionRef, sessionId)) return;
+        setConfig(nextConfig);
+        setIdentityType(resolveInitialIdentityType(initialIdentity, initialIdentityType, normalizeAllowedTypes(nextConfig)));
+        setStep('identity');
+      })
+      .catch((err: unknown) => {
+        if (cancelled || !isActiveSession(sessionRef, sessionId)) return;
+        const nextError = asError(err);
+        setError(nextError.message);
+        setStep('error');
+        onErrorRef.current?.(nextError);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [client, initialIdentity, initialIdentityType, visible]);
+
+  useEffect(() => {
+    if (!expiresAt || step !== 'totp') {
+      setCountdown('');
+      return;
+    }
+
+    const updateCountdown = () => {
+      const remaining = expiresAt - Math.floor(Date.now() / 1000);
+      setCountdown(remaining > 0 ? formatCountdown(remaining) : 'Expired');
+    };
+
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000);
+    return () => clearInterval(timer);
+  }, [expiresAt, step]);
+
+  const finishWithToken = useCallback(async (result: IdentityVerifyResult, sessionId: number) => {
+    const jwks = await client.auth.getJwks();
+    if (!isActiveSession(sessionRef, sessionId)) return;
+    await onSuccessRef.current({ ...result, jwks });
+  }, [client]);
+
+  const reportError = useCallback((err: unknown, fallback: string) => {
+    const nextError = asError(err, fallback);
+    setError(nextError.message);
+    onErrorRef.current?.(nextError);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    sessionRef.current += 1;
+    setIsBusy(false);
+    onCancelRef.current();
+  }, []);
+
+  const sendTotp = useCallback(async (
+    method: SupportedMethodId,
+    targetIdentity = identity,
+    targetIdentityType = identityType
+  ) => {
+    const totpMethod = toTotpMethod(method);
+    if (!totpMethod) return;
+
+    const sessionId = sessionRef.current;
+    setIsBusy(true);
+    setError('');
+    setSelectedMethod(method);
+    try {
+      const response = await client.auth.sendTotp({
+        identity: targetIdentity,
+        identityType: targetIdentityType,
+        method: totpMethod,
+      });
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      setKindling(response.kindling);
+      setExpiresAt(response.expires_at);
+      setPin('');
+      setStep('totp');
+    } catch (err) {
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      reportError(err, 'Failed to send verification code');
+    } finally {
+      if (isActiveSession(sessionRef, sessionId)) {
+        setIsBusy(false);
+      }
+    }
+  }, [client, identity, identityType, reportError]);
+
+  const runPasskey = useCallback(async (
+    targetIdentity = identity,
+    targetIdentityType = identityType
+  ) => {
+    if (!passkeyProvider) {
+      setError('Passkeys are not available in this app.');
+      return;
+    }
+
+    const sessionId = sessionRef.current;
+    setIsBusy(true);
+    setError('');
+    setSelectedMethod('passkey');
+    setStep('passkey');
+
+    try {
+      const supported = await passkeyProvider.isSupported();
+      if (!supported) {
+        throw new Error('Passkeys are not supported on this device.');
+      }
+      if (!isActiveSession(sessionRef, sessionId)) return;
+
+      const challenge = await client.auth.getPasskeyAuthOptions(targetIdentity, targetIdentityType);
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      const credential = await passkeyProvider.authenticate(challenge.options);
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      if (!credential) {
+        throw new Error('Passkey authentication was cancelled.');
+      }
+
+      const result = await client.auth.completePasskeyAuthentication(credential, challenge.session);
+      await finishWithToken(result, sessionId);
+    } catch (err) {
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      reportError(err, 'Passkey authentication failed');
+    } finally {
+      if (isActiveSession(sessionRef, sessionId)) {
+        setIsBusy(false);
+      }
+    }
+  }, [client, finishWithToken, identity, identityType, passkeyProvider, reportError]);
+
+  const handleIdentitySubmit = useCallback(async () => {
+    if (isBusy) return;
+
+    const parsed = parseIdentity(identity, allowedTypes);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return;
+    }
+
+    const normalizedIdentity = parsed.identity;
+    const nextIdentityType = parsed.identityType;
+    const availableMethods = getMethodsForIdentity(config, nextIdentityType, passkeyProvider);
+    if (availableMethods.length === 0) {
+      setError('No supported sign-in methods are enabled for this identity type.');
+      return;
+    }
+
+    setIdentity(normalizedIdentity);
+    setIdentityType(nextIdentityType);
+    setError('');
+    setIsBusy(true);
+    const sessionId = sessionRef.current;
+
+    try {
+      if (availableMethods.includes('passkey')) {
+        const { hasPasskey } = await client.auth.checkPasskeyStatus(normalizedIdentity, nextIdentityType);
+        if (!isActiveSession(sessionRef, sessionId)) return;
+        if (hasPasskey) {
+          await runPasskey(normalizedIdentity, nextIdentityType);
+          return;
+        }
+      }
+
+      const totpMethods = availableMethods.filter((method) => method !== 'passkey');
+      if (totpMethods.length === 1) {
+        await sendTotp(totpMethods[0], normalizedIdentity, nextIdentityType);
+        return;
+      }
+
+      setStep('methods');
+    } catch (err) {
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      reportError(err, 'Failed to load sign-in methods');
+    } finally {
+      if (isActiveSession(sessionRef, sessionId)) {
+        setIsBusy(false);
+      }
+    }
+  }, [allowedTypes, client, config, identity, isBusy, passkeyProvider, reportError, runPasskey, sendTotp]);
+
+  const handleMethodSelect = useCallback(async (method: SupportedMethodId) => {
+    if (method === 'passkey') {
+      await runPasskey();
+      return;
+    }
+    await sendTotp(method);
+  }, [runPasskey, sendTotp]);
+
+  const handleVerifyTotp = useCallback(async () => {
+    if (!kindling || pin.length !== 6) return;
+
+    const sessionId = sessionRef.current;
+    setIsBusy(true);
+    setError('');
+    try {
+      const result = await client.auth.verifyTotp({
+        kindling,
+        pin,
+        recipient: identity,
+      });
+      await finishWithToken(result, sessionId);
+    } catch (err) {
+      if (!isActiveSession(sessionRef, sessionId)) return;
+      const apiError = err as { data?: { kindling?: string; expires_at?: number } };
+      if (apiError.data?.kindling) {
+        setKindling(apiError.data.kindling);
+      }
+      if (apiError.data?.expires_at) {
+        setExpiresAt(apiError.data.expires_at);
+      }
+      setPin('');
+      reportError(err, 'Verification failed');
+    } finally {
+      if (isActiveSession(sessionRef, sessionId)) {
+        setIsBusy(false);
+      }
+    }
+  }, [client, finishWithToken, identity, kindling, pin, reportError]);
+
+  const handleResend = useCallback(async () => {
+    if (!selectedMethod) return;
+    await sendTotp(selectedMethod);
+  }, [selectedMethod, sendTotp]);
+
+  const handleRetryConfig = useCallback(() => {
+    const sessionId = sessionRef.current + 1;
+    sessionRef.current = sessionId;
+    setIsBusy(true);
+    setConfig(null);
+    setError('');
+    setStep('loading');
+
+    client.auth.getConfig()
+      .then((nextConfig) => {
+        if (!isActiveSession(sessionRef, sessionId)) return;
+        setConfig(nextConfig);
+        setIdentityType(resolveInitialIdentityType(initialIdentity, initialIdentityType, normalizeAllowedTypes(nextConfig)));
+        setStep('identity');
+      })
+      .catch((err: unknown) => {
+        if (!isActiveSession(sessionRef, sessionId)) return;
+        reportError(err, 'Failed to load sign-in options');
+        setStep('error');
+      })
+      .finally(() => {
+        if (isActiveSession(sessionRef, sessionId)) {
+          setIsBusy(false);
+        }
+      });
+  }, [client, initialIdentity, initialIdentityType, reportError]);
+
+  const headerLogo = getHeaderLogo(branding, effectiveTheme);
+  const companyName = branding?.companyName || 'SparkVault';
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={handleCancel}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={[styles.backdrop, { backgroundColor: colors.backdrop }]}
+      >
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
+            <View style={styles.header}>
+              <View style={styles.brand}>
+                {headerLogo ? (
+                  <Image source={{ uri: headerLogo }} style={styles.logo} resizeMode="contain" />
+                ) : (
+                  <View style={[styles.logoFallback, { backgroundColor: colors.primarySoft }]}>
+                    <Text style={[styles.logoFallbackText, { color: colors.primary }]}>
+                      {companyName.slice(0, 1).toUpperCase()}
+                    </Text>
+                  </View>
+                )}
+                <Text style={[styles.companyName, { color: colors.text }]}>{companyName}</Text>
+              </View>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Close identity verification"
+                onPress={handleCancel}
+                hitSlop={12}
+                style={styles.closeButton}
+              >
+                <Text style={[styles.closeText, { color: colors.muted }]}>x</Text>
+              </Pressable>
+            </View>
+
+            {step === 'loading' && (
+              <View style={styles.centerContent}>
+                <ActivityIndicator color={colors.primary} />
+                <Text style={[styles.mutedText, { color: colors.muted }]}>Loading sign-in options...</Text>
+              </View>
+            )}
+
+            {step === 'identity' && (
+              <View style={styles.body}>
+                <Text style={[styles.title, { color: colors.text }]}>Sign in</Text>
+                <Text style={[styles.subtitle, { color: colors.muted }]}>
+                  {identitySubtitle(allowedTypes)}
+                </Text>
+                <TextInput
+                  value={identity}
+                  onChangeText={(value) => {
+                    setIdentity(value);
+                    setError('');
+                    if (allowedTypes.length > 1) {
+                      setIdentityType(value.trim().startsWith('+') || /^\d/.test(value.trim()) ? 'phone' : 'email');
+                    }
+                  }}
+                  placeholder={identityPlaceholder(allowedTypes)}
+                  placeholderTextColor={colors.placeholder}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  autoComplete={identityType === 'phone' ? 'tel' : 'email'}
+                  keyboardType={identityType === 'phone' ? 'phone-pad' : 'email-address'}
+                  editable={!isBusy}
+                  style={[
+                    styles.input,
+                    {
+                      borderColor: error ? colors.error : colors.border,
+                      color: colors.text,
+                      backgroundColor: colors.input,
+                    },
+                  ]}
+                />
+                {error ? <Text style={[styles.error, { color: colors.error }]}>{error}</Text> : null}
+                <PrimaryButton
+                  label="Continue"
+                  colors={colors}
+                  disabled={!identity.trim() || isBusy}
+                  loading={isBusy}
+                  onPress={handleIdentitySubmit}
+                />
+              </View>
+            )}
+
+            {step === 'methods' && (
+              <View style={styles.body}>
+                <Text style={[styles.title, { color: colors.text }]}>Choose a method</Text>
+                <Text style={[styles.subtitle, { color: colors.muted }]}>{identity}</Text>
+                <View style={styles.methodList}>
+                  {methodsForIdentity.map((method) => (
+                    <Pressable
+                      key={method}
+                      accessibilityRole="button"
+                      onPress={() => handleMethodSelect(method)}
+                      disabled={isBusy}
+                      style={({ pressed }) => [
+                        styles.methodButton,
+                        {
+                          borderColor: colors.border,
+                          backgroundColor: pressed ? colors.pressed : colors.input,
+                          opacity: isBusy ? 0.6 : 1,
+                        },
+                      ]}
+                    >
+                      <Text style={[styles.methodTitle, { color: colors.text }]}>{methodTitle(method)}</Text>
+                      <Text style={[styles.methodDescription, { color: colors.muted }]}>
+                        {methodDescription(method)}
+                      </Text>
+                    </Pressable>
+                  ))}
+                </View>
+                {error ? <Text style={[styles.error, { color: colors.error }]}>{error}</Text> : null}
+                <TextButton label="Use a different identity" colors={colors} onPress={() => setStep('identity')} />
+              </View>
+            )}
+
+            {step === 'passkey' && (
+              <View style={styles.body}>
+                <Text style={[styles.title, { color: colors.text }]}>Use your passkey</Text>
+                <Text style={[styles.subtitle, { color: colors.muted }]}>
+                  Confirm this sign-in with your device passkey.
+                </Text>
+                <View style={[styles.passkeyIcon, { backgroundColor: colors.primarySoft }]}>
+                  <Text style={[styles.passkeyIconText, { color: colors.primary }]}>key</Text>
+                </View>
+                {isBusy ? <ActivityIndicator color={colors.primary} /> : null}
+                {error ? <Text style={[styles.error, { color: colors.error }]}>{error}</Text> : null}
+                <PrimaryButton
+                  label="Try Again"
+                  colors={colors}
+                  disabled={isBusy}
+                  loading={isBusy}
+                  onPress={runPasskey}
+                />
+                {fallbackTotpMethod(methodsForIdentity) ? (
+                  <TextButton
+                    label={fallbackLabel(fallbackTotpMethod(methodsForIdentity)!)}
+                    colors={colors}
+                    onPress={() => sendTotp(fallbackTotpMethod(methodsForIdentity)!)}
+                    disabled={isBusy}
+                  />
+                ) : null}
+              </View>
+            )}
+
+            {step === 'totp' && (
+              <View style={styles.body}>
+                <Text style={[styles.title, { color: colors.text }]}>{totpTitle(selectedMethod)}</Text>
+                <Text style={[styles.subtitle, { color: colors.muted }]}>
+                  Enter the 6-digit code sent to {'\n'}
+                  <Text style={{ color: colors.text, fontWeight: '700' }}>{identity}</Text>
+                </Text>
+                <TextInput
+                  value={pin}
+                  onChangeText={(value) => {
+                    setPin(value.replace(/\D/g, '').slice(0, 6));
+                    setError('');
+                  }}
+                  placeholder="000000"
+                  placeholderTextColor={colors.placeholder}
+                  keyboardType="number-pad"
+                  maxLength={6}
+                  editable={!isBusy && countdown !== 'Expired'}
+                  style={[
+                    styles.pinInput,
+                    {
+                      borderColor: error ? colors.error : colors.border,
+                      color: colors.text,
+                      backgroundColor: colors.input,
+                    },
+                  ]}
+                />
+                <Text style={[styles.countdown, { color: countdown === 'Expired' ? colors.error : colors.muted }]}>
+                  {countdown === 'Expired' ? 'Code expired' : `Expires in ${countdown}`}
+                </Text>
+                {error ? <Text style={[styles.error, { color: colors.error }]}>{error}</Text> : null}
+                <PrimaryButton
+                  label="Verify"
+                  colors={colors}
+                  disabled={pin.length !== 6 || isBusy || countdown === 'Expired'}
+                  loading={isBusy}
+                  onPress={handleVerifyTotp}
+                />
+                <TextButton label="Resend code" colors={colors} onPress={handleResend} disabled={isBusy} />
+              </View>
+            )}
+
+            {step === 'error' && (
+              <View style={styles.body}>
+                <Text style={[styles.title, { color: colors.text }]}>Sign-in unavailable</Text>
+                <Text style={[styles.error, { color: colors.error }]}>{error}</Text>
+                <PrimaryButton
+                  label="Try Again"
+                  colors={colors}
+                  disabled={isBusy}
+                  loading={isBusy}
+                  onPress={handleRetryConfig}
+                />
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+function isActiveSession(sessionRef: { current: number }, sessionId: number): boolean {
+  return sessionRef.current === sessionId;
+}
+
+interface ButtonColors {
+  primary: string;
+  primaryText: string;
+  muted: string;
+  pressed: string;
+}
+
+function PrimaryButton({
+  label,
+  colors,
+  disabled,
+  loading,
+  onPress,
+}: {
+  label: string;
+  colors: ButtonColors;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress(): void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.primaryButton,
+        {
+          backgroundColor: disabled ? colors.muted : colors.primary,
+          opacity: pressed && !disabled ? 0.9 : 1,
+        },
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={colors.primaryText} />
+      ) : (
+        <Text style={[styles.primaryButtonText, { color: colors.primaryText }]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+function TextButton({
+  label,
+  colors,
+  disabled,
+  onPress,
+}: {
+  label: string;
+  colors: ButtonColors;
+  disabled?: boolean;
+  onPress(): void;
+}) {
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress} disabled={disabled} style={styles.textButton}>
+      <Text style={[styles.textButtonLabel, { color: disabled ? colors.muted : colors.primary }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function normalizeAllowedTypes(config: IdentityConfig | null): IdentityType[] {
+  const allowed = config?.allowedIdentityTypes?.filter((type): type is IdentityType => type === 'email' || type === 'phone');
+  return allowed && allowed.length > 0 ? allowed : ['email'];
+}
+
+function resolveInitialIdentityType(
+  identity: string | undefined,
+  explicitType: IdentityType | undefined,
+  allowedTypes: IdentityType[]
+): IdentityType {
+  if (explicitType && allowedTypes.includes(explicitType)) return explicitType;
+  if (identity?.trim().startsWith('+') && allowedTypes.includes('phone')) return 'phone';
+  return allowedTypes.includes('email') ? 'email' : 'phone';
+}
+
+function getMethodsForIdentity(
+  config: IdentityConfig | null,
+  identityType: IdentityType,
+  passkeyProvider?: MobilePasskeyProvider
+): SupportedMethodId[] {
+  const configuredMethods = config?.methods ?? ['totp_email'];
+  return configuredMethods.filter((method): method is SupportedMethodId => {
+    if (!SUPPORTED_METHODS.has(method)) return false;
+    if (method === 'passkey') return identityType === 'email' && Boolean(passkeyProvider);
+    if (method === 'totp_email') return identityType === 'email';
+    return identityType === 'phone';
+  });
+}
+
+function parseIdentity(
+  value: string,
+  allowedTypes: IdentityType[]
+): { ok: true; identity: string; identityType: IdentityType } | { ok: false; error: string } {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { ok: false, error: 'Enter an identity to continue.' };
+  }
+
+  const inferredType: IdentityType = trimmed.startsWith('+') || /^\d/.test(trimmed) ? 'phone' : 'email';
+  if (!allowedTypes.includes(inferredType)) {
+    return {
+      ok: false,
+      error: inferredType === 'phone' ? 'Phone sign-in is not enabled for this app.' : 'Email sign-in is not enabled for this app.',
+    };
+  }
+
+  if (inferredType === 'email') {
+    const email = trimmed.toLowerCase();
+    if (!EMAIL_REGEX.test(email) || email.length > 254) {
+      return { ok: false, error: 'Enter a valid email address.' };
+    }
+    return { ok: true, identity: email, identityType: 'email' };
+  }
+
+  const phone = trimmed.startsWith('+') ? trimmed.replace(/[^\d+]/g, '') : `+${trimmed.replace(/\D/g, '')}`;
+  if (!E164_PHONE_REGEX.test(phone)) {
+    return { ok: false, error: 'Enter a valid phone number in international format.' };
+  }
+  return { ok: true, identity: phone, identityType: 'phone' };
+}
+
+function toTotpMethod(method: SupportedMethodId): TotpMethod | null {
+  if (method === 'totp_email') return 'email';
+  if (method === 'totp_sms') return 'sms';
+  if (method === 'totp_voice') return 'voice';
+  return null;
+}
+
+function fallbackTotpMethod(methods: SupportedMethodId[]): SupportedMethodId | null {
+  return methods.find((method) => method !== 'passkey') ?? null;
+}
+
+function fallbackLabel(method: SupportedMethodId): string {
+  if (method === 'totp_sms') return 'Use SMS code instead';
+  if (method === 'totp_voice') return 'Use voice call instead';
+  return 'Use email code instead';
+}
+
+function methodTitle(method: SupportedMethodId): string {
+  if (method === 'passkey') return 'Passkey';
+  if (method === 'totp_sms') return 'Text message';
+  if (method === 'totp_voice') return 'Voice call';
+  return 'Email code';
+}
+
+function methodDescription(method: SupportedMethodId): string {
+  if (method === 'passkey') return 'Use Face ID, Touch ID, or your device passcode.';
+  if (method === 'totp_sms') return 'Receive a one-time code by SMS.';
+  if (method === 'totp_voice') return 'Receive a one-time code by phone call.';
+  return 'Receive a one-time code by email.';
+}
+
+function identitySubtitle(allowedTypes: IdentityType[]): string {
+  if (allowedTypes.includes('email') && allowedTypes.includes('phone')) return 'Enter your email or phone number to continue.';
+  if (allowedTypes.includes('phone')) return 'Enter your phone number to continue.';
+  return 'Enter your email address to continue.';
+}
+
+function identityPlaceholder(allowedTypes: IdentityType[]): string {
+  if (allowedTypes.includes('email') && allowedTypes.includes('phone')) return 'name@company.com or +14155551234';
+  if (allowedTypes.includes('phone')) return '+14155551234';
+  return 'name@company.com';
+}
+
+function totpTitle(method: SupportedMethodId | null): string {
+  if (method === 'totp_sms') return 'Check your messages';
+  if (method === 'totp_voice') return 'Check your phone';
+  return 'Check your email';
+}
+
+function getHeaderLogo(branding: IdentityConfig['branding'], theme: 'light' | 'dark'): string | null {
+  if (!branding) return null;
+  return theme === 'dark'
+    ? branding.logoDark || branding.logoLight
+    : branding.logoLight || branding.logoDark;
+}
+
+function formatCountdown(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+function asError(value: unknown, fallback = 'Something went wrong'): Error {
+  if (value instanceof Error) return value;
+  if (typeof value === 'string') return new Error(value);
+  return new Error(fallback);
+}
+
+const lightColors = {
+  backdrop: 'rgba(15, 23, 42, 0.42)',
+  card: '#ffffff',
+  input: '#ffffff',
+  pressed: '#f8fafc',
+  text: '#0f172a',
+  muted: '#64748b',
+  placeholder: '#94a3b8',
+  border: '#e2e8f0',
+  primary: '#2563eb',
+  primaryText: '#ffffff',
+  primarySoft: '#dbeafe',
+  error: '#dc2626',
+};
+
+const darkColors = {
+  backdrop: 'rgba(2, 6, 23, 0.72)',
+  card: '#0f172a',
+  input: '#111827',
+  pressed: '#1e293b',
+  text: '#f8fafc',
+  muted: '#94a3b8',
+  placeholder: '#64748b',
+  border: '#334155',
+  primary: '#60a5fa',
+  primaryText: '#0f172a',
+  primarySoft: '#172554',
+  error: '#f87171',
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 20,
+  },
+  card: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 8,
+    padding: 20,
+    width: '100%',
+    maxWidth: 420,
+    alignSelf: 'center',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  header: {
+    minHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 18,
+  },
+  brand: {
+    minWidth: 0,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    marginRight: 10,
+  },
+  logoFallback: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  logoFallbackText: {
+    fontSize: 15,
+    fontWeight: '800',
+  },
+  companyName: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeText: {
+    fontSize: 20,
+    fontWeight: '500',
+    lineHeight: 22,
+  },
+  centerContent: {
+    minHeight: 180,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+  },
+  body: {
+    gap: 14,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '800',
+    letterSpacing: 0,
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  mutedText: {
+    fontSize: 14,
+  },
+  input: {
+    minHeight: 48,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    fontSize: 16,
+  },
+  pinInput: {
+    height: 56,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    fontSize: 26,
+    fontWeight: '700',
+    letterSpacing: 0,
+    textAlign: 'center',
+  },
+  countdown: {
+    fontSize: 13,
+    textAlign: 'center',
+  },
+  error: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  primaryButton: {
+    minHeight: 48,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  textButton: {
+    minHeight: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textButtonLabel: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  methodList: {
+    gap: 10,
+  },
+  methodButton: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 14,
+  },
+  methodTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    marginBottom: 4,
+  },
+  methodDescription: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  passkeyIcon: {
+    width: 76,
+    height: 76,
+    borderRadius: 38,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  passkeyIconText: {
+    fontSize: 18,
+    fontWeight: '800',
+  },
+});