Embedded OneSDK IDV + eKYC Flow

'use client'; // Indicates this is a client-side component
import OneSdk from '@frankieone/one-sdk';
import { useEffect, useRef, useState } from 'react';

// Assign environment variables to constants for customer ID, API key, and base URL
const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID;
const API_KEY = import.meta.env.VITE_API_KEY;
const FRANKIE_BASE_URL = import.meta.env.VITE_FRANKIE_BASE_URL;

/**
 * OneSDKHandler component initializes and manages the FrankieOne SDK instance.
 * @param {Object} config - Configuration object to override default SDK setup.
 * @returns {Object} - Returns the SDK instance, error, and loading state.
 */
const OneSDKHandler = ({ config }) => {
  // State hooks for managing SDK instance, error, and loading status
  const [oneSDKInstance, setOneSDKInstance] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  // useRef to track SDK initialization and prevent reinitialization
  const initializedRef = useRef(false);

  /**
   * Generates a base64-encoded token for authorization.
   * @returns {string} - Base64-encoded authorization string.
   */
  const parseAuthToken = () => btoa(`${CUSTOMER_ID}:${API_KEY}`);

  /**
   * Fetches a session token from the backend by authenticating
   * with the FrankieOne API.
   * @returns {Object|null} - Returns the session token or null on error.
   */
  const generateToken = async () => {
    try {
      const tokenResponse = await fetch(
        `${FRANKIE_BASE_URL}/auth/v2/machine-session`,
        {
          method: 'POST',
          headers: {
            authorization: `machine ${parseAuthToken()}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            permissions: {
              preset: 'one-sdk',
              reference: `demo-${new Date().toISOString()}`, // Optional: Custom reference
            },
          }),
        }
      );
      return await tokenResponse.json(); // Return the parsed response as JSON
    } catch (error) {
      setError(error.message); // Capture error message in state
      return null; // Return null in case of error
    }
  };

  /**
   * Initializes the OneSDK instance using the provided token and configuration.
   */
  const generateOneSDKInstance = async () => {
    setLoading(true); // Set loading to true while SDK is initializing

    // Fetch token from the backend
    const tokenSession = await generateToken();
    if (!tokenSession) return; // Exit if no valid token is fetched

    // Default SDK configuration, can be overridden by the `config` prop
    const defaultConfig = {
      mode: 'development', // Set mode to development (adjust as needed)
      recipe: {
        form: {
          provider: {
            name: 'react',
            googleApiKey: import.meta.env.VITE_GOOGLE_PLACES_API_KEY,
          },
        },
      },
    };

    const SDKConfig = config || defaultConfig; // Use the passed config or the default one

    try {
      // Initialize the OneSDK with the fetched token and configuration
      const oneSDKInit = await OneSdk({
        session: tokenSession,
        ...SDKConfig,
      });
      setOneSDKInstance(oneSDKInit); // Set SDK instance in state
    } catch (error) {
      setError(error.message); // Capture initialization errors
    } finally {
      setLoading(false); // Reset loading state after initialization
    }
  };

  /**
   * useEffect hook to initialize the SDK once on component mount.
   * Prevents reinitialization on re-render using `initializedRef`.
   */
  useEffect(() => {
    if (!initializedRef.current) {
      generateOneSDKInstance(); // Initialize the SDK instance
      initializedRef.current = true; // Set to true to prevent re-initialization
    }
  }, [config]); // Re-run if the config prop changes

  // Return SDK instance, error message (if any), and loading state
  return {
    oneSDKInstance,
    error,
    loading,
  };
};

export default OneSDKHandler;