@myazahq/kyc-sdk-react-native 2.6.0 → 3.0.0

package/src/MyazaBiometricAuth.tsx

@@ -1,119 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Modal, Platform } from 'react-native';
-
-import { KycRuntimeProvider, MyazaThemeProvider } from './components/runtime';
-import { MyazaButton } from './components/MyazaButton';
-import { BiometricAuthFlow } from './screens/biometric/BiometricAuthFlow';
-import { primeFaceModel } from './liveness/visionCameraFaceDetector';
-import { defaultReauthLabel } from './lib/biometric-auth';
-import type { KYCAppearance, ResolvedKYCConfig, SupportedCountry } from './types/config';
-import type { KYCError } from './types/verification';
-import type { BiometricAuthResponse } from './services/api-types-biometric';
-
-// ---------------------------------------------------------------------------
-// MyazaBiometricAuth — returning-user face re-authentication ("prove it's
-// still you"). Mirrors the web SDK's MyazaBiometricAuth: a verified user
-// re-authenticates with a live selfie matched 1:1 against their enrollment
-// reference (no gov-DB call, no re-KYC). Self-contained: its own trigger +
-// modal, hosting the SDK's real liveness step inside a scoped runtime.
-// ---------------------------------------------------------------------------
-
-export interface MyazaBiometricAuthProps {
-  /** Publishable API key (`pk_…`). The environment is derived from its prefix. */
-  apiKey: string;
-  /** Dev-only base-URL override for `pk_dev_` keys. */
-  devUrl?: string;
-  /** The org's user reference (Entity.externalUserId) to re-authenticate. */
-  externalUserId: string;
-  /** Presence Intelligence method (default 'gestures'). */
-  livenessMode?: 'gestures' | 'flash' | 'both';
-  flashSequenceLength?: number;
-  appearance?: KYCAppearance;
-  disableClose?: boolean;
-  /** Open the modal on mount (no trigger button is rendered). */
-  defaultOpen?: boolean;
-  /** Custom trigger label (default "Verify it's you"). */
-  children?: string;
-  disabled?: boolean;
-  onOpen?: () => void;
-  /** The user re-authenticated. `token` is a single-use proof — verify it from
-   *  your backend with a secret key at `/biometric/verify-proof`. */
-  onAuthenticated?: (result: { attemptId: string; confidence: number | null; token?: string }) => void;
-  /** The check ran but the user did not pass (no match / liveness failed). */
-  onFailed?: (result: { status: BiometricAuthResponse['status']; attemptId: string; confidence: number | null }) => void;
-  /** A technical error (network, not enrolled, insufficient credits, …). */
-  onError?: (error: KYCError) => void;
-  onClose?: () => void;
-}
-
-const MODAL_PRESENTATION = Platform.OS === 'ios' ? 'pageSheet' : 'fullScreen';
-
-export function MyazaBiometricAuth(props: MyazaBiometricAuthProps): React.ReactElement {
-  const { children, disabled, defaultOpen, onOpen, onAuthenticated, onFailed, onError, onClose } = props;
-  const [open, setOpen] = useState(defaultOpen === true);
-
-  // The liveness step reads exactly the keys a KYC flow's config carries; the
-  // scope parks the step order on consent → liveness → submitted, and the
-  // flow only ever mounts the middle one. `country` is required by the
-  // resolved shape but nothing on this path reads it.
-  const config: ResolvedKYCConfig = {
-    apiKey: props.apiKey,
-    devUrl: props.devUrl,
-    country: 'NG' as SupportedCountry,
-    scope: 'biometric-authentication',
-    enableSelfie: true,
-    livenessMode: props.livenessMode ?? 'gestures',
-    flashSequenceLength: props.flashSequenceLength,
-    appearance: props.appearance,
-    disableClose: props.disableClose,
-    userId: props.externalUserId,
-    onError,
-  };
-
-  const openFlow = useCallback(() => {
-    void primeFaceModel();
-    setOpen(true);
-    onOpen?.();
-  }, [onOpen]);
-  const close = useCallback(() => {
-    setOpen(false);
-    onClose?.();
-  }, [onClose]);
-  const blockDismiss = props.disableClose === true;
-
-  return (
-    <MyazaThemeProvider appearance={props.appearance}>
-      {defaultOpen !== true && (
-        <MyazaButton
-          label={children ?? defaultReauthLabel(props.appearance?.companyName)}
-          disabled={disabled}
-          fullWidth={false}
-          onPress={openFlow}
-        />
-      )}
-      <Modal
-        visible={open}
-        animationType="slide"
-        presentationStyle={blockDismiss ? 'fullScreen' : MODAL_PRESENTATION}
-        statusBarTranslucent
-        navigationBarTranslucent
-        onRequestClose={blockDismiss ? () => undefined : close}
-        onDismiss={blockDismiss ? undefined : close}
-      >
-        {open ? (
-          // A fresh store per open: the runtime provider creates it once per
-          // mount, and the modal's children mount once per open.
-          <KycRuntimeProvider config={config}>
-            <BiometricAuthFlow
-              externalUserId={props.externalUserId}
-              onAuthenticated={(r) => onAuthenticated?.({ attemptId: r.attemptId, confidence: r.confidence, token: r.token })}
-              onFailed={(r) => onFailed?.({ status: r.status, attemptId: r.attemptId, confidence: r.confidence })}
-              onError={onError}
-              onClose={close}
-            />
-          </KycRuntimeProvider>
-        ) : null}
-      </Modal>
-    </MyazaThemeProvider>
-  );
-}

package/src/lib/biometric-auth.ts

@@ -1,52 +0,0 @@
-import { KYCApiError } from '../services/api';
-import { KYCError } from '../types/verification';
-import type { BiometricAuthResponse } from '../services/api-types-biometric';
-
-// ---------------------------------------------------------------------------
-// Biometric re-authentication — the pure half. Mirrors the web SDK's
-// MyazaBiometricAuth error mapping and outcome shapes (keep in lockstep).
-// ---------------------------------------------------------------------------
-
-export type BiometricAuthOutcome =
-  | { kind: 'success'; result: BiometricAuthResponse }
-  | { kind: 'failed'; result: BiometricAuthResponse }
-  | { kind: 'error'; message: string };
-
-export interface BiometricAuthenticated {
-  attemptId: string;
-  confidence: number | null;
-  /** Single-use proof; verify from your backend at `/biometric/verify-proof`. */
-  token?: string;
-}
-
-export interface BiometricAuthFailed {
-  status: BiometricAuthResponse['status'];
-  attemptId: string;
-  confidence: number | null;
-}
-
-/** A technical failure, in the SDK's typed vocabulary + a message a person
- *  can read. Never the server's own wording — that is an internal contract. */
-export function mapAuthError(err: unknown): KYCError {
-  if (err instanceof KYCApiError) {
-    if (err.statusCode === 404 && err.code === 'not_enrolled') {
-      return new KYCError('unknown', "You're not set up for face verification yet.");
-    }
-    if (err.statusCode === 402) {
-      return new KYCError('insufficient_credits', 'Face verification is temporarily unavailable.');
-    }
-    if (err.statusCode === 401 || err.statusCode === 403) {
-      return new KYCError('invalid_api_key', 'This app is not authorised for face verification.');
-    }
-  }
-  return new KYCError('network_error', 'Something went wrong. Please try again.');
-}
-
-/** The verdict as the callbacks and the result screen read it. */
-export function outcomeOf(result: BiometricAuthResponse): BiometricAuthOutcome {
-  return result.authenticated ? { kind: 'success', result } : { kind: 'failed', result };
-}
-
-export function defaultReauthLabel(companyName?: string): string {
-  return companyName ? `Verify it's you with ${companyName}` : "Verify it's you";
-}

package/src/screens/biometric/BiometricAuthFlow.tsx

@@ -1,170 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Pressable, View } from 'react-native';
-
-import { spacing } from '../../config/theme';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../../components/runtime';
-import { KycSheet } from '../../components/KycSheet';
-import { ToastProvider } from '../../components/toast';
-import { MyazaText } from '../../components/Typography';
-import { MyazaButton } from '../../components/MyazaButton';
-import { Icon } from '../../components/Icon';
-import { LivenessStep } from '../LivenessStep';
-import { mapAuthError, outcomeOf, type BiometricAuthOutcome } from '../../lib/biometric-auth';
-import type { KYCError } from '../../types/verification';
-import type { BiometricAuthResponse } from '../../services/api-types-biometric';
-
-// ---------------------------------------------------------------------------
-// The re-auth flow inside its own runtime: intro → the REAL liveness step →
-// authenticating → result. The liveness step is the ordinary one — camera,
-// challenges, capture ring, selfie upload — mounted alone with the store
-// parked on 'liveness'. Its Continue advances the store to 'submitted' (the
-// scope's step order), which is the hand-over: the uploaded selfie's mediaId
-// is read off the store and sent to /biometric/authenticate. The submitted
-// screen is never rendered, so nothing ever calls /verify.
-// ---------------------------------------------------------------------------
-
-type View_ = 'intro' | 'capture' | 'authenticating' | 'result';
-
-export function BiometricAuthFlow({
-  externalUserId,
-  onAuthenticated,
-  onFailed,
-  onError,
-  onClose,
-}: {
-  externalUserId: string;
-  onAuthenticated?: (result: BiometricAuthResponse) => void;
-  onFailed?: (result: BiometricAuthResponse) => void;
-  onError?: (error: KYCError) => void;
-  onClose: () => void;
-}): React.ReactElement {
-  const config = useKycConfig();
-  const store = useKycStore();
-  const currentStep = useKyc((s) => s.currentStep);
-  const selfieId = useKyc((s) => s.mediaIds.selfie);
-  const immersive = useKyc((s) => s.immersiveCapture);
-  const [view, setView] = useState<View_>('intro');
-  const [outcome, setOutcome] = useState<BiometricAuthOutcome | null>(null);
-  const inFlight = useRef(false);
-
-  const startCapture = () => {
-    store.setState({ currentStep: 'liveness', mediaIds: {}, selfiePreviewUri: null });
-    setOutcome(null);
-    setView('capture');
-  };
-
-  // The hand-over: the step's Continue moved the store past 'liveness' with
-  // the selfie uploaded.
-  useEffect(() => {
-    if (view !== 'capture' || currentStep === 'liveness' || !selfieId || inFlight.current) return;
-    inFlight.current = true;
-    setView('authenticating');
-    const mode = config.livenessMode ?? 'gestures';
-    store
-      .getState()
-      .api.authenticate({ externalUserId, selfie: selfieId, liveness: { mode, passed: true } })
-      .then((result) => {
-        const next = outcomeOf(result);
-        setOutcome(next);
-        if (next.kind === 'success') onAuthenticated?.(result);
-        else onFailed?.(result);
-      })
-      .catch((err: unknown) => {
-        const kyc = mapAuthError(err);
-        setOutcome({ kind: 'error', message: kyc.message });
-        onError?.(kyc);
-      })
-      .finally(() => {
-        inFlight.current = false;
-        setView('result');
-      });
-  }, [view, currentStep, selfieId, config.livenessMode, externalUserId, store, onAuthenticated, onFailed, onError]);
-
-  const title =
-    view === 'capture' ? 'Face check' : view === 'authenticating' ? "Verifying it's you" : "Verify it's you";
-  const dismissBlocked = config.disableClose === true || view === 'authenticating';
-
-  return (
-    <ToastProvider>
-      <KycSheet
-        title={title}
-        description={view === 'capture' ? 'Follow the prompts, then hold still for the photo.' : null}
-        progress={null}
-        stepCount={null}
-        onBack={view === 'capture' ? () => setView('intro') : null}
-        onClose={dismissBlocked ? () => undefined : onClose}
-        immersive={immersive}
-      >
-        {view === 'intro' && <Intro onStart={startCapture} />}
-        {view === 'capture' && <LivenessStep />}
-        {view === 'authenticating' && <Authenticating />}
-        {view === 'result' && outcome && <Result outcome={outcome} onRetry={startCapture} onClose={onClose} />}
-      </KycSheet>
-    </ToastProvider>
-  );
-}
-
-function Intro({ onStart }: { onStart: () => void }): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <View style={{ alignItems: 'center', paddingVertical: spacing.lg }}>
-      <View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: `${colors.primary}1A`, alignItems: 'center', justifyContent: 'center' }}>
-        <Icon name="user" size={36} color={colors.primary} />
-      </View>
-      <View style={{ height: spacing.lg }} />
-      <MyazaText variant="body" style={{ textAlign: 'center' }} color={colors.textSecondary}>
-        We'll take a quick face check to confirm your identity. No documents needed.
-      </MyazaText>
-      <View style={{ height: spacing.xl }} />
-      <MyazaButton label="Start" onPress={onStart} />
-    </View>
-  );
-}
-
-function Authenticating(): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <View style={{ alignItems: 'center', paddingVertical: spacing.xl * 2 }}>
-      <ActivityIndicator size="large" color={colors.primary} />
-      <View style={{ height: spacing.lg }} />
-      <MyazaText variant="body" style={{ fontWeight: '600' }}>Verifying it's you…</MyazaText>
-      <MyazaText variant="bodySmall" color={colors.textSecondary}>This only takes a moment.</MyazaText>
-    </View>
-  );
-}
-
-function Result({ outcome, onRetry, onClose }: { outcome: BiometricAuthOutcome; onRetry: () => void; onClose: () => void }): React.ReactElement {
-  const { colors } = useTheme();
-  const ok = outcome.kind === 'success';
-  const tint = ok ? colors.success : colors.error;
-  const heading = ok ? "You're verified" : outcome.kind === 'failed' ? "Couldn't verify you" : 'Something went wrong';
-  const detail = ok
-    ? "We confirmed it's really you."
-    : outcome.kind === 'failed'
-      ? "We couldn't confirm it's you. Make sure your face is clear and well lit, then try again."
-      : outcome.message;
-  return (
-    <View style={{ alignItems: 'center', paddingVertical: spacing.lg }}>
-      <View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: `${tint}1A`, alignItems: 'center', justifyContent: 'center' }}>
-        {/* The web's result: a check, or the alert circle the flow's own
-            verdict screen uses (never a bare X), under a heading-font title. */}
-        <Icon name={ok ? 'check' : 'alert'} size={36} color={tint} />
-      </View>
-      <View style={{ height: spacing.lg }} />
-      <MyazaText variant="heading2" style={{ textAlign: 'center' }}>{heading}</MyazaText>
-      <View style={{ height: spacing.xs }} />
-      <MyazaText variant="body" color={colors.textSecondary} style={{ textAlign: 'center' }}>{detail}</MyazaText>
-      <View style={{ height: spacing.xl }} />
-      {ok ? (
-        <MyazaButton label="Done" onPress={onClose} />
-      ) : (
-        <>
-          <MyazaButton label="Try again" onPress={onRetry} />
-          <Pressable onPress={onClose} accessibilityRole="button" hitSlop={8} style={{ paddingVertical: spacing.md }}>
-            <MyazaText variant="body" color={colors.textSecondary}>Close</MyazaText>
-          </Pressable>
-        </>
-      )}
-    </View>
-  );
-}

package/src/services/api-biometric.ts

@@ -1,37 +0,0 @@
-import type {
-  BiometricAuthRequest,
-  BiometricAuthResponse,
-  BiometricStatusResponse,
-} from './api-types-biometric';
-
-// ---------------------------------------------------------------------------
-// The biometric re-authentication calls, split out of createKYCApi (200-line
-// rule). Given the client's own `request`, so they ride the same base URL,
-// bearer key, SDK-version header and error mapping as everything else.
-// ---------------------------------------------------------------------------
-
-export type JsonRequest = <T>(path: string, init?: RequestInit) => Promise<T>;
-
-export function biometricCalls(request: JsonRequest) {
-  return {
-    /**
-     * Re-authenticate a verified user by matching a live selfie 1:1 against
-     * their KYC enrollment reference. Publishable-safe. Uniform 404
-     * `not_enrolled` — a missing entity, a business entity and no template
-     * all answer the same, so nothing can be probed.
-     */
-    async authenticate(body: BiometricAuthRequest): Promise<BiometricAuthResponse> {
-      return request<BiometricAuthResponse>('/biometric/authenticate', {
-        method: 'POST',
-        body: JSON.stringify(body),
-      });
-    },
-
-    /** Whether a user is enrolled for face re-auth (whether to OFFER it). */
-    async getBiometricStatus(externalUserId: string): Promise<BiometricStatusResponse> {
-      return request<BiometricStatusResponse>(
-        `/biometric/status/${encodeURIComponent(externalUserId)}`,
-      );
-    },
-  };
-}

package/src/services/api-types-biometric.ts

@@ -1,41 +0,0 @@
-// ---------------------------------------------------------------------------
-// Biometric re-authentication wire shapes — a mirror of the web SDK's
-// services/api.ts (keep the two in lockstep). Publishable-safe: the verdict,
-// a confidence, and a single-use proof token. No PII.
-// ---------------------------------------------------------------------------
-
-/** What the SDK asserts about the liveness run that produced the selfie. */
-export interface BiometricLivenessClaim {
-  mode: 'gestures' | 'flash' | 'both';
-  passed: boolean;
-}
-
-/** Request body for `POST /api/kyc/biometric/authenticate`. */
-export interface BiometricAuthRequest {
-  /** The org's user reference (Entity.externalUserId) being re-authenticated. */
-  externalUserId: string;
-  /** A mediaId from `upload(file, 'selfie')` — the live selfie. */
-  selfie: string;
-  liveness?: BiometricLivenessClaim;
-}
-
-/**
- * Response from `POST /api/kyc/biometric/authenticate`. `token` is present
- * only on `authenticated` — redeem it from your backend with a secret key at
- * `/biometric/verify-proof`.
- */
-export interface BiometricAuthResponse {
-  authenticated: boolean;
-  status: 'authenticated' | 'no_match' | 'liveness_failed';
-  confidence: number | null;
-  live: boolean;
-  attemptId: string;
-  token?: string;
-}
-
-/** Response from `GET /api/kyc/biometric/status/:externalUserId`. */
-export interface BiometricStatusResponse {
-  enrolled: boolean;
-  enrolledAt?: string;
-  lastAuthenticatedAt?: string | null;
-}