LogoLogo
Useful links
  • Home
  • Product guides
  • API
  • SDKs
  • Overview
  • First steps
  • ANDROID
    • Getting Started with the SDK
    • Standalone Modules
      • Document Detector
        • Release Notes
        • Current Version
        • Requirements
        • Gradle Dependencies
        • Gradle Source Code
        • Setting up the SDK
          • Setting properties
          • Capture Stages
          • Messages Settings
          • Customization
          • Security Settings
          • Detection Steps
          • Upload Mode
          • Advanced Settings
            • Proxy configuration
            • Preview configuration
        • Start Document Detection
        • Source Code
        • Google security form
        • Reduce SDKs size
        • SDKs response
        • References
        • FAQ
      • Face Liveness
        • Release Notes
        • Current Version
        • Requirements
        • Gradle Dependencies
        • Gradle Source Code
        • SDK Lifecycle
        • Building the SDK
        • Start Liveness Verification
        • Source Code
        • References
        • Advanced Features
        • FAQ
      • Face Authenticator
        • Release Notes
      • Smart Auth
        • Release Notes
        • Current Version
        • Requirements
        • Gradle Dependencies
        • Gradle Source Code
        • Permissions
        • SDK Lifecycle
        • Building the SDK
        • Start Smart Authentication
        • Source Code
        • References
        • FAQ
      • Face Liveness (deprecated)
        • Release Notes
  • iOS
    • Getting Started with the SDK
    • Standalone Modules
      • Document Detector
        • Release Notes
        • Current Version
        • Requirements
        • Installing the SDK
        • Setting up the SDK
          • Setting properties
          • Messages Settings
          • Customization
          • Detection Steps
          • Upload Mode
          • Advanced Settings
            • Proxy configuration
            • Preview configuration
        • Start Document Detection
        • References
        • FAQ
      • Face Liveness
        • Release Notes
        • Installation
        • Current Version
        • Requirements
        • SDK Lifecycle
        • Building the SDK
        • Start Liveness Verification
        • Source Code
        • References
        • FAQ
      • Face Authenticator
        • Release Notes
        • Installation
        • Current Version
        • Requirements
        • Building the SDK
        • Start the SDK
        • References
        • FAQ
      • Smart Auth
        • Release Notes
        • Installation
        • Current Version
        • Requirements
        • SDK Lifecycle
        • Building the SDK
        • Start Smart Authentication
        • Source Code
        • References
        • FAQ
      • Face Liveness (deprecated)
        • Release Notes
  • REACT NATIVE
    • Standalone Modules
      • Document Detector
        • Release Notes
        • Current Version
        • Requirements
        • Installation
        • Hooks
        • Start Document Verification
        • Source Code
        • TypeScript References
        • Customizing Style
        • FAQ
      • Face Liveness
        • Release Notes
        • Current Version
        • Requirements
        • Installation
        • Hooks
        • Start Liveness Verification
        • Source Code
        • TypeScript References
        • FAQ
      • Face Authenticator
        • Release Notes
        • Current Version
        • Requirements
        • Installation
        • Hooks
        • Start Authentication Verification
        • Source Code
        • TypeScript References
        • FAQ
      • Smart Auth
        • Getting started
        • Release notes
        • Using Native Modules
          • Requirements
          • Gradle Source Code
          • Podfile Source Code
          • Native Module Android
          • Native Module iOS
          • Import Native Modules
          • Source Code
          • TypeScript References
          • FAQ
        • Using Expo Modules
          • Requirements
          • Create Local Expo Module
          • Gradle Source Code
          • Podspec Source Code
          • Native Module Android
          • Native Module iOS
          • Import Expo Modules
          • Source Code
          • TypeScript References
          • FAQ
  • WEB (JAVASCRIPT)
    • Standalone Modules
      • Document Detector
        • Getting started
        • SDK builder options
          • Analytics
          • Appearance
          • Messages
        • SDK methods
        • Event listeners
        • Customization
        • Release notes
      • Face Liveness
        • Customization
        • Release notes
      • Face Authenticator
        • Customization
        • Release notes
      • Smart Auth
        • SDK errors
        • Customization
        • Release notes
LogoLogo

2025 © Caf. - All rights reserved

On this page
  • How to Use the CafSmartAuth Native Module in React Native
  • 1. Create the module.ts File
  • 2. Create the useSmartAuth.ts Hook
  • 3. Available Methods
  • 4. Project Integration
  1. REACT NATIVE
  2. Standalone Modules
  3. Smart Auth
  4. Using Native Modules

Import Native Modules

How to Use the CafSmartAuth Native Module in React Native

This detailed guide explains how to integrate the CafSmartAuth native module into your React Native project using TypeScript. It includes creating a module and a custom hook to manage events and methods provided by the native SDK.

1. Create the module.ts File

This file imports the native module and sets up a NativeEventEmitter to handle events emitted by the module.

Example Implementation

import { NativeModules, NativeEventEmitter, Platform } from 'react-native';

const IS_ANDROID = Platform.OS === 'android';

const module = NativeModules.CafSmartAuthBridgeModule;

const moduleEventEmitter = IS_ANDROID
  ? new NativeEventEmitter()
  : new NativeEventEmitter(module);

export { module, moduleEventEmitter };

2. Create the useSmartAuth.ts Hook

This hook manages the events and state associated with the CafSmartAuth module. It uses the moduleEventEmitter to listen for events emitted by the native module.

Key Functions

  • formattedOptions: Formats the settings sent to the native module into JSON format.

  • useSmartAuth: Hook that:

    • Listens to events emitted by the native module.

    • Updates React state based on the events.

  • startSmartAuth: Method to initiate authentication using the native module.

  • requestLocationPermissions: Method to request location permissions from the user.

Example Implementation

import { useState, useEffect } from 'react';

import { module, moduleEventEmitter } from '../modules/CafSmartAuth';

import {
  CafSmartAuthSettings,
  CafSmartAuthResponse,
  CafSmartAuthSuccess,
  CafSmartAuthPending,
} from '../hooks/types';

let responseFormattedOptions: string = '';

const formattedOptions = (settings: CafSmartAuthSettings): string => {
  const formatToJSON = JSON.stringify({
    ...settings,
  });

  return formatToJSON;
};

const useSmartAuth = (settings?: CafSmartAuthSettings) => {
  const [response, setResponse] = useState<CafSmartAuthResponse>({
    success: {
      isAuthorized: false,
      attemptId: null,
      attestation: null,
    },
    error: null,
    cancelled: false,
    isLoading: false,
    pending: {
      isAuthorized: false,
      attestation: null,
    },
  });

  responseFormattedOptions = formattedOptions(settings!);

  useEffect(() => {
    moduleEventEmitter.addListener(
      'CafSmartAuth_Success',
      (event: CafSmartAuthSuccess) => {
        setResponse({
          success: {
            isAuthorized: event.isAuthorized,
            attemptId: event.attemptId,
            attestation: event.attestation,
          },
          error: null,
          cancelled: false,
          isLoading: false,
          pending: {
            isAuthorized: false,
            attestation: null,
          },
        });
      },
    );

    moduleEventEmitter.addListener('CafSmartAuth_Error', (event: string) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: event,
        cancelled: false,
        isLoading: false,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener('CafSmartAuth_Cancel', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: event,
        isLoading: false,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener(
      'CafSmartAuth_Pending',
      (event: CafSmartAuthPending) => {
        setResponse({
          success: {
            isAuthorized: false,
            attemptId: null,
            attestation: null,
          },
          error: null,
          cancelled: false,
          isLoading: false,
          pending: {
            isAuthorized: event.isAuthorized,
            attestation: event.attestation,
          },
        });
      },
    );

    moduleEventEmitter.addListener('CafSmartAuth_Loading', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: false,
        isLoading: event,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener('CafSmartAuth_Loaded', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: false,
        isLoading: event,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    return () => {
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Success');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Pending');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Error');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Cancel');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Loading');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Loaded');
    };
  }, []);

  return {
    success: response.success,
    error: response.error,
    cancelled: response.cancelled,
    pending: response.pending,
    isLoading: response.isLoading,
  };
};

const startSmartAuth = (
  mfaToken: string,
  faceAuthToken: string,
  policyId: string,
  personId: string,
) => {
  module.startSmartAuth(
    mfaToken,
    faceAuthToken,
    personId,
    policyId,
    responseFormattedOptions,
  );
};

const requestLocationPermissions = async () => {
  await module.requestLocationPermissions();
};

export { startSmartAuth, requestLocationPermissions, useSmartAuth };

3. Available Methods

  • useSmartAuth: A hook that provides the following states:

    • success: Information about successful authentications.

    • error: Details about errors that occurred.

    • cancelled: Indicates if the operation was cancelled.

    • pending: Information about pending authentications.

    • isLoading: Indicates if authentication is in progress.

  • startSmartAuth: Method to start the authentication process.

    • Parameters:

      • mfaToken: Multi-factor authentication token.

      • faceAuthToken: Token for facial authentication.

      • policyId: ID of the authentication policy.

      • personId: ID of the person to authenticate.

  • requestLocationPermissions: Method to request location permissions from the user (Android only).

4. Project Integration

Last updated 2 months ago

Here is how to implement the hook in your project, follow

SourceCode