@passflow/react 0.2.8 → 0.3.0

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.3.0";
 
 window.passflowReactAppVersion = () => {
   console.log(`App Version: ${version}`);
@@ -769,6 +769,12 @@ const routes = {
   },
   two_factor_setup_magic_link: {
     path: "/two-factor-setup-magic-link/:token"
+  },
+  cli_browser: {
+    path: "/cli/browser/:sessionId"
+  },
+  cli_qr: {
+    path: "/cli/auth/:sessionId"
   }
 };
 
@@ -787,9 +793,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 +843,7 @@ const AuthProvider = ({ children }) => {
     isAuthenticated,
     logout,
     isLoading,
+    isSessionExpired,
     getTokens
   };
   return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
@@ -1789,6 +1814,281 @@ 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 useCLIAuth = (sessionId) => {
+  const [state, setState] = useState("loading");
+  const [error, setError] = useState(null);
+  const [expiresAt, setExpiresAt] = useState(null);
+  const [challenge, setChallenge] = useState(null);
+  const serverUrl = window.location.origin;
+  const fetchStatus = useCallback(async () => {
+    try {
+      const response = await fetch(`${serverUrl}/cli/auth/status/${sessionId}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CLI auth status: ${response.statusText}`);
+      }
+      const data = await response.json();
+      setExpiresAt(data.expires_at || null);
+      switch (data.status) {
+        case "pending":
+          setState("pending");
+          setChallenge(data.challenge || null);
+          break;
+        case "completed":
+          setState("completed");
+          break;
+        case "expired":
+          setState("expired");
+          setError("This authentication session has expired. Please start a new one from your terminal.");
+          break;
+        case "failed":
+          setState("error");
+          setError(data.error || "Authentication failed");
+          break;
+      }
+    } catch (err) {
+      setState("error");
+      setError(err instanceof Error ? err.message : "Failed to load authentication status");
+    }
+  }, [sessionId, serverUrl]);
+  const authenticate = useCallback(async () => {
+    if (!challenge) {
+      setError("No challenge available for authentication");
+      return;
+    }
+    setState("authenticating");
+    setError(null);
+    try {
+      const { startAuthentication } = await import('@simplewebauthn/browser');
+      const optionsJSON = challenge.publicKey || challenge;
+      const webauthnResponse = await startAuthentication({ optionsJSON });
+      const completeResponse = await fetch(`${serverUrl}/auth/passkey/authenticate/complete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(webauthnResponse)
+      });
+      if (!completeResponse.ok) {
+        throw new Error(`Passkey authentication failed: ${completeResponse.statusText}`);
+      }
+      const authData = await completeResponse.json();
+      if (!authData.access_token || !authData.refresh_token) {
+        throw new Error("Invalid authentication response: missing tokens");
+      }
+      const cliCompleteRequest = {
+        session_id: sessionId,
+        access_token: authData.access_token,
+        refresh_token: authData.refresh_token,
+        user_id: authData.user_id,
+        expires_in: authData.expires_in
+      };
+      const cliCompleteResponse = await fetch(`${serverUrl}/cli/auth/complete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(cliCompleteRequest)
+      });
+      if (!cliCompleteResponse.ok) {
+        throw new Error(`CLI authentication completion failed: ${cliCompleteResponse.statusText}`);
+      }
+      setState("completed");
+    } catch (err) {
+      setState("error");
+      if (err instanceof Error) {
+        if (err.name === "NotAllowedError") {
+          setError("Authentication was cancelled or not allowed");
+        } else {
+          setError(err.message);
+        }
+      } else {
+        setError("Authentication failed");
+      }
+    }
+  }, [challenge, sessionId, serverUrl]);
+  useEffect(() => {
+    void fetchStatus();
+  }, [fetchStatus]);
+  return {
+    authenticate,
+    state,
+    error,
+    expiresAt
+  };
+};
+
 const FieldPhone = ({ id, onChange, isError = false, className = "" }) => {
   const [show, setShow] = useState(false);
   const [filterValue, setFilterValue] = useState("");
@@ -2190,6 +2490,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 +3016,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 +3070,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,
     {
@@ -6031,6 +6574,110 @@ const index = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   useRoutes
 }, Symbol.toStringTag, { value: 'Module' }));
 
+const CLIBrowserAuthForm = () => {
+  const { sessionId } = useParams();
+  if (!sessionId) {
+    throw new Error("Session ID is required");
+  }
+  const { authenticate, state, error } = useCLIAuth(sessionId);
+  const handleAuthenticate = async () => {
+    await authenticate();
+  };
+  return /* @__PURE__ */ jsx(Wrapper, { title: "CLI Authentication", subtitle: "Authenticate your CLI tool", className: "passflow-cli-auth-wrapper", children: /* @__PURE__ */ jsxs("div", { className: "passflow-form", children: [
+    state === "loading" && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Loading authentication session..." }) }),
+    state === "pending" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Click the button below to authenticate with your passkey." }) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "big",
+          variant: "dark",
+          type: "button",
+          className: "passflow-button-passkey",
+          withIcon: true,
+          onClick: handleAuthenticate,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { id: "key", size: "small", type: "general", className: "icon-white passflow-button-passkey-icon" }),
+            "Authenticate with Passkey"
+          ]
+        }
+      )
+    ] }),
+    state === "authenticating" && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Authenticating..." }) }),
+    state === "completed" && /* @__PURE__ */ jsxs("div", { className: "passflow-form-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "passflow-form-success", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "small", id: "check", type: "general", className: "icon-success" }),
+        /* @__PURE__ */ jsx("p", { className: "passflow-form-success-text", children: "Authentication successful!" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "You can close this window and return to your terminal." })
+    ] }),
+    state === "expired" && /* @__PURE__ */ jsxs("div", { className: "passflow-form-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "passflow-form-error", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "small", id: "warning", type: "general", className: "icon-warning" }),
+        /* @__PURE__ */ jsx("span", { className: "passflow-form-error-text", children: "Session Expired" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "This authentication session has expired. Please start a new one from your terminal." })
+    ] }),
+    state === "error" && error && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsxs("div", { className: "passflow-form-error", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "small", id: "warning", type: "general", className: "icon-warning" }),
+      /* @__PURE__ */ jsx("span", { className: "passflow-form-error-text", children: error })
+    ] }) })
+  ] }) });
+};
+const CLIBrowserAuth = withError(CLIBrowserAuthForm, ErrorComponent);
+
+const CLIQRAuthForm = () => {
+  const { sessionId } = useParams();
+  if (!sessionId) {
+    throw new Error("Session ID is required");
+  }
+  const { authenticate, state, error } = useCLIAuth(sessionId);
+  const handleAuthenticate = async () => {
+    await authenticate();
+  };
+  return /* @__PURE__ */ jsx(Wrapper, { title: "CLI Authentication", subtitle: "Authenticate for your CLI application", className: "passflow-cli-auth-wrapper", children: /* @__PURE__ */ jsxs("div", { className: "passflow-form", children: [
+    state === "loading" && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Loading authentication session..." }) }),
+    state === "pending" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Tap the button below to authenticate with your passkey." }) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "big",
+          variant: "dark",
+          type: "button",
+          className: "passflow-button-passkey",
+          withIcon: true,
+          onClick: handleAuthenticate,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { id: "key", size: "small", type: "general", className: "icon-white passflow-button-passkey-icon" }),
+            "Authenticate with Passkey"
+          ]
+        }
+      )
+    ] }),
+    state === "authenticating" && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "Authenticating..." }) }),
+    state === "completed" && /* @__PURE__ */ jsxs("div", { className: "passflow-form-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "passflow-form-success", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "small", id: "check", type: "general", className: "icon-success" }),
+        /* @__PURE__ */ jsx("p", { className: "passflow-form-success-text", children: "Authentication successful!" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "You can close this app and return to your terminal." })
+    ] }),
+    state === "expired" && /* @__PURE__ */ jsxs("div", { className: "passflow-form-container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "passflow-form-error", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "small", id: "warning", type: "general", className: "icon-warning" }),
+        /* @__PURE__ */ jsx("span", { className: "passflow-form-error-text", children: "Session Expired" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "passflow-form-text", children: "This authentication session has expired. Please start a new one from your terminal." })
+    ] }),
+    state === "error" && error && /* @__PURE__ */ jsx("div", { className: "passflow-form-container", children: /* @__PURE__ */ jsxs("div", { className: "passflow-form-error", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "small", id: "warning", type: "general", className: "icon-warning" }),
+      /* @__PURE__ */ jsx("span", { className: "passflow-form-error-text", children: error })
+    ] }) })
+  ] }) });
+};
+const CLIQRAuth = withError(CLIQRAuthForm, ErrorComponent);
+
 const normalizePathPrefix = (path) => {
   if (!path) return "";
   const pathReplace = path.replace(/^\/+|\/+$/g, "");
@@ -6211,6 +6858,8 @@ const PassflowWrapper = ({
         )
       }
     ),
+    /* @__PURE__ */ jsx(Route, { path: routes.cli_browser.path, element: /* @__PURE__ */ jsx(CLIBrowserAuth, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: routes.cli_qr.path, element: /* @__PURE__ */ jsx(CLIQRAuth, {}) }),
     /* @__PURE__ */ jsx(
       Route,
       {
@@ -6408,5 +7057,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, CLIBrowserAuth, CLIQRAuth, 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, useCLIAuth, 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