@hexar/biometric-identity-sdk-react-native 1.0.0

package/README.md

@@ -0,0 +1,68 @@
+# Biometric Identity SDK - React Native
+
+React Native wrapper for the Biometric Identity SDK.
+
+## Installation
+
+```bash
+npm install @hexar/biometric-identity-sdk-react-native
+# or
+yarn add @hexar/biometric-identity-sdk-react-native
+```
+
+### Peer Dependencies
+
+```bash
+npm install react-native-vision-camera react-native-permissions
+```
+
+### iOS Setup
+
+Add to your `Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>We need camera access to capture your ID and verify your identity</string>
+```
+
+### Android Setup
+
+Add to your `AndroidManifest.xml`:
+
+```xml
+<uses-permission android:name="android.permission.CAMERA" />
+```
+
+## Usage
+
+```tsx
+import { BiometricIdentityFlow } from '@hexar/biometric-identity-sdk-react-native';
+
+function App() {
+  return (
+    <BiometricIdentityFlow
+      onValidationComplete={(result) => {
+        console.log('Validation complete:', result);
+      }}
+      onError={(error) => {
+        console.error('Validation error:', error);
+      }}
+      theme={{
+        primaryColor: '#6366F1',
+        backgroundColor: '#FFFFFF',
+      }}
+      language="en"
+    />
+  );
+}
+```
+
+## Props
+
+See main SDK documentation for detailed API reference.
+
+## License
+
+MIT
+
+

package/dist/components/BiometricIdentityFlow.d.ts

@@ -0,0 +1,17 @@
+/**
+ * React Native Biometric Identity Flow Component
+ * Main UI component for identity verification with backend AI support
+ */
+import React from 'react';
+import { ValidationResult, ThemeConfig, BiometricError, SupportedLanguage } from '@hexar/biometric-identity-sdk-core';
+export interface BiometricIdentityFlowProps {
+    onValidationComplete: (result: ValidationResult) => void;
+    onError: (error: BiometricError) => void;
+    theme?: ThemeConfig;
+    language?: SupportedLanguage;
+    customTranslations?: Record<string, string>;
+    smartLivenessMode?: boolean;
+}
+export declare const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps>;
+export default BiometricIdentityFlow;
+//# sourceMappingURL=BiometricIdentityFlow.d.ts.map

package/dist/components/BiometricIdentityFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BiometricIdentityFlow.d.ts","sourceRoot":"","sources":["../../src/components/BiometricIdentityFlow.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,EAId,iBAAiB,EAClB,MAAM,oCAAoC,CAAC;AAU5C,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAkStE,CAAC;AAiOF,eAAe,qBAAqB,CAAC"}

package/dist/components/BiometricIdentityFlow.js

@@ -0,0 +1,366 @@
+"use strict";
+/**
+ * React Native Biometric Identity Flow Component
+ * Main UI component for identity verification with backend AI support
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BiometricIdentityFlow = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const biometric_identity_sdk_core_1 = require("@hexar/biometric-identity-sdk-core");
+const useBiometricSDK_1 = require("../hooks/useBiometricSDK");
+const CameraCapture_1 = require("./CameraCapture");
+const VideoRecorder_1 = require("./VideoRecorder");
+const ValidationProgress_1 = require("./ValidationProgress");
+const ResultScreen_1 = require("./ResultScreen");
+const ErrorScreen_1 = require("./ErrorScreen");
+const InstructionsScreen_1 = require("./InstructionsScreen");
+const BiometricIdentityFlow = ({ onValidationComplete, onError, theme, language = 'en', customTranslations, smartLivenessMode = true, }) => {
+    const { sdk, state, isInitialized, isUsingBackend, challenges, uploadFrontID, uploadBackID, storeVideoRecording, fetchChallenges, validateIdentity, reset, } = (0, useBiometricSDK_1.useBiometricSDK)();
+    const [showCamera, setShowCamera] = (0, react_1.useState)(false);
+    const [cameraMode, setCameraMode] = (0, react_1.useState)('front');
+    const [showInstructions, setShowInstructions] = (0, react_1.useState)(true);
+    const [currentChallenges, setCurrentChallenges] = (0, react_1.useState)([]);
+    const [isLoadingChallenges, setIsLoadingChallenges] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        (0, biometric_identity_sdk_core_1.setLanguage)(language);
+    }, [language]);
+    const strings = (0, biometric_identity_sdk_core_1.getStrings)();
+    const styles = createStyles(theme);
+    // Handle validation result
+    (0, react_1.useEffect)(() => {
+        if (state.validationResult) {
+            onValidationComplete(state.validationResult);
+        }
+    }, [state.validationResult, onValidationComplete]);
+    // Handle error
+    (0, react_1.useEffect)(() => {
+        if (state.error) {
+            onError(state.error);
+        }
+    }, [state.error, onError]);
+    /**
+     * Start capture process
+     */
+    const handleCaptureStart = (0, react_1.useCallback)(async (mode) => {
+        setCameraMode(mode);
+        // If video mode, fetch challenges first
+        if (mode === 'video' && smartLivenessMode && isUsingBackend) {
+            setIsLoadingChallenges(true);
+            try {
+                const challenges = await fetchChallenges('active');
+                setCurrentChallenges(challenges);
+            }
+            catch (error) {
+                console.warn('Failed to fetch challenges, using defaults');
+                setCurrentChallenges(sdk.getDefaultChallenges());
+            }
+            setIsLoadingChallenges(false);
+        }
+        else if (mode === 'video' && smartLivenessMode) {
+            // Use default challenges for offline mode
+            setCurrentChallenges(sdk.getDefaultChallenges());
+        }
+        setShowCamera(true);
+    }, [smartLivenessMode, isUsingBackend, fetchChallenges, sdk]);
+    /**
+     * Handle capture completion
+     */
+    const handleCaptureComplete = (0, react_1.useCallback)(async (data) => {
+        setShowCamera(false);
+        try {
+            if (cameraMode === 'front') {
+                await uploadFrontID(data);
+            }
+            else if (cameraMode === 'back') {
+                await uploadBackID(data);
+            }
+            else if (cameraMode === 'video') {
+                // Handle video recording result
+                const videoResult = data;
+                await storeVideoRecording({
+                    frames: videoResult.frames,
+                    duration: videoResult.duration,
+                    instructionsFollowed: videoResult.instructionsFollowed,
+                    qualityScore: videoResult.qualityScore,
+                    challengesCompleted: videoResult.challengesCompleted,
+                    sessionId: videoResult.sessionId,
+                });
+                // Automatically start validation after video
+                await validateIdentity();
+            }
+        }
+        catch (error) {
+            console.error('Capture error:', error);
+            onError({
+                name: 'BiometricError',
+                message: error instanceof Error ? error.message : 'Unknown error during capture',
+                code: 'LIVENESS_CHECK_FAILED',
+            });
+        }
+    }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, onError]);
+    /**
+     * Handle retry
+     */
+    const handleRetry = (0, react_1.useCallback)(() => {
+        reset();
+        setCurrentChallenges([]);
+        setShowInstructions(true);
+    }, [reset]);
+    // Show loading while initializing
+    if (!isInitialized) {
+        return (react_1.default.createElement(react_native_1.SafeAreaView, { style: styles.container },
+            react_1.default.createElement(react_native_1.View, { style: styles.loadingFullScreen },
+                react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
+                react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, strings.initialization.initializing))));
+    }
+    // Show instructions on first load
+    if (showInstructions) {
+        return (react_1.default.createElement(InstructionsScreen_1.InstructionsScreen, { theme: theme, language: language, onStart: () => setShowInstructions(false) }));
+    }
+    // Show camera/video recorder
+    if (showCamera) {
+        if (cameraMode === 'video') {
+            return (react_1.default.createElement(VideoRecorder_1.VideoRecorder, { theme: theme, challenges: currentChallenges, smartMode: smartLivenessMode, sessionId: sdk.getSessionId() || undefined, onComplete: handleCaptureComplete, onCancel: () => setShowCamera(false), onFetchChallenges: async () => {
+                    const challenges = await fetchChallenges('active');
+                    return challenges;
+                } }));
+        }
+        return (react_1.default.createElement(CameraCapture_1.CameraCapture, { mode: cameraMode, theme: theme, onCapture: handleCaptureComplete, onCancel: () => setShowCamera(false) }));
+    }
+    // Show validation progress
+    if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.VALIDATING) {
+        return (react_1.default.createElement(ValidationProgress_1.ValidationProgress, { progress: state.progress, theme: theme, language: language }));
+    }
+    // Show result
+    if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.RESULT && state.validationResult) {
+        return (react_1.default.createElement(ResultScreen_1.ResultScreen, { result: state.validationResult, theme: theme, language: language, onClose: () => onValidationComplete(state.validationResult) }));
+    }
+    // Show error
+    if (state.currentStep === biometric_identity_sdk_core_1.SDKStep.ERROR && state.error) {
+        return (react_1.default.createElement(ErrorScreen_1.ErrorScreen, { error: state.error, theme: theme, language: language, onRetry: handleRetry, onClose: () => onError(state.error) }));
+    }
+    return (react_1.default.createElement(react_native_1.SafeAreaView, { style: styles.container },
+        react_1.default.createElement(react_native_1.View, { style: styles.content },
+            react_1.default.createElement(react_native_1.Text, { style: styles.title }, strings.instructions.title),
+            react_1.default.createElement(react_native_1.Text, { style: styles.subtitle }, strings.instructions.subtitle),
+            isUsingBackend && (react_1.default.createElement(react_native_1.View, { style: styles.backendBadge },
+                react_1.default.createElement(react_native_1.View, { style: styles.backendDot }),
+                react_1.default.createElement(react_native_1.Text, { style: styles.backendText }, strings.badges.secureVerification))),
+            react_1.default.createElement(react_native_1.View, { style: styles.progressContainer },
+                react_1.default.createElement(StepIndicator, { step: 1, active: state.currentStep === biometric_identity_sdk_core_1.SDKStep.CAPTURE_FRONT_ID, completed: !!state.frontID, label: strings.steps.frontId, theme: theme }),
+                react_1.default.createElement(react_native_1.View, { style: styles.stepConnector }),
+                react_1.default.createElement(StepIndicator, { step: 2, active: state.currentStep === biometric_identity_sdk_core_1.SDKStep.CAPTURE_BACK_ID, completed: !!state.backID, label: strings.steps.backId, theme: theme }),
+                react_1.default.createElement(react_native_1.View, { style: styles.stepConnector }),
+                react_1.default.createElement(StepIndicator, { step: 3, active: state.currentStep === biometric_identity_sdk_core_1.SDKStep.RECORD_LIVENESS, completed: !!state.videoData, label: strings.steps.faceVideo, theme: theme })),
+            react_1.default.createElement(react_native_1.View, { style: styles.actionsContainer },
+                !state.frontID && (react_1.default.createElement(ActionButton, { title: strings.capture.frontId.button, subtitle: strings.capture.frontId.instruction, onPress: () => handleCaptureStart('front'), theme: theme, disabled: state.isLoading })),
+                state.frontID && !state.backID && (react_1.default.createElement(ActionButton, { title: strings.capture.backId.button, subtitle: strings.capture.backId.instruction, onPress: () => handleCaptureStart('back'), theme: theme, disabled: state.isLoading })),
+                state.frontID && state.backID && !state.videoData && (react_1.default.createElement(ActionButton, { title: strings.liveness.title, subtitle: strings.liveness.instructions.stayStill, onPress: () => handleCaptureStart('video'), theme: theme, disabled: state.isLoading || isLoadingChallenges }))),
+            (state.isLoading || isLoadingChallenges) && (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
+                react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
+                react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, isLoadingChallenges ? strings.liveness.preparing : strings.common.loading))))));
+};
+exports.BiometricIdentityFlow = BiometricIdentityFlow;
+const StepIndicator = ({ step, active, completed, label, theme, }) => {
+    const primaryColor = theme?.primaryColor || '#6366F1';
+    const successColor = theme?.successColor || '#10B981';
+    return (react_1.default.createElement(react_native_1.View, { style: stepStyles.container },
+        react_1.default.createElement(react_native_1.View, { style: [
+                stepStyles.circle,
+                active && { backgroundColor: primaryColor, borderColor: primaryColor },
+                completed && { backgroundColor: successColor, borderColor: successColor },
+            ] },
+            react_1.default.createElement(react_native_1.Text, { style: [stepStyles.stepNumber, (active || completed) && stepStyles.stepNumberActive] }, completed ? '✓' : step)),
+        react_1.default.createElement(react_native_1.Text, { style: [stepStyles.label, active && { color: primaryColor }] }, label)));
+};
+const stepStyles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    circle: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: '#F3F4F6',
+        borderWidth: 2,
+        borderColor: '#E5E7EB',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    stepNumber: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    stepNumberActive: {
+        color: '#FFFFFF',
+    },
+    label: {
+        marginTop: 8,
+        fontSize: 12,
+        color: '#6B7280',
+        textAlign: 'center',
+    },
+});
+const ActionButton = ({ title, subtitle, onPress, theme, disabled, }) => {
+    const primaryColor = theme?.primaryColor || '#6366F1';
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+            buttonStyles.button,
+            { backgroundColor: primaryColor },
+            disabled && buttonStyles.buttonDisabled,
+        ], onPress: onPress, disabled: disabled },
+        react_1.default.createElement(react_native_1.Text, { style: buttonStyles.buttonText }, title),
+        subtitle && (react_1.default.createElement(react_native_1.Text, { style: buttonStyles.buttonSubtext }, subtitle))));
+};
+const buttonStyles = react_native_1.StyleSheet.create({
+    button: {
+        paddingVertical: 16,
+        paddingHorizontal: 32,
+        borderRadius: 12,
+        alignItems: 'center',
+        marginVertical: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    buttonDisabled: {
+        opacity: 0.5,
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 18,
+        fontWeight: '700',
+    },
+    buttonSubtext: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 13,
+        marginTop: 4,
+    },
+});
+// Create styles based on theme
+const createStyles = (theme) => {
+    const backgroundColor = theme?.backgroundColor || '#FFFFFF';
+    const textColor = theme?.textColor || '#000000';
+    const secondaryTextColor = theme?.secondaryTextColor || '#6B7280';
+    const primaryColor = theme?.primaryColor || '#6366F1';
+    return react_native_1.StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor,
+        },
+        content: {
+            flex: 1,
+            padding: 24,
+        },
+        title: {
+            fontSize: 28,
+            fontWeight: 'bold',
+            color: textColor,
+            marginBottom: 8,
+            textAlign: 'center',
+        },
+        subtitle: {
+            fontSize: 16,
+            color: secondaryTextColor,
+            marginBottom: 24,
+            textAlign: 'center',
+        },
+        backendBadge: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+            paddingHorizontal: 12,
+            paddingVertical: 6,
+            borderRadius: 16,
+            alignSelf: 'center',
+            marginBottom: 24,
+        },
+        backendDot: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: '#10B981',
+            marginRight: 8,
+        },
+        backendText: {
+            color: '#10B981',
+            fontSize: 12,
+            fontWeight: '600',
+        },
+        progressContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            marginBottom: 48,
+            paddingHorizontal: 16,
+        },
+        stepConnector: {
+            flex: 0.5,
+            height: 2,
+            backgroundColor: '#E5E7EB',
+            marginHorizontal: -10,
+        },
+        actionsContainer: {
+            marginTop: 24,
+        },
+        loadingContainer: {
+            marginTop: 32,
+            alignItems: 'center',
+        },
+        loadingFullScreen: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        loadingText: {
+            marginTop: 12,
+            fontSize: 14,
+            color: secondaryTextColor,
+        },
+        loadingSubtext: {
+            marginTop: 4,
+            fontSize: 12,
+            color: secondaryTextColor,
+            opacity: 0.7,
+        },
+    });
+};
+exports.default = exports.BiometricIdentityFlow;

package/dist/components/CameraCapture.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Camera Capture Component for React Native
+ * Handles ID document photo capture
+ */
+import React from 'react';
+import { ThemeConfig } from '@hexar/biometric-identity-sdk-core';
+export interface CameraCaptureProps {
+    mode: 'front' | 'back';
+    theme?: ThemeConfig;
+    onCapture: (imageData: string) => void;
+    onCancel: () => void;
+}
+export declare const CameraCapture: React.FC<CameraCaptureProps>;
+export default CameraCapture;
+//# sourceMappingURL=CameraCapture.d.ts.map

package/dist/components/CameraCapture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraCapture.d.ts","sourceRoot":"","sources":["../../src/components/CameraCapture.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAIjE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6FtD,CAAC;AA6IF,eAAe,aAAa,CAAC"}