@passflow/react 0.2.10 → 0.3.0

package/dist/index.es.js

@@ -20,7 +20,7 @@ import { phone as phone$1 } from 'phone';
 import { useForm, Controller } from 'react-hook-form';
 import 'react-dom';
 
-const version = "0.2.10";
+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"
   }
 };
 
@@ -1980,6 +1986,109 @@ function useSessionExpired(options) {
   };
 }
 
+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("");
@@ -6465,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, "");
@@ -6645,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,
       {
@@ -6842,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, 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 };
+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