@passflow/react 0.2.8 → 0.2.10

package/dist/index.es.js

@@ -6,6 +6,8 @@ import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
 import { useState, useEffect, forwardRef, createContext, useCallback, useContext, useRef, useLayoutEffect, useMemo, useReducer } from 'react';
+import { PassflowEvent, parseToken, Passflow } from '@passflow/core';
+export * from '@passflow/core';
 import queryString from 'query-string';
 import { getCountryForTimezone } from 'countries-and-timezones';
 import { usePhoneInput, defaultCountries, parseCountry, FlagImage } from 'react-international-phone';
@@ -16,11 +18,9 @@ import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { ErrorBoundary } from 'react-error-boundary';
 import { phone as phone$1 } from 'phone';
 import { useForm, Controller } from 'react-hook-form';
-import { parseToken, Passflow } from '@passflow/core';
-export * from '@passflow/core';
 import 'react-dom';
 
-const version = "0.2.8";
+const version = "0.2.10";
 
 window.passflowReactAppVersion = () => {
   console.log(`App Version: ${version}`);
@@ -787,9 +787,27 @@ const NavigationContext$1 = createContext({
 });
 
 const AuthContext = createContext(void 0);
-const AuthProvider = ({ children }) => {
+const AuthProvider = ({ children, onSessionExpired }) => {
   const passflow = usePassflow();
   const [isLoading, setIsLoading] = useState(false);
+  const [isSessionExpired, setIsSessionExpired] = useState(false);
+  useEffect(() => {
+    const subscriber = {
+      onAuthChange: (eventType, payload) => {
+        if (eventType === PassflowEvent.SessionExpired) {
+          const reason = payload?.reason ?? "refresh_failed";
+          setIsSessionExpired(true);
+          onSessionExpired?.(reason);
+        } else if (eventType === PassflowEvent.SignIn || eventType === PassflowEvent.Register) {
+          setIsSessionExpired(false);
+        }
+      }
+    };
+    passflow.subscribe(subscriber, [PassflowEvent.SessionExpired, PassflowEvent.SignIn, PassflowEvent.Register]);
+    return () => {
+      passflow.unsubscribe(subscriber);
+    };
+  }, [passflow, onSessionExpired]);
   const isAuthenticated = useCallback(() => passflow.isAuthenticated(), [passflow]);
   const getTokens = useCallback(
     async (doRefresh) => {
@@ -819,6 +837,7 @@ const AuthProvider = ({ children }) => {
     isAuthenticated,
     logout,
     isLoading,
+    isSessionExpired,
     getTokens
   };
   return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
@@ -1789,6 +1808,178 @@ const useTwoFactorSetupMagicLink = (token) => {
   };
 };
 
+const useTwoFactorChallenge = () => {
+  const passflow = usePassflow();
+  const [challenge, setChallenge] = useState(null);
+  const [selectedMethod, setSelectedMethod] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const requestChallenge = useCallback(
+    async (firstFactorMethod) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await passflow.twoFactor.requestChallenge({
+          first_factor_method: firstFactorMethod
+        });
+        setChallenge(response);
+        setSelectedMethod(response.method);
+      } catch (e) {
+        setError(e);
+        setChallenge(null);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [passflow]
+  );
+  const verify = useCallback(
+    async (response, trustDevice = false) => {
+      if (!challenge?.challenge_id) {
+        setError(new Error("No active challenge session"));
+        return null;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await passflow.twoFactor.verifyV2({
+          challenge_id: challenge.challenge_id,
+          method: selectedMethod || challenge.method,
+          response,
+          trust_device: trustDevice
+        });
+        return result;
+      } catch (e) {
+        setError(e);
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [passflow, challenge, selectedMethod]
+  );
+  const switchMethod = useCallback(
+    async (method) => {
+      if (!challenge?.challenge_id) {
+        setError(new Error("No active challenge session"));
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await passflow.twoFactor.switchToAlternative({
+          challenge_id: challenge.challenge_id,
+          method
+        });
+        setChallenge(response);
+        setSelectedMethod(method);
+      } catch (e) {
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [passflow, challenge]
+  );
+  const reset = useCallback(() => {
+    setChallenge(null);
+    setSelectedMethod(null);
+    setError(null);
+    setIsLoading(false);
+  }, []);
+  return {
+    challenge,
+    isLoading,
+    error,
+    requestChallenge,
+    verify,
+    switchMethod,
+    selectedMethod,
+    reset
+  };
+};
+
+const useTwoFactorMethods = () => {
+  const passflow = usePassflow();
+  const [availableMethods, setAvailableMethods] = useState([]);
+  const [registeredMethods, setRegisteredMethods] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const methods = await passflow.twoFactor.getRegisteredMethods();
+      setRegisteredMethods(methods);
+      const available = methods.map((m) => m.method);
+      setAvailableMethods(available);
+    } catch (e) {
+      setError(e);
+      setRegisteredMethods([]);
+      setAvailableMethods([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [passflow]);
+  const removeMethod = useCallback(
+    async (methodId) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        await passflow.twoFactor.removeMethod?.(methodId);
+        await refresh();
+      } catch (e) {
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [passflow, refresh]
+  );
+  return {
+    availableMethods,
+    registeredMethods,
+    isLoading,
+    error,
+    refresh,
+    removeMethod
+  };
+};
+
+function useSessionExpired(options) {
+  const passflow = usePassflow();
+  const [isSessionExpired, setIsSessionExpired] = useState(false);
+  const [expiredReason, setExpiredReason] = useState(null);
+  useEffect(() => {
+    const subscriber = {
+      onAuthChange: (eventType, payload) => {
+        if (eventType === PassflowEvent.SessionExpired) {
+          const reason = payload?.reason ?? "refresh_failed";
+          setIsSessionExpired(true);
+          setExpiredReason(reason);
+          options?.onSessionExpired?.(reason);
+        } else if (eventType === PassflowEvent.SignIn || eventType === PassflowEvent.Register) {
+          setIsSessionExpired(false);
+          setExpiredReason(null);
+        }
+      }
+    };
+    passflow.subscribe(subscriber, [PassflowEvent.SessionExpired, PassflowEvent.SignIn, PassflowEvent.Register]);
+    return () => {
+      passflow.unsubscribe(subscriber);
+    };
+  }, [passflow, options?.onSessionExpired]);
+  const resetSessionExpired = () => {
+    setIsSessionExpired(false);
+    setExpiredReason(null);
+  };
+  return {
+    isSessionExpired,
+    expiredReason,
+    resetSessionExpired
+  };
+}
+
 const FieldPhone = ({ id, onChange, isError = false, className = "" }) => {
   const [show, setShow] = useState(false);
   const [filterValue, setFilterValue] = useState("");
@@ -2190,6 +2381,245 @@ const TwoFactorSetupFlow = ({
   return /* @__PURE__ */ jsx(TwoFactorSetupForm, { onComplete: handleSetupComplete, onCancel: handleCancel });
 };
 
+const methodLabels = {
+  totp: "Authenticator App",
+  email_otp: "Email Code",
+  sms_otp: "SMS Code",
+  passkey: "Passkey",
+  recovery_codes: "Recovery Code",
+  push_fcm: "Push Notification (FCM)",
+  push_webpush: "Push Notification (Web)"
+};
+const methodIcons = {
+  totp: "📱",
+  email_otp: "✉️",
+  sms_otp: "💬",
+  passkey: "🔑",
+  recovery_codes: "🔒",
+  push_fcm: "🔔",
+  push_webpush: "🔔"
+};
+const MethodSelector = ({
+  availableMethods,
+  currentMethod,
+  onSelectMethod,
+  isOpen,
+  onClose
+}) => {
+  const handleSelect = (method) => {
+    onSelectMethod(method);
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "pf-dialog-overlay" }),
+    /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: "pf-dialog-content pf-method-selector-dialog", children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "pf-dialog-title", children: "Choose Verification Method" }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "pf-dialog-description", children: "Select an alternative method to verify your identity" }),
+      /* @__PURE__ */ jsx("div", { className: "pf-method-selector-list", children: availableMethods.map((method) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `pf-method-selector-item ${method === currentMethod ? "pf-method-selector-item-active" : ""}`,
+          onClick: () => handleSelect(method),
+          disabled: method === currentMethod,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "pf-method-icon", children: methodIcons[method] || "🔐" }),
+            /* @__PURE__ */ jsx("span", { className: "pf-method-label", children: methodLabels[method] || method }),
+            method === currentMethod && /* @__PURE__ */ jsx("span", { className: "pf-method-current-badge", children: "Current" })
+          ]
+        },
+        method
+      )) }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "pf-dialog-close", "aria-label": "Close", children: "×" }) })
+    ] })
+  ] }) });
+};
+
+const OtpInputComponent = ({
+  value,
+  onChange,
+  numInputs = 6,
+  error,
+  disabled = false,
+  autoFocus = true
+}) => {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus && containerRef.current) {
+      const firstInput = containerRef.current.querySelector("input");
+      if (firstInput) {
+        firstInput.focus();
+      }
+    }
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "pf-otp-input-container", children: [
+    /* @__PURE__ */ jsx(
+      OtpInput,
+      {
+        value,
+        onChange,
+        numInputs,
+        renderSeparator: /* @__PURE__ */ jsx("span", { className: "pf-otp-separator" }),
+        renderInput: (props) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            className: `pf-otp-input ${error ? "pf-otp-input-error" : ""} ${disabled ? "pf-otp-input-disabled" : ""}`,
+            disabled
+          }
+        ),
+        inputType: "tel",
+        shouldAutoFocus: autoFocus
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "pf-otp-error", children: error })
+  ] });
+};
+
+const TwoFactorChallenge = ({
+  firstFactorMethod,
+  onSuccess,
+  onError,
+  trustDevice = false
+}) => {
+  const { challenge, isLoading, error, requestChallenge, verify, switchMethod, selectedMethod } = useTwoFactorChallenge();
+  const [otpValue, setOtpValue] = useState("");
+  const [isMethodSelectorOpen, setIsMethodSelectorOpen] = useState(false);
+  useEffect(() => {
+    requestChallenge(firstFactorMethod);
+  }, [requestChallenge, firstFactorMethod]);
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  const handleVerify = async () => {
+    if (!otpValue) {
+      return;
+    }
+    const result = await verify(otpValue, trustDevice);
+    if (result) {
+      onSuccess?.();
+    }
+  };
+  const handleSwitchMethod = async (method) => {
+    setOtpValue("");
+    await switchMethod(method);
+  };
+  const handleOtpChange = (value) => {
+    setOtpValue(value);
+    if (value.length === 6) {
+      setTimeout(() => {
+        verify(value, trustDevice).then((result) => {
+          if (result) {
+            onSuccess?.();
+          }
+        });
+      }, 100);
+    }
+  };
+  if (!challenge) {
+    return /* @__PURE__ */ jsx("div", { className: "pf-two-factor-challenge pf-loading", children: /* @__PURE__ */ jsx("p", { children: "Loading challenge..." }) });
+  }
+  const currentMethod = selectedMethod || challenge.method;
+  const availableMethods = [challenge.method, ...challenge.alternative_methods || []];
+  const renderChallengeInput = () => {
+    switch (currentMethod) {
+      case "totp":
+      case "email_otp":
+      case "sms_otp":
+        return /* @__PURE__ */ jsxs("div", { className: "pf-challenge-input-wrapper", children: [
+          /* @__PURE__ */ jsx(
+            OtpInputComponent,
+            {
+              value: otpValue,
+              onChange: handleOtpChange,
+              numInputs: 6,
+              error: error?.message,
+              disabled: isLoading,
+              autoFocus: true
+            }
+          ),
+          currentMethod === "email_otp" && challenge.code_sent_to && /* @__PURE__ */ jsxs("p", { className: "pf-challenge-hint", children: [
+            "Code sent to ",
+            challenge.code_sent_to
+          ] }),
+          currentMethod === "sms_otp" && challenge.code_sent_to && /* @__PURE__ */ jsxs("p", { className: "pf-challenge-hint", children: [
+            "Code sent to ",
+            challenge.code_sent_to
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleVerify,
+              disabled: isLoading || otpValue.length !== 6,
+              className: "pf-button pf-button-primary",
+              children: isLoading ? "Verifying..." : "Verify"
+            }
+          )
+        ] });
+      case "passkey":
+        return /* @__PURE__ */ jsx("div", { className: "pf-challenge-input-wrapper", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: handleVerify, disabled: isLoading, className: "pf-button pf-button-primary", children: isLoading ? "Verifying..." : "Use Passkey" }) });
+      case "recovery_codes":
+        return /* @__PURE__ */ jsxs("div", { className: "pf-challenge-input-wrapper", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: otpValue,
+              onChange: (e) => setOtpValue(e.target.value),
+              placeholder: "Enter recovery code",
+              disabled: isLoading,
+              className: "pf-input"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleVerify,
+              disabled: isLoading || !otpValue,
+              className: "pf-button pf-button-primary",
+              children: isLoading ? "Verifying..." : "Verify"
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ jsxs("p", { children: [
+          "Unsupported method: ",
+          currentMethod
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "pf-two-factor-challenge", children: [
+    /* @__PURE__ */ jsxs("div", { className: "pf-challenge-method-info", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Two-Factor Authentication" }),
+      /* @__PURE__ */ jsx("p", { children: "Enter the verification code" })
+    ] }),
+    renderChallengeInput(),
+    availableMethods.length > 1 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsMethodSelectorOpen(true),
+        className: "pf-button pf-button-secondary pf-button-switch-method",
+        children: "Use different method"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MethodSelector,
+      {
+        availableMethods,
+        currentMethod,
+        onSelectMethod: handleSwitchMethod,
+        isOpen: isMethodSelectorOpen,
+        onClose: () => setIsMethodSelectorOpen(false)
+      }
+    )
+  ] });
+};
+
 const TwoFactorVerifyForm = ({
   onSuccess,
   onUseRecovery,
@@ -2477,7 +2907,8 @@ const TwoFactorRecoveryForm = ({
 const TwoFactorVerifyFlow = ({
   successAuthRedirect,
   signInPath = routes.signin.path,
-  twoFactorSetupPath = routes.two_factor_setup?.path
+  twoFactorSetupPath = routes.two_factor_setup?.path,
+  useV2Flow = false
 }) => {
   const [mode, setMode] = useState("verify");
   const [shouldBlockRender, setShouldBlockRender] = useState(false);
@@ -2530,6 +2961,9 @@ const TwoFactorVerifyFlow = ({
   if (!passflow.isTwoFactorVerificationRequired() && TwoFactorLoopPrevention.canRedirect()) {
     return null;
   }
+  if (useV2Flow) {
+    return /* @__PURE__ */ jsx(TwoFactorChallenge, { onSuccess: handleSuccess });
+  }
   return /* @__PURE__ */ jsx(Fragment, { children: mode === "verify" ? /* @__PURE__ */ jsx(
     TwoFactorVerifyForm,
     {
@@ -6408,5 +6842,5 @@ const PassflowProvider = ({
   return /* @__PURE__ */ jsx(PassflowContext.Provider, { value: passflowValue, children: /* @__PURE__ */ jsx(NavigationContext$1.Provider, { value: navigationValue, children: /* @__PURE__ */ jsx(AuthProvider, { children }) }) });
 };
 
-export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FieldPassword, FieldPhone, FieldText, ForgotPassword, ForgotPasswordSuccess, Icon, InvitationJoin, Link, PassflowFlow, PassflowProvider, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProvidersBox, ResetPassword, SignIn, SignInForm, SignUp, SignUpForm, Switch, TwoFactorRecoveryForm, TwoFactorSetupForm, TwoFactorSetupMagicLinkFlow, TwoFactorVerifyForm, VerifyChallengeMagicLink, VerifyChallengeOTP, Wrapper, useAppSettings, useAuth, useAuthCloudRedirect, useForgotPassword, useJoinInvite, useLogout, useNavigation, useOutsideClick, usePassflow, usePasswordlessComplete, useProvider, useResetPassword, useSignIn, useSignUp, useTwoFactorManage, useTwoFactorSetup, useTwoFactorSetupMagicLink, useTwoFactorStatus, useTwoFactorVerify, useUserPasskeys };
+export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FieldPassword, FieldPhone, FieldText, ForgotPassword, ForgotPasswordSuccess, Icon, InvitationJoin, Link, PassflowFlow, PassflowProvider, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProvidersBox, ResetPassword, SignIn, SignInForm, SignUp, SignUpForm, Switch, TwoFactorChallenge, TwoFactorRecoveryForm, TwoFactorSetupForm, TwoFactorSetupMagicLinkFlow, TwoFactorVerifyForm, VerifyChallengeMagicLink, VerifyChallengeOTP, Wrapper, useAppSettings, useAuth, useAuthCloudRedirect, useForgotPassword, useJoinInvite, useLogout, useNavigation, useOutsideClick, usePassflow, usePasswordlessComplete, useProvider, useResetPassword, useSessionExpired, useSignIn, useSignUp, useTwoFactorChallenge, useTwoFactorManage, useTwoFactorMethods, useTwoFactorSetup, useTwoFactorSetupMagicLink, useTwoFactorStatus, useTwoFactorVerify, useUserPasskeys };
 //# sourceMappingURL=index.es.js.map