Quick Start

import OneSdk from "@frankieone/one-sdk";
import { useEffect, useRef, useState } from "react";

const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID;
const API_KEY = import.meta.env.VITE_API_KEY;
const BASE_URL = import.meta.env.VITE_FRANKIE_BASE_URL;

export default function OneSDKHandler({ config }) {
  const [instance, setInstance] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  const initRef = useRef(false);

  useEffect(() => {
    if (initRef.current) return;
    initRef.current = true;

    (async () => {
      try {
        const tokenRes = await fetch(`${BASE_URL}/auth/v2/machine-session`, {
          method: "POST",
          headers: {
            authorization: `machine ${btoa(`${CUSTOMER_ID}:${API_KEY}`)}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            permissions: { preset: "one-sdk", reference: `demo-${Date.now()}` },
          }),
        });
        const session = await tokenRes.json();

        const sdk = await OneSdk({
          session,
          mode: "development",
          recipe: {
            form: {
              provider: { name: "react" },
            },
          },
          ...config,
        });
        setInstance(sdk);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  return { instance, error, loading };
}

import { useEffect, useRef } from "react";
import OneSDKHandler from "./OneSDKHandler";

export default function OneSDKFlow() {
  const { instance, error, loading } = OneSDKHandler({});
  const flowRef = useRef(false);

  useEffect(() => {
    if (!instance || flowRef.current) return;
    flowRef.current = true;

    const appContainer = "#onesdk-container";

    const welcome = instance.component("form", { name: "WELCOME", type: "ocr" });
    const consent = instance.component("form", { name: "CONSENT" });
    const idv = instance.flow("idv");

    welcome.on("form:welcome:ready", () => consent.mount(appContainer));
    consent.on("form:consent:ready", () => idv.mount(appContainer));

    idv.on("results", ({ checkStatus }) => {
      if (checkStatus) {
        document.getElementById("onesdk-container").innerHTML =
          "<h2>Verification complete</h2>";
      }
    });

    idv.on("error", ({ message }) => {
      console.error("IDV error:", message);
    });

    welcome.mount(appContainer);
  }, [instance]);

  if (error) return <div>Error: {error}</div>;
  if (loading) return <div>Loading...</div>;

  return <div id="onesdk-container" style={{ width: "100%", height: "100vh" }} />;
}

import OneSDKFlow from "./OneSDKFlow";

export default function App() {
  return <OneSDKFlow />;
}