@authorizeearth/react 1.0.3

package/dist/index.mjs

@@ -0,0 +1,680 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+// src/constants.ts
+var IFRAME_ID = "authorize-earth-iframe";
+var SHADOW_HOST_ID = "authorize-earth-shadow-host";
+var MOBILE_BREAKPOINT = 640;
+var ORIGINS = {
+  live: "https://id.authorizeearth.com",
+  test: "https://dashboard.authorizeearth.com"
+};
+var ALLOWED_ORIGINS = [
+  ORIGINS.live,
+  ORIGINS.test,
+  "https://id.authorize.earth",
+  "https://dashboard.authorize.earth"
+];
+
+// src/utils.ts
+function isValidOrigin(origin) {
+  return ALLOWED_ORIGINS.includes(origin);
+}
+function getTargetOrigin(testMode) {
+  return testMode ? ORIGINS.test : ORIGINS.live;
+}
+function isMobileViewport() {
+  return window.innerWidth <= MOBILE_BREAKPOINT;
+}
+function buildIframeUrl(params) {
+  const {
+    sessionToken,
+    displayMode,
+    testMode,
+    theme,
+    externalHash,
+    integrationId,
+    templateId,
+    simulateError
+  } = params;
+  const origin = window.location.origin;
+  const parentUrl = window.location.href;
+  const targetOrigin = getTargetOrigin(testMode);
+  const urlParams = new URLSearchParams();
+  urlParams.set("mode", displayMode);
+  urlParams.set("origin", origin);
+  urlParams.set("parent_url", parentUrl);
+  if (theme) {
+    urlParams.set("theme", theme);
+  }
+  if (testMode) {
+    if (templateId) urlParams.set("template", templateId);
+    if (sessionToken) urlParams.set("integration_session_id", sessionToken);
+    if (integrationId) urlParams.set("integration_id", integrationId);
+    if (externalHash) urlParams.set("external_hash", externalHash);
+    if (simulateError) urlParams.set("simulate_error", simulateError);
+    return `${targetOrigin}/idv-test?${urlParams.toString()}`;
+  }
+  urlParams.set("integration_session_id", sessionToken);
+  if (integrationId) urlParams.set("integration_id", integrationId);
+  if (externalHash) urlParams.set("external_hash", externalHash);
+  return `${targetOrigin}/?${urlParams.toString()}`;
+}
+
+// src/styles.ts
+function getStyles(theme) {
+  const isDark = theme === "dark";
+  return `
+    @keyframes authorize-earth-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes authorize-earth-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .authorize-earth-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: 2147483647;
+      animation: authorize-earth-fade-in 0.2s ease-out forwards;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+
+    .authorize-earth-container.authorize-earth-fullscreen .authorize-earth-backdrop {
+      display: none;
+    }
+
+    .authorize-earth-container.authorize-earth-fullscreen .authorize-earth-iframe-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: ${isDark ? "#0a0a0a" : "white"};
+    }
+
+    .authorize-earth-container.authorize-earth-fullscreen .authorize-earth-iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: ${isDark ? "#0a0a0a" : "transparent"};
+    }
+
+    .authorize-earth-container.authorize-earth-modal {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      overflow-y: auto;
+    }
+
+    .authorize-earth-container.authorize-earth-modal .authorize-earth-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: ${isDark ? "rgba(0, 0, 0, 0.9)" : "rgba(0, 0, 0, 0.5)"};
+      cursor: pointer;
+    }
+
+    .authorize-earth-container.authorize-earth-modal .authorize-earth-modal-content {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      max-width: 480px;
+      margin: auto 0;
+      min-height: 200px;
+    }
+
+    .authorize-earth-container.authorize-earth-modal .authorize-earth-iframe-wrapper {
+      width: 100%;
+      min-height: 300px;
+      height: auto;
+      border: none;
+      border-radius: 16px;
+      box-shadow: ${isDark ? "0 25px 50px -12px rgba(0, 0, 0, 0.8)" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)"};
+      background: ${isDark ? "#0a0a0a" : "white"};
+      display: block;
+      position: relative;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
+    }
+
+    .authorize-earth-container.authorize-earth-modal .authorize-earth-iframe {
+      width: 100%;
+      height: 100%;
+      min-height: 300px;
+      border: none;
+      border-radius: 16px;
+      background: transparent;
+      display: block;
+      position: relative;
+      z-index: 1;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .authorize-earth-container.authorize-earth-modal .authorize-earth-iframe.authorize-earth-ready {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .authorize-earth-loading-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 32px;
+      min-height: 300px;
+      background: ${isDark ? "#0a0a0a" : "#ffffff"};
+      border-radius: 16px;
+      z-index: 0;
+    }
+
+    .authorize-earth-loading-placeholder.authorize-earth-hidden {
+      display: none;
+    }
+
+    .authorize-earth-loading-content {
+      text-align: center;
+    }
+
+    .authorize-earth-spinner {
+      width: 32px;
+      height: 32px;
+      margin: 0 auto 16px auto;
+      animation: authorize-earth-spin 1s linear infinite;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .authorize-earth-spinner svg {
+      width: 32px;
+      height: 32px;
+      display: block;
+    }
+
+    .authorize-earth-loading-text {
+      font-size: 16px;
+      line-height: 1.5;
+      color: ${isDark ? "#a3a3a3" : "#4b5563"};
+      margin: 0;
+      font-weight: 400;
+    }
+  `;
+}
+function createLoadingPlaceholder(theme) {
+  const isDark = theme === "dark";
+  const spinnerColor = isDark ? "#737373" : "#9ca3af";
+  const placeholder = document.createElement("div");
+  placeholder.className = "authorize-earth-loading-placeholder";
+  placeholder.innerHTML = `
+    <div class="authorize-earth-loading-content">
+      <div class="authorize-earth-spinner">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: ${spinnerColor}">
+          <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+        </svg>
+      </div>
+      <p class="authorize-earth-loading-text">Loading verification session...</p>
+    </div>
+  `;
+  return placeholder;
+}
+function createShadowContainer(mode, theme) {
+  const shadowHost = document.createElement("div");
+  shadowHost.id = "authorize-earth-shadow-host";
+  const shadowRoot = shadowHost.attachShadow({ mode: "closed" });
+  const styleSheet = document.createElement("style");
+  styleSheet.textContent = getStyles(theme);
+  shadowRoot.appendChild(styleSheet);
+  const container = document.createElement("div");
+  container.className = `authorize-earth-container ${mode === "modal" ? "authorize-earth-modal" : "authorize-earth-fullscreen"}`;
+  const backdrop = document.createElement("div");
+  backdrop.className = "authorize-earth-backdrop";
+  container.appendChild(backdrop);
+  let modalContent = null;
+  const iframeWrapper = document.createElement("div");
+  iframeWrapper.className = "authorize-earth-iframe-wrapper";
+  const loadingPlaceholder = createLoadingPlaceholder(theme);
+  iframeWrapper.appendChild(loadingPlaceholder);
+  if (mode === "modal") {
+    modalContent = document.createElement("div");
+    modalContent.className = "authorize-earth-modal-content";
+    modalContent.appendChild(iframeWrapper);
+    container.appendChild(modalContent);
+  } else {
+    container.appendChild(iframeWrapper);
+  }
+  shadowRoot.appendChild(container);
+  return {
+    shadowHost,
+    shadowRoot,
+    container,
+    backdrop,
+    modalContent,
+    iframeWrapper,
+    loadingPlaceholder
+  };
+}
+
+// src/core.ts
+function create(config) {
+  const {
+    sessionToken,
+    displayMode = "modal",
+    testMode = false,
+    theme = "light",
+    externalHash,
+    integrationId,
+    templateId,
+    simulateError,
+    onSuccess,
+    onError,
+    onClose,
+    onEvent
+  } = config;
+  const targetOrigin = getTargetOrigin(testMode);
+  let shadowHost = null;
+  let shadowRoot = null;
+  let container = null;
+  let backdrop = null;
+  let modalContent = null;
+  let iframeWrapper = null;
+  let loadingPlaceholder = null;
+  let iframe = null;
+  let messageHandler = null;
+  let resizeHandler = null;
+  let isDestroyed = false;
+  let isTemporarilyFullscreen = false;
+  let currentEffectiveMode = displayMode;
+  let currentTheme = theme;
+  function updateStyles() {
+    if (!shadowRoot) return;
+    const styleSheet = shadowRoot.querySelector("style");
+    if (styleSheet) {
+      styleSheet.textContent = getStyles(currentTheme);
+    }
+  }
+  function showIframe() {
+    if (iframe && !iframe.classList.contains("authorize-earth-ready")) {
+      iframe.classList.add("authorize-earth-ready");
+    }
+    if (loadingPlaceholder) {
+      loadingPlaceholder.classList.add("authorize-earth-hidden");
+    }
+  }
+  function switchToFullscreen() {
+    var _a;
+    if (!container || !iframe || !iframeWrapper) return;
+    currentEffectiveMode = "fullscreen";
+    container.className = "authorize-earth-container authorize-earth-fullscreen";
+    iframeWrapper.style.cssText = "";
+    iframe.style.cssText = "";
+    iframe.classList.add("authorize-earth-ready");
+    (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage({ type: "authorize_earth_switch_fullscreen" }, "*");
+  }
+  function switchToModal() {
+    var _a;
+    if (!container || !iframe || !iframeWrapper) return;
+    currentEffectiveMode = "modal";
+    container.className = "authorize-earth-container authorize-earth-modal";
+    if (!modalContent) {
+      modalContent = document.createElement("div");
+      modalContent.className = "authorize-earth-modal-content";
+      container.appendChild(modalContent);
+    }
+    if (iframeWrapper.parentElement !== modalContent) {
+      modalContent.appendChild(iframeWrapper);
+    }
+    iframeWrapper.style.cssText = "";
+    iframe.style.cssText = "";
+    iframe.classList.add("authorize-earth-ready");
+    (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
+      { type: "authorize_earth_switch_modal" },
+      "*"
+    );
+  }
+  function handleWindowResize() {
+    if (!container || !iframe || isTemporarilyFullscreen) return;
+    const isMobile = isMobileViewport();
+    const isCurrentlyModal = container.classList.contains("authorize-earth-modal");
+    const isCurrentlyFullscreen = container.classList.contains("authorize-earth-fullscreen");
+    if (isMobile && isCurrentlyModal) {
+      switchToFullscreen();
+    } else if (!isMobile && isCurrentlyFullscreen && displayMode === "modal") {
+      switchToModal();
+    }
+  }
+  function handleMessage(event) {
+    if (!isValidOrigin(event.origin)) return;
+    const message = event.data;
+    switch (message.type) {
+      case "authorize_earth_ready":
+        showIframe();
+        onEvent == null ? void 0 : onEvent({ type: "ready", timestamp: Date.now() });
+        break;
+      case "authorize_earth_theme_validated": {
+        const payload = message.payload;
+        if (!payload.has_custom_branding && currentTheme === "dark") {
+          currentTheme = "light";
+          updateStyles();
+          console.warn(
+            "[AuthorizeEarth] Dark mode requires custom branding. Falling back to light mode."
+          );
+        }
+        onEvent == null ? void 0 : onEvent({
+          type: "theme_validated",
+          timestamp: Date.now(),
+          metadata: {
+            theme: currentTheme,
+            has_custom_branding: payload.has_custom_branding
+          }
+        });
+        break;
+      }
+      case "authorize_earth_success":
+        onSuccess == null ? void 0 : onSuccess(message.payload);
+        break;
+      case "authorize_earth_error":
+        showIframe();
+        onError == null ? void 0 : onError(message.payload);
+        break;
+      case "authorize_earth_close":
+        onClose == null ? void 0 : onClose();
+        destroy();
+        break;
+      case "authorize_earth_event":
+        handleVerificationEvent(message.payload);
+        break;
+      case "authorize_earth_resize":
+        handleResize(message.payload);
+        break;
+      case "authorize_earth_redirect": {
+        const redirectPayload = message.payload;
+        if (redirectPayload == null ? void 0 : redirectPayload.url) {
+          window.location.href = redirectPayload.url;
+        }
+        break;
+      }
+      case "authorize_earth_passkey_complete": {
+        onSuccess == null ? void 0 : onSuccess(message.payload);
+        destroy();
+        break;
+      }
+      case "authorize_earth_passkey_skip": {
+        onClose == null ? void 0 : onClose();
+        destroy();
+        break;
+      }
+    }
+  }
+  function handleResize(payload) {
+    if (currentEffectiveMode === "fullscreen" || !iframe || !iframeWrapper || !(payload == null ? void 0 : payload.height)) {
+      return;
+    }
+    const height = Math.max(payload.height, 200);
+    iframe.style.height = `${height}px`;
+    iframeWrapper.style.height = `${height}px`;
+  }
+  function handleBackdropClick(event) {
+    const target = event.target;
+    if (target.classList.contains("authorize-earth-backdrop")) {
+      close();
+    }
+  }
+  function handleVerificationEvent(evt) {
+    if (evt.type === "camera_fullscreen_request" && displayMode === "modal" && !isMobileViewport()) {
+      isTemporarilyFullscreen = true;
+      switchToFullscreen();
+    }
+    if (evt.type === "camera_fullscreen_exit" && displayMode === "modal" && isTemporarilyFullscreen) {
+      isTemporarilyFullscreen = false;
+      if (!isMobileViewport()) {
+        switchToModal();
+      }
+    }
+    onEvent == null ? void 0 : onEvent(evt);
+  }
+  function open() {
+    if (isDestroyed) {
+      console.warn("[AuthorizeEarth] Cannot open a destroyed instance. Create a new one.");
+      return;
+    }
+    if (shadowHost) {
+      console.warn("[AuthorizeEarth] Already open.");
+      return;
+    }
+    if (testMode && !templateId) {
+      console.error("[AuthorizeEarth] templateId is required for test mode.");
+      onError == null ? void 0 : onError({
+        code: "MISSING_TEMPLATE_ID",
+        message: "templateId is required for test mode sessions"
+      });
+      return;
+    }
+    const existingHost = document.getElementById(SHADOW_HOST_ID);
+    if (existingHost) {
+      existingHost.remove();
+    }
+    const isMobile = isMobileViewport();
+    const effectiveDisplayMode = isMobile ? "fullscreen" : displayMode;
+    currentEffectiveMode = effectiveDisplayMode;
+    const shadowElements = createShadowContainer(
+      effectiveDisplayMode,
+      currentTheme
+    );
+    shadowHost = shadowElements.shadowHost;
+    shadowRoot = shadowElements.shadowRoot;
+    container = shadowElements.container;
+    backdrop = shadowElements.backdrop;
+    modalContent = shadowElements.modalContent;
+    iframeWrapper = shadowElements.iframeWrapper;
+    loadingPlaceholder = shadowElements.loadingPlaceholder;
+    iframe = document.createElement("iframe");
+    iframe.id = IFRAME_ID;
+    iframe.className = "authorize-earth-iframe";
+    iframe.src = buildIframeUrl({
+      sessionToken,
+      displayMode: effectiveDisplayMode,
+      testMode,
+      theme: currentTheme,
+      externalHash,
+      integrationId,
+      templateId,
+      simulateError
+    });
+    iframe.allow = "camera; microphone; publickey-credentials-get *; publickey-credentials-create *";
+    iframe.setAttribute("allowfullscreen", "true");
+    iframeWrapper.appendChild(iframe);
+    backdrop.addEventListener("click", handleBackdropClick);
+    messageHandler = handleMessage;
+    window.addEventListener("message", messageHandler);
+    resizeHandler = handleWindowResize;
+    window.addEventListener("resize", resizeHandler);
+    document.body.appendChild(shadowHost);
+    onEvent == null ? void 0 : onEvent({ type: "open", timestamp: Date.now() });
+  }
+  function close() {
+    var _a;
+    (_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.postMessage(
+      { type: "authorize_earth_close_request" },
+      targetOrigin
+    );
+  }
+  function destroy() {
+    if (isDestroyed) return;
+    if (messageHandler) {
+      window.removeEventListener("message", messageHandler);
+      messageHandler = null;
+    }
+    if (resizeHandler) {
+      window.removeEventListener("resize", resizeHandler);
+      resizeHandler = null;
+    }
+    if (backdrop) {
+      backdrop.removeEventListener("click", handleBackdropClick);
+    }
+    if (shadowHost) {
+      shadowHost.remove();
+      shadowHost = null;
+      shadowRoot = null;
+      container = null;
+      backdrop = null;
+      modalContent = null;
+      iframeWrapper = null;
+      loadingPlaceholder = null;
+      iframe = null;
+    }
+    isDestroyed = true;
+  }
+  return { open, close, destroy };
+}
+function start(config) {
+  const instance = create(config);
+  instance.open();
+}
+function useAuthorizeEarth(config) {
+  const {
+    sessionToken,
+    displayMode,
+    theme,
+    testMode,
+    templateId,
+    integrationId,
+    simulateError,
+    onSuccess,
+    onError,
+    onClose,
+    onEvent
+  } = config;
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(null);
+  const instanceRef = useRef(null);
+  const callbackRefs = useRef({ onSuccess, onError, onClose, onEvent });
+  useEffect(() => {
+    callbackRefs.current = { onSuccess, onError, onClose, onEvent };
+  }, [onSuccess, onError, onClose, onEvent]);
+  useEffect(() => {
+    if (!sessionToken) {
+      setReady(false);
+      return;
+    }
+    try {
+      instanceRef.current = create({
+        sessionToken,
+        displayMode,
+        theme,
+        testMode,
+        templateId,
+        integrationId,
+        simulateError,
+        onSuccess: (result) => {
+          var _a, _b;
+          return (_b = (_a = callbackRefs.current).onSuccess) == null ? void 0 : _b.call(_a, result);
+        },
+        onError: (err) => {
+          var _a, _b;
+          return (_b = (_a = callbackRefs.current).onError) == null ? void 0 : _b.call(_a, err);
+        },
+        onClose: () => {
+          var _a, _b;
+          return (_b = (_a = callbackRefs.current).onClose) == null ? void 0 : _b.call(_a);
+        },
+        onEvent: (event) => {
+          var _a, _b;
+          (_b = (_a = callbackRefs.current).onEvent) == null ? void 0 : _b.call(_a, event);
+          if (event.type === "ready") {
+            setReady(true);
+          }
+        }
+      });
+      setReady(true);
+      setError(null);
+    } catch (e) {
+      const initError = e instanceof Error ? e : new Error("Failed to initialize AuthorizeEarth");
+      setError(initError);
+      setReady(false);
+    }
+    return () => {
+      var _a;
+      (_a = instanceRef.current) == null ? void 0 : _a.destroy();
+      instanceRef.current = null;
+      setReady(false);
+    };
+  }, [sessionToken, displayMode, theme, testMode, templateId, integrationId, simulateError]);
+  const open = useCallback(() => {
+    if (!instanceRef.current) {
+      console.warn("[AuthorizeEarth] Cannot open: no session token provided.");
+      return;
+    }
+    instanceRef.current.open();
+  }, []);
+  const close = useCallback(() => {
+    var _a;
+    (_a = instanceRef.current) == null ? void 0 : _a.close();
+  }, []);
+  return { open, close, ready, error };
+}
+function AuthorizeEarthButton({
+  sessionToken,
+  displayMode,
+  theme,
+  testMode,
+  templateId,
+  integrationId,
+  simulateError,
+  onSuccess,
+  onError,
+  onClose,
+  onEvent,
+  children = "Verify Identity",
+  className,
+  style,
+  disabled
+}) {
+  const { open, ready } = useAuthorizeEarth({
+    sessionToken,
+    displayMode,
+    theme,
+    testMode,
+    templateId,
+    integrationId,
+    simulateError,
+    onSuccess,
+    onError,
+    onClose,
+    onEvent
+  });
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: open,
+      disabled: disabled || !ready,
+      className,
+      style
+    },
+    children
+  );
+}
+
+export { AuthorizeEarthButton, create, start, useAuthorizeEarth };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map