@vaultix.ai/react 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -142,6 +142,7 @@ function VaultixProvider({
 }
 
 // src/hooks/index.ts
+import { useCallback as useCallback2 } from "react";
 function useVaultix() {
   return useVaultixContext();
 }
@@ -157,6 +158,22 @@ function useOrganization() {
   const { organization, isLoaded } = useVaultixContext();
   return { organization, isLoaded };
 }
+function useAuth() {
+  const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
+  const getToken = useCallback2(async () => {
+    if (!isSignedIn) return null;
+    return null;
+  }, [isSignedIn]);
+  return {
+    isLoaded,
+    isSignedIn,
+    userId: user?.id ?? null,
+    sessionId: session?.id ?? null,
+    orgId: session?.orgId ?? null,
+    signOut,
+    getToken
+  };
+}
 
 // src/components/SignIn.tsx
 import { clsx } from "clsx";
@@ -173,6 +190,18 @@ function resolveApiOrigin2(prop) {
   }
   return "";
 }
+function resolveAfterSignInUrl(redirectUrlProp) {
+  if (redirectUrlProp) return redirectUrlProp;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-after-sign-in]");
+    const attr = el?.getAttribute("data-vaultix-after-sign-in");
+    if (attr) return attr;
+    const params = new URLSearchParams(window.location.search);
+    const redirectUrl = params.get("redirect_url");
+    if (redirectUrl) return redirectUrl;
+  }
+  return "/";
+}
 function SignIn({
   redirectUrl,
   onSuccess,
@@ -185,13 +214,28 @@ function SignIn({
   const [email, setEmail] = useState2("");
   const [password, setPassword] = useState2("");
   const [totp, setTotp] = useState2("");
+  const [forgotCode, setForgotCode] = useState2("");
+  const [newPassword, setNewPassword] = useState2("");
   const [error, setError] = useState2(null);
   const [loading, setLoading] = useState2(false);
+  const [info, setInfo] = useState2(null);
   const challengeIdRef = useRef2(null);
   function setErr(msg) {
     setError(msg);
     onError?.(msg);
   }
+  function handleSuccess(handshakeToken) {
+    onSuccess?.(handshakeToken);
+    const target = resolveAfterSignInUrl(redirectUrl);
+    const url = new URL(target, window.location.origin);
+    url.searchParams.set("__vaultix_handshake", handshakeToken);
+    window.location.href = url.toString();
+  }
+  function handleGoogleSignIn() {
+    const target = resolveAfterSignInUrl(redirectUrl);
+    const params = new URLSearchParams({ redirect_url: target });
+    window.location.href = `${apiOrigin}/v1/auth/oauth/google?${params}`;
+  }
   async function handleEmailSubmit(e) {
     e.preventDefault();
     setError(null);
@@ -236,7 +280,7 @@ function SignIn({
         setStep("totp");
         return;
       }
-      handleSuccess(data.session_id);
+      handleSuccess(data.handshake_token);
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -292,7 +336,7 @@ function SignIn({
         setErr(verifyData.error ?? "Passkey verification failed.");
         return;
       }
-      handleSuccess(verifyData.session_id);
+      handleSuccess(verifyData.handshake_token);
     } catch (err) {
       if (err instanceof Error && err.name === "NotAllowedError") {
         setErr("Passkey was cancelled or timed out.");
@@ -312,28 +356,86 @@ function SignIn({
         method: "POST",
         credentials: "include",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          challenge_id: challengeIdRef.current,
-          code: totp
-        })
+        body: JSON.stringify({ challenge_id: challengeIdRef.current, code: totp })
       });
       const data = await res.json();
       if (!res.ok) {
         setErr(data.error ?? "Invalid code.");
         return;
       }
-      handleSuccess(data.session_id);
+      handleSuccess(data.handshake_token);
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleForgotSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await fetch(`${apiOrigin}/v1/auth/forgot-password`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email })
+      });
+      setInfo("Check your email for a reset code.");
+      setStep("forgot-verify");
     } catch {
       setErr("Network error. Please try again.");
     } finally {
       setLoading(false);
     }
   }
-  function handleSuccess(sessionId) {
-    onSuccess?.(sessionId);
-    const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-in]")?.getAttribute("data-vaultix-after-sign-in") ?? "/";
-    if (target) window.location.href = target;
+  async function handleForgotVerifySubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setInfo(null);
+    setStep("forgot-reset");
   }
+  async function handleResetPasswordSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/reset-password`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, code: forgotCode, new_password: newPassword })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Could not reset password.");
+        return;
+      }
+      handleSuccess(data.handshake_token);
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  const title = {
+    email: "Sign in",
+    password: "Enter password",
+    passkey: "Passkey sign-in",
+    totp: "Two-factor code",
+    forgot: "Forgot password",
+    "forgot-verify": "Enter reset code",
+    "forgot-reset": "New password"
+  };
+  const subtitle = {
+    email: "Welcome back",
+    password: email,
+    passkey: email,
+    totp: "Enter the 6-digit code from your authenticator app",
+    forgot: "We'll send a reset code to your email",
+    "forgot-verify": `Code sent to ${email}`,
+    "forgot-reset": "Choose a new password"
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -346,34 +448,29 @@ function SignIn({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ jsx2("div", { className: "inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 shadow-lg shadow-purple-500/30 mb-4", children: /* @__PURE__ */ jsx2(LockIcon, {}) }),
-          /* @__PURE__ */ jsxs("h1", { className: "text-xl font-semibold text-white/90", children: [
-            step === "email" && "Sign in",
-            step === "password" && "Enter password",
-            step === "passkey" && "Passkey sign-in",
-            step === "totp" && "Two-factor code"
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-[#475569] mt-1", children: [
-            step === "email" && "Welcome back",
-            step === "password" && email,
-            step === "passkey" && email,
-            step === "totp" && "Enter the 6-digit code from your authenticator app"
-          ] })
+          /* @__PURE__ */ jsx2("h1", { className: "text-xl font-semibold text-white/90", children: title[step] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-sm text-[#475569] mt-1", children: subtitle[step] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-red-400", children: error }) }),
-          step === "email" && /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
-            /* @__PURE__ */ jsx2(
-              Input,
-              {
-                type: "email",
-                placeholder: "you@company.com",
-                value: email,
-                onChange: setEmail,
-                autoFocus: true,
-                required: true
-              }
-            ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+          info && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-blue-500/10 border border-blue-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-blue-400", children: info }) }),
+          step === "email" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(GoogleButton, { onClick: handleGoogleSignIn }),
+            /* @__PURE__ */ jsx2(Divider, {}),
+            /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+              /* @__PURE__ */ jsx2(
+                Input,
+                {
+                  type: "email",
+                  placeholder: "you@company.com",
+                  value: email,
+                  onChange: setEmail,
+                  autoFocus: true,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+            ] })
           ] }),
           step === "password" && /* @__PURE__ */ jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -388,6 +485,10 @@ function SignIn({
               }
             ),
             /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
+              setStep("forgot");
+              setError(null);
+            }, children: "Forgot password?" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
           ] }),
           step === "passkey" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -416,6 +517,58 @@ function SignIn({
             ),
             /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Verify" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+          ] }),
+          step === "forgot" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "email",
+                placeholder: "you@company.com",
+                value: email,
+                onChange: setEmail,
+                autoFocus: true,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Send reset code" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
+              setStep("password");
+              setError(null);
+            }, children: "\u2190 Back" })
+          ] }),
+          step === "forgot-verify" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotVerifySubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                pattern: "[0-9]{6}",
+                maxLength: 6,
+                placeholder: "000000",
+                value: forgotCode,
+                onChange: setForgotCode,
+                autoFocus: true,
+                required: true,
+                className: "text-center tracking-[0.4em] text-lg"
+              }
+            ),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+          ] }),
+          step === "forgot-reset" && /* @__PURE__ */ jsxs("form", { onSubmit: handleResetPasswordSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "password",
+                placeholder: "New password",
+                value: newPassword,
+                onChange: setNewPassword,
+                autoFocus: true,
+                required: true,
+                minLength: 8
+              }
+            ),
+            /* @__PURE__ */ jsx2(PasswordStrength, { password: newPassword }),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Reset password" })
           ] })
         ] })
       ]
@@ -468,28 +621,63 @@ function GhostButton({ children, onClick }) {
     }
   );
 }
-function Spinner() {
+function GoogleButton({ onClick }) {
   return /* @__PURE__ */ jsxs(
-    "svg",
+    "button",
     {
-      className: "animate-spin h-4 w-4 text-white/80",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
+      type: "button",
+      onClick,
+      className: clsx(
+        "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
+        "text-sm font-medium text-white/80",
+        "bg-white/5 border border-white/10",
+        "hover:bg-white/10 hover:border-white/20",
+        "transition-all duration-150"
+      ),
       children: [
-        /* @__PURE__ */ jsx2("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
+        /* @__PURE__ */ jsx2(GoogleIcon, {}),
+        "Continue with Google"
       ]
     }
   );
 }
+function Divider() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
+    /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
+  ] });
+}
+function PasswordStrength({ password }) {
+  const score = (() => {
+    if (password.length === 0) return 0;
+    let s = 0;
+    if (password.length >= 8) s++;
+    if (/[A-Z]/.test(password)) s++;
+    if (/[0-9]/.test(password)) s++;
+    if (/[^A-Za-z0-9]/.test(password)) s++;
+    return s;
+  })();
+  if (password.length === 0) return null;
+  const labels = ["", "Weak", "Fair", "Good", "Strong"];
+  const colors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: clsx("flex-1 h-0.5 rounded-full transition-all duration-300", i <= score ? colors[score] : "bg-white/10")
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-[#475569]", children: labels[score] })
+  ] });
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4 text-white/80", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx2("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx2("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] });
+}
 function LockIcon() {
   return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx2("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
@@ -506,6 +694,14 @@ function FingerprintIcon() {
     /* @__PURE__ */ jsx2("path", { d: "M12 12v.01" })
   ] });
 }
+function GoogleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+    /* @__PURE__ */ jsx2("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+  ] });
+}
 
 // src/components/SignUp.tsx
 import { clsx as clsx2 } from "clsx";
@@ -519,6 +715,18 @@ function resolveApiOrigin3(prop) {
   }
   return "";
 }
+function resolveAfterSignUpUrl(redirectUrlProp) {
+  if (redirectUrlProp) return redirectUrlProp;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-after-sign-up]");
+    const attr = el?.getAttribute("data-vaultix-after-sign-up");
+    if (attr) return attr;
+    const params = new URLSearchParams(window.location.search);
+    const redirectUrl = params.get("redirect_url");
+    if (redirectUrl) return redirectUrl;
+  }
+  return "/";
+}
 function SignUp({
   redirectUrl,
   onSuccess,
@@ -538,6 +746,18 @@ function SignUp({
     setError(msg);
     onError?.(msg);
   }
+  function handleSuccess(handshakeToken) {
+    onSuccess?.(handshakeToken);
+    const target = resolveAfterSignUpUrl(redirectUrl);
+    const url = new URL(target, window.location.origin);
+    url.searchParams.set("__vaultix_handshake", handshakeToken);
+    window.location.href = url.toString();
+  }
+  function handleGoogleSignUp() {
+    const target = resolveAfterSignUpUrl(redirectUrl);
+    const params = new URLSearchParams({ redirect_url: target });
+    window.location.href = `${apiOrigin}/v1/auth/oauth/google?${params}`;
+  }
   async function handleEmailPassword(e) {
     e.preventDefault();
     setError(null);
@@ -581,9 +801,7 @@ function SignUp({
         setErr(data.error ?? "Invalid code.");
         return;
       }
-      onSuccess?.(data.session_id);
-      const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-up]")?.getAttribute("data-vaultix-after-sign-up") ?? "/";
-      if (target) window.location.href = target;
+      handleSuccess(data.handshake_token);
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -618,31 +836,35 @@ function SignUp({
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-400", children: error }) }),
-          (step === "email" || step === "password") && /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
-            /* @__PURE__ */ jsx3(
-              SignUpInput,
-              {
-                type: "email",
-                placeholder: "you@company.com",
-                value: email,
-                onChange: setEmail,
-                autoFocus: true,
-                required: true
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              SignUpInput,
-              {
-                type: "password",
-                placeholder: "Create a password",
-                value: password,
-                onChange: setPassword,
-                required: true,
-                minLength: 8
-              }
-            ),
-            /* @__PURE__ */ jsx3(PasswordStrength, { password }),
-            /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Create account" })
+          step === "email" && /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx3(GoogleButton2, { onClick: handleGoogleSignUp }),
+            /* @__PURE__ */ jsx3(Divider2, {}),
+            /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+              /* @__PURE__ */ jsx3(
+                SignUpInput,
+                {
+                  type: "email",
+                  placeholder: "you@company.com",
+                  value: email,
+                  onChange: setEmail,
+                  autoFocus: true,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SignUpInput,
+                {
+                  type: "password",
+                  placeholder: "Create a password",
+                  value: password,
+                  onChange: setPassword,
+                  required: true,
+                  minLength: 8
+                }
+              ),
+              /* @__PURE__ */ jsx3(PasswordStrength2, { password }),
+              /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Create account" })
+            ] })
           ] }),
           step === "verify" && /* @__PURE__ */ jsxs2("form", { onSubmit: handleVerification, className: "space-y-3", children: [
             /* @__PURE__ */ jsx3(
@@ -712,7 +934,34 @@ function SignUpPrimaryButton({
     }
   );
 }
-function PasswordStrength({ password }) {
+function GoogleButton2({ onClick }) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: clsx2(
+        "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
+        "text-sm font-medium text-white/80",
+        "bg-white/5 border border-white/10",
+        "hover:bg-white/10 hover:border-white/20",
+        "transition-all duration-150"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(GoogleIcon2, {}),
+        "Continue with Google"
+      ]
+    }
+  );
+}
+function Divider2() {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-white/8" }),
+    /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-white/8" })
+  ] });
+}
+function PasswordStrength2({ password }) {
   const score = (() => {
     if (password.length === 0) return 0;
     let s = 0;
@@ -724,13 +973,7 @@ function PasswordStrength({ password }) {
   })();
   if (password.length === 0) return null;
   const labels = ["", "Weak", "Fair", "Good", "Strong"];
-  const colors = [
-    "",
-    "bg-red-500",
-    "bg-amber-400",
-    "bg-blue-400",
-    "bg-emerald-400"
-  ];
+  const colors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx3("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx3(
       "div",
@@ -746,35 +989,61 @@ function PasswordStrength({ password }) {
   ] });
 }
 function Spinner2() {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      className: "animate-spin h-4 w-4 text-white/80",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx3(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs2("svg", { className: "animate-spin h-4 w-4 text-white/80", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx3("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] });
 }
 function SparkleIcon() {
   return /* @__PURE__ */ jsx3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
 }
+function GoogleIcon2() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx3("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+    /* @__PURE__ */ jsx3("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+  ] });
+}
+
+// src/components/SignedIn.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+function SignedIn({ children }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  if (!isLoaded || !isSignedIn) return null;
+  return /* @__PURE__ */ jsx4(Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  if (!isLoaded || isSignedIn) return null;
+  return /* @__PURE__ */ jsx4(Fragment, { children });
+}
+
+// src/components/RedirectComponents.tsx
+import { useEffect as useEffect2 } from "react";
+function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  useEffect2(() => {
+    if (isLoaded && !isSignedIn) {
+      window.location.href = redirectUrl;
+    }
+  }, [isLoaded, isSignedIn, redirectUrl]);
+  return null;
+}
+function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  useEffect2(() => {
+    if (isLoaded && !isSignedIn) {
+      window.location.href = redirectUrl;
+    }
+  }, [isLoaded, isSignedIn, redirectUrl]);
+  return null;
+}
 
 // src/components/UserButton.tsx
 import { clsx as clsx3 } from "clsx";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function UserButton({
   showName = false,
   afterSignOutUrl,
@@ -784,7 +1053,7 @@ function UserButton({
   const [open, setOpen] = useState4(false);
   const [signingOut, setSigningOut] = useState4(false);
   const containerRef = useRef3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -793,7 +1062,7 @@ function UserButton({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  if (!isLoaded) return /* @__PURE__ */ jsx4(AvatarSkeleton, {});
+  if (!isLoaded) return /* @__PURE__ */ jsx5(AvatarSkeleton, {});
   if (!isSignedIn || !user) return null;
   const initials = [user.firstName, user.lastName].filter(Boolean).map((s) => s.charAt(0)).join("").toUpperCase() || user.email.charAt(0).toUpperCase();
   async function handleSignOut() {
@@ -808,8 +1077,8 @@ function UserButton({
         onClick: () => setOpen((o) => !o),
         className: "flex items-center gap-2 rounded-xl p-1 hover:bg-white/8 transition-colors",
         children: [
-          /* @__PURE__ */ jsx4(Avatar, { initials, imageUrl: user.imageUrl }),
-          showName && /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
+          /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl }),
+          showName && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
         ]
       }
     ),
@@ -823,39 +1092,39 @@ function UserButton({
         style: { background: "rgba(22,27,45,0.96)" },
         children: [
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
-            /* @__PURE__ */ jsx4(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
+            /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
             /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-              (user.firstName || user.lastName) && /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
-              /* @__PURE__ */ jsx4("p", { className: "text-xs text-[#475569] truncate", children: user.email })
+              (user.firstName || user.lastName) && /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
+              /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569] truncate", children: user.email })
             ] })
           ] }),
-          session && /* @__PURE__ */ jsx4("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx4("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
-            /* @__PURE__ */ jsx4(RiskBadge, { level: session.riskLevel })
+          session && /* @__PURE__ */ jsx5("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
+            /* @__PURE__ */ jsx5(RiskBadge, { level: session.riskLevel })
           ] }) }),
           /* @__PURE__ */ jsxs3("div", { className: "p-2", children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               DropdownItem,
               {
                 label: "Manage account",
-                icon: /* @__PURE__ */ jsx4(UserIcon, {}),
+                icon: /* @__PURE__ */ jsx5(UserIcon, {}),
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               DropdownItem,
               {
                 label: "Security settings",
-                icon: /* @__PURE__ */ jsx4(ShieldIcon, {}),
+                icon: /* @__PURE__ */ jsx5(ShieldIcon, {}),
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx4("div", { className: "h-px bg-white/8 my-1" }),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5("div", { className: "h-px bg-white/8 my-1" }),
+            /* @__PURE__ */ jsx5(
               DropdownItem,
               {
                 label: signingOut ? "Signing out\u2026" : "Sign out",
-                icon: /* @__PURE__ */ jsx4(SignOutIcon, {}),
+                icon: /* @__PURE__ */ jsx5(SignOutIcon, {}),
                 onClick: handleSignOut,
                 destructive: true
               }
@@ -871,7 +1140,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
   if (imageUrl) {
     return (
       // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "img",
         {
           src: imageUrl,
@@ -881,7 +1150,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
       )
     );
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: clsx3(
@@ -894,7 +1163,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
   );
 }
 function AvatarSkeleton() {
-  return /* @__PURE__ */ jsx4("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
+  return /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
 }
 function RiskBadge({ level }) {
   const styles = {
@@ -903,7 +1172,7 @@ function RiskBadge({ level }) {
     high: "bg-orange-500/15 text-orange-400 border-orange-500/30",
     critical: "bg-red-500/15 text-red-400 border-red-500/30"
   };
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "span",
     {
       className: clsx3(
@@ -924,7 +1193,7 @@ function DropdownItem({ label, icon, onClick, destructive }) {
         destructive ? "text-red-400 hover:bg-red-500/10" : "text-white/70 hover:text-white hover:bg-white/8"
       ),
       children: [
-        /* @__PURE__ */ jsx4("span", { className: "opacity-70", children: icon }),
+        /* @__PURE__ */ jsx5("span", { className: "opacity-70", children: icon }),
         label
       ]
     }
@@ -932,25 +1201,25 @@ function DropdownItem({ label, icon, onClick, destructive }) {
 }
 function UserIcon() {
   return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx4("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "7", r: "4" })
+    /* @__PURE__ */ jsx5("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "7", r: "4" })
   ] });
 }
 function ShieldIcon() {
-  return /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+  return /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
 }
 function SignOutIcon() {
   return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx4("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-    /* @__PURE__ */ jsx4("polyline", { points: "16 17 21 12 16 7" }),
-    /* @__PURE__ */ jsx4("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+    /* @__PURE__ */ jsx5("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "16 17 21 12 16 7" }),
+    /* @__PURE__ */ jsx5("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
   ] });
 }
 
 // src/components/OrganizationSwitcher.tsx
 import { clsx as clsx4 } from "clsx";
-import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function resolveApiOrigin4() {
   if (typeof document !== "undefined") {
     const el = document.querySelector("[data-vaultix-api]");
@@ -967,7 +1236,7 @@ function OrganizationSwitcher({
   const [orgs, setOrgs] = useState5([]);
   const [switching, setSwitching] = useState5(null);
   const containerRef = useRef4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -976,7 +1245,7 @@ function OrganizationSwitcher({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const api = resolveApiOrigin4();
     fetch(`${api}/v1/me/organizations`, { credentials: "include" }).then((r) => r.json()).then(
@@ -1021,12 +1290,12 @@ function OrganizationSwitcher({
           "transition-all duration-150"
         ),
         children: [
-          /* @__PURE__ */ jsx5(OrgAvatar, { initials }),
+          /* @__PURE__ */ jsx6(OrgAvatar, { initials }),
           /* @__PURE__ */ jsxs4("div", { className: "text-left min-w-0", children: [
-            /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-white/90 truncate max-w-[120px]", children: displayName }),
-            organization && /* @__PURE__ */ jsx5("p", { className: "text-[10px] text-[#475569] capitalize", children: organization.role })
+            /* @__PURE__ */ jsx6("p", { className: "text-sm font-semibold text-white/90 truncate max-w-[120px]", children: displayName }),
+            organization && /* @__PURE__ */ jsx6("p", { className: "text-[10px] text-[#475569] capitalize", children: organization.role })
           ] }),
-          /* @__PURE__ */ jsx5(ChevronIcon, {})
+          /* @__PURE__ */ jsx6(ChevronIcon, {})
         ]
       }
     ),
@@ -1039,9 +1308,9 @@ function OrganizationSwitcher({
         ),
         style: { background: "rgba(22,27,45,0.96)" },
         children: [
-          /* @__PURE__ */ jsx5("div", { className: "px-4 py-3 border-b border-white/8", children: /* @__PURE__ */ jsx5("p", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Switch organization" }) }),
+          /* @__PURE__ */ jsx6("div", { className: "px-4 py-3 border-b border-white/8", children: /* @__PURE__ */ jsx6("p", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Switch organization" }) }),
           /* @__PURE__ */ jsxs4("div", { className: "p-2 max-h-56 overflow-y-auto", children: [
-            orgs.length === 0 && /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569] text-center py-4", children: "Loading\u2026" }),
+            orgs.length === 0 && /* @__PURE__ */ jsx6("p", { className: "text-xs text-[#475569] text-center py-4", children: "Loading\u2026" }),
             orgs.map((org) => {
               const isActive = org.id === organization?.id;
               const orgInitials = org.name.split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
@@ -1055,9 +1324,9 @@ function OrganizationSwitcher({
                     isActive ? "bg-purple-500/10 cursor-default" : "hover:bg-white/8 cursor-pointer"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx5(OrgAvatar, { initials: orgInitials, active: isActive }),
+                    /* @__PURE__ */ jsx6(OrgAvatar, { initials: orgInitials, active: isActive }),
                     /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx6(
                         "p",
                         {
                           className: clsx4(
@@ -1067,17 +1336,17 @@ function OrganizationSwitcher({
                           children: org.name
                         }
                       ),
-                      /* @__PURE__ */ jsx5("p", { className: "text-[10px] text-[#475569] capitalize", children: org.role })
+                      /* @__PURE__ */ jsx6("p", { className: "text-[10px] text-[#475569] capitalize", children: org.role })
                     ] }),
-                    isActive && /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" }),
-                    switching === org.id && /* @__PURE__ */ jsx5(MiniSpinner, {})
+                    isActive && /* @__PURE__ */ jsx6("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" }),
+                    switching === org.id && /* @__PURE__ */ jsx6(MiniSpinner, {})
                   ]
                 },
                 org.id
               );
             })
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "p-2 border-t border-white/8", children: /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx6("div", { className: "p-2 border-t border-white/8", children: /* @__PURE__ */ jsxs4(
             "button",
             {
               onClick: () => {
@@ -1085,7 +1354,7 @@ function OrganizationSwitcher({
               },
               className: "w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#475569] hover:text-white hover:bg-white/8 transition-colors",
               children: [
-                /* @__PURE__ */ jsx5(PlusIcon, {}),
+                /* @__PURE__ */ jsx6(PlusIcon, {}),
                 "Create organization"
               ]
             }
@@ -1099,7 +1368,7 @@ function OrgAvatar({
   initials,
   active = false
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: clsx4(
@@ -1111,7 +1380,7 @@ function OrgAvatar({
   );
 }
 function ChevronIcon() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       width: "12",
@@ -1123,28 +1392,33 @@ function ChevronIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className: "text-[#475569] shrink-0",
-      children: /* @__PURE__ */ jsx5("polyline", { points: "6 9 12 15 18 9" })
+      children: /* @__PURE__ */ jsx6("polyline", { points: "6 9 12 15 18 9" })
     }
   );
 }
 function PlusIcon() {
   return /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx5("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx6("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] });
 }
 function MiniSpinner() {
   return /* @__PURE__ */ jsxs4("svg", { className: "animate-spin h-3 w-3 text-[#475569]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ jsx5("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ jsx5("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    /* @__PURE__ */ jsx6("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx6("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] });
 }
 export {
   OrganizationSwitcher,
+  RedirectToSignIn,
+  RedirectToSignUp,
   SignIn,
   SignUp,
+  SignedIn,
+  SignedOut,
   UserButton,
   VaultixProvider,
+  useAuth,
   useOrganization,
   useSession,
   useUser,