React

This guide walks you through integrating OneSDK with React, providing you with a solid foundation for building secure and efficient KYC workflows.

Quick Start

1

Create Your React Project

Choose your preferred bundler:

$npm create vite@latest my-react-app -- --template react
2

Install Dependencies

$cd my-react-app
>npm install
>npm install @frankieone/one-sdk
3

Start Development

$npm run dev  # for Vite
># or
>npm start    # for Create React App

Configuration

Add this configuration to your vite.config.js:

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react";
3
4export default defineConfig({
5  plugins: [react()],
6  define: {
7    "process.env": {},
8  },
9});

Based on your build tool and/or framework, you may have a different prefix to the environment variables, e.g. if you’re using Vite, your env prefix is going to be “VITE_” instead of “REACT_APP_“

Create a .env file with your credentials:

$REACT_APP_CUSTOMER_ID=your_customer_id
>REACT_APP_API_KEY=your_api_key
>REACT_APP_CHILD_ID=your_child_id    # optional

Integration with React

Custom Hook Implementation

1import OneSdk from "@frankieone/one-sdk";
2import { useEffect, useRef, useState } from "react";
3
4interface OneSDKConfig {
5  mode: 'development' | 'production';
6  recipe: {
7    form: {
8      provider: {
9        name: string;
10      };
11    };
12  };
13}
14
15interface UseOneSDKProps {
16  config?: OneSDKConfig;
17}
18
19const useOneSDK = ({ config }: UseOneSDKProps) => {
20  const [oneSDKInstance, setOneSDKInstance] = useState(null);
21  const [error, setError] = useState(null);
22  const [loading, setLoading] = useState(false);
23  const initializedRef = useRef(false);
24
25  const generateToken = async () => {
26    try {
27      const tokenRawAsync = await fetch(
28        "https://backend.latest.frankiefinancial.io/auth/v2/machine-session",
29        {
30          method: "POST",
31          headers: {
32            authorization: `machine ${btoa(
33              `${process.env.REACT_APP_CUSTOMER_ID}:${process.env.REACT_APP_API_KEY}`
34            )}`,
35            "Content-Type": "application/json",
36          },
37          body: JSON.stringify({
38            permissions: {
39              preset: "one-sdk",
40              reference: `demo-${new Date().toISOString()}`,
41            },
42          }),
43        }
44      );
45      return await tokenRawAsync.json();
46    } catch (error) {
47      setError(error.message);
48      return null;
49    }
50  };
51
52  const generateOneSDKInstance = async () => {
53    setLoading(true);
54    try {
55      const token = await generateToken();
56      if (!token) return;
57
58      const defaultConfig = {
59        mode: "development",
60        recipe: {
61          form: {
62            provider: {
63              name: "react",
64            },
65          },
66        },
67      };
68
69      const oneSDKInit = await OneSdk({
70        session: token,
71        ...(config || defaultConfig),
72      });
73
74      setOneSDKInstance(oneSDKInit);
75    } catch (error) {
76      setError(error.message);
77    } finally {
78      setLoading(false);
79    }
80  };
81
82  useEffect(() => {
83    if (!initializedRef.current) {
84      generateOneSDKInstance();
85      initializedRef.current = true;
86    }
87  }, [config]);
88
89  return { oneSDKInstance, error, loading };
90};
91
92export default useOneSDK;

Best Practices

Error Handling
  • Always handle token generation errors - Provide meaningful error messages
  • Implement proper error boundaries
Security
  • Never expose API keys in client-side code
  • Use environment variables
  • Implement proper token management
Performance
  • Use React.memo for expensive renders
  • Implement proper cleanup in useEffect
  • Avoid unnecessary re-renders
State Management
  • Use proper state management patterns
  • Implement loading states
  • Handle edge cases properly

Remember to handle token expiration and implement proper refresh mechanisms in a production environment.

Troubleshooting

  • Token Generation Fails: Verify your credentials and network connection
  • SDK Initialization Errors: Check configuration object format
  • Component Re-rendering: Implement proper memoization
  • Vite: Ensure variables are prefixed with VITE_
  • Create React App: Ensure variables are prefixed with REACT_APP_
  • Development: Verify .env file location

Next Steps

Sample Implementation

View complete implementation examples

API Reference

Explore the complete API documentation

Built with