@cyberia-auth/auth 0.1.0

package/dist/index.js

@@ -0,0 +1,900 @@
+// src/index.tsx
+import axios from "axios";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultAppConfig = {
+  appName: "App Auth",
+  organizationName: "Cyberia",
+  primaryColor: "#4f46e5",
+  secondaryColor: "#1f2937"
+};
+var DEFAULT_BACKEND_URL = "https://auth.cyberia.host";
+function CyberiaAuth({
+  backendUrl,
+  apiToken,
+  oauthRedirectUri,
+  initialMode = "register",
+  hideModeSwitch = false,
+  onAuthSuccess
+}) {
+  const backendBaseUrl = resolveBackendBaseUrl(backendUrl);
+  const [mode, setMode] = useState(initialMode);
+  const [config, setConfig] = useState(() => getCachedAppConfig(apiToken));
+  const [isBrandingResolved, setIsBrandingResolved] = useState(
+    () => Boolean(getCachedAppConfig(apiToken))
+  );
+  const [message, setMessage] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    const cached = getCachedAppConfig(apiToken);
+    if (cached) {
+      setConfig(cached);
+      setIsBrandingResolved(true);
+    } else {
+      setIsBrandingResolved(false);
+    }
+    void axios.get(`${backendBaseUrl}/api/public/app/config`, {
+      params: { apiToken }
+    }).then((res) => {
+      setConfig(res.data);
+      cacheAppConfig(apiToken, res.data);
+    }).catch((error) => {
+      const errorMessage = error instanceof Error ? error.message : "Unable to load app config";
+      setMessage(errorMessage);
+      if (!cached) {
+        setConfig(defaultAppConfig);
+      }
+    }).finally(() => {
+      setIsBrandingResolved(true);
+    });
+  }, [apiToken, backendBaseUrl]);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setIsLoading(true);
+    setMessage("");
+    const form = new FormData(event.currentTarget);
+    try {
+      const endpoint = mode === "register" ? "/api/public/auth/register" : "/api/public/auth/login";
+      const payload = {
+        apiToken,
+        email: String(form.get("email")),
+        password: String(form.get("password")),
+        displayName: String(form.get("displayName") ?? "")
+      };
+      const response = await axios.post(`${backendBaseUrl}${endpoint}`, payload);
+      setMessage("");
+      onAuthSuccess?.(response.data);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const apiError = error.response?.data;
+        setMessage(apiError?.error ?? error.message);
+      } else {
+        setMessage("Request failed");
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const startOAuth = (provider) => {
+    if (!oauthRedirectUri) {
+      setMessage("oauthRedirectUri is required for social login");
+      return;
+    }
+    const url = new URL(`${backendBaseUrl}/api/public/oauth/${provider}/start`);
+    url.searchParams.set("apiToken", apiToken);
+    url.searchParams.set("redirectUri", oauthRedirectUri);
+    window.location.href = url.toString();
+  };
+  const accent = resolveColor(config?.primaryColor, defaultAppConfig.primaryColor);
+  const brandName = config?.organizationName ?? defaultAppConfig.organizationName;
+  const title = mode === "login" ? `Sign in to ${brandName}` : `Create your ${brandName} account`;
+  const subtitle = mode === "login" ? "Welcome back! Please sign in to continue" : "Create your account to continue";
+  if (!isBrandingResolved) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          border: "1px solid #e5e7eb",
+          borderRadius: 14,
+          padding: 20,
+          background: "#ffffff",
+          fontFamily: "Inter, Arial, sans-serif",
+          minHeight: 320,
+          display: "grid",
+          placeItems: "center",
+          color: "#6b7280"
+        },
+        children: "Loading sign-in..."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 14,
+        padding: 0,
+        background: "#ffffff",
+        overflow: "hidden",
+        fontFamily: "Inter, Arial, sans-serif",
+        width: "100%",
+        maxWidth: 500,
+        margin: "0 auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: 20, display: "grid", gap: 14 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "grid", justifyItems: "center", gap: 10 }, children: [
+            config?.logoUrl ? /* @__PURE__ */ jsx("img", { src: config.logoUrl, alt: "logo", style: { width: 56, height: 56, objectFit: "contain" } }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 56,
+                  height: 56,
+                  borderRadius: 10,
+                  background: accent,
+                  color: "#fff",
+                  display: "grid",
+                  placeItems: "center",
+                  fontSize: 24,
+                  fontWeight: 700
+                },
+                children: (brandName[0] ?? "C").toUpperCase()
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+              /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 6px 0", fontSize: 16 }, children: title }),
+              /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#6b7280", fontSize: 13 }, children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
+            /* @__PURE__ */ jsxs("button", { type: "button", style: socialButtonStyle, onClick: () => startOAuth("google"), children: [
+              /* @__PURE__ */ jsx(GoogleIcon, {}),
+              "Google"
+            ] }),
+            /* @__PURE__ */ jsxs("button", { type: "button", style: socialButtonStyle, onClick: () => startOAuth("microsoft"), children: [
+              /* @__PURE__ */ jsx(MicrosoftIcon, {}),
+              "Microsoft"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr auto 1fr",
+                alignItems: "center",
+                gap: 12
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#e5e7eb" } }),
+                /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 14 }, children: "or" }),
+                /* @__PURE__ */ jsx("div", { style: { height: 1, background: "#e5e7eb" } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "grid", gap: 10 }, children: [
+            mode === "register" && /* @__PURE__ */ jsxs("label", { style: fieldLabelStyle, children: [
+              "Full name",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  name: "displayName",
+                  placeholder: "Enter your full name",
+                  required: true,
+                  style: inputStyle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: fieldLabelStyle, children: [
+              "Email address",
+              /* @__PURE__ */ jsx("input", { type: "email", name: "email", placeholder: "Enter your email address", required: true, style: inputStyle })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { style: fieldLabelStyle, children: [
+              "Password",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "password",
+                  name: "password",
+                  placeholder: "Enter your password",
+                  minLength: 8,
+                  required: true,
+                  style: inputStyle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: isLoading,
+                style: {
+                  background: accent,
+                  color: "white",
+                  border: 0,
+                  borderRadius: 9,
+                  padding: "11px 12px",
+                  fontSize: 14,
+                  fontWeight: 400
+                },
+                children: isLoading ? "Please wait..." : mode === "register" ? "Create account" : "Continue"
+              }
+            )
+          ] }),
+          message && /* @__PURE__ */ jsx("p", { style: { fontSize: 13, margin: 0 }, children: message })
+        ] }),
+        !hideModeSwitch && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid #e5e7eb",
+              padding: 14,
+              textAlign: "center",
+              background: "#fafafa"
+            },
+            children: [
+              mode === "login" ? "Don't have an account? " : "Already have an account? ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMode(mode === "login" ? "register" : "login"),
+                  style: {
+                    border: "none",
+                    background: "transparent",
+                    color: "#111827",
+                    textDecoration: "underline",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    padding: 0
+                  },
+                  children: mode === "login" ? "Sign up" : "Sign in"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var CyberiaAuthContext = createContext(null);
+function CyberiaAuthProvider({
+  backendUrl,
+  apiToken,
+  oauthRedirectUri,
+  children,
+  storageKey = "cyberia_auth_session"
+}) {
+  const backendBaseUrl = resolveBackendBaseUrl(backendUrl);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [session, setSession] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalMode, setModalMode] = useState("login");
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const stored = window.localStorage.getItem(storageKey);
+    if (stored) {
+      try {
+        setSession(JSON.parse(stored));
+      } catch {
+        window.localStorage.removeItem(storageKey);
+      }
+    }
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+    const email = params.get("email");
+    const displayName = params.get("displayName");
+    const provider = params.get("provider");
+    if (token && email && provider) {
+      const oauthUser = {
+        id: email,
+        email,
+        displayName: displayName ?? email
+      };
+      const nextSession = { token, user: oauthUser };
+      window.localStorage.setItem(storageKey, JSON.stringify(nextSession));
+      setSession(nextSession);
+      const cleanUrl = new URL(window.location.href);
+      cleanUrl.searchParams.delete("token");
+      cleanUrl.searchParams.delete("email");
+      cleanUrl.searchParams.delete("displayName");
+      cleanUrl.searchParams.delete("provider");
+      window.history.replaceState({}, "", cleanUrl.toString());
+    }
+    setIsLoaded(true);
+  }, [storageKey]);
+  const setSessionAndPersist = (nextSession) => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(storageKey, JSON.stringify(nextSession));
+    }
+    setSession(nextSession);
+  };
+  const setSessionFromAuth = (result) => {
+    setSessionAndPersist({
+      token: result.token,
+      user: result.user
+    });
+  };
+  const signOut = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(storageKey);
+    }
+    setSession(null);
+  };
+  const value = useMemo(
+    () => ({
+      isLoaded,
+      isSignedIn: Boolean(session?.token),
+      user: session?.user ?? null,
+      token: session?.token ?? null,
+      openSignIn: () => {
+        setModalMode("login");
+        setModalOpen(true);
+      },
+      openSignUp: () => {
+        setModalMode("register");
+        setModalOpen(true);
+      },
+      signOut,
+      setSessionFromAuth
+    }),
+    [isLoaded, session, setSessionFromAuth]
+  );
+  return /* @__PURE__ */ jsxs(CyberiaAuthContext.Provider, { value, children: [
+    children,
+    modalOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.55)",
+          display: "grid",
+          placeItems: "center",
+          zIndex: 9999,
+          padding: 16
+        },
+        onClick: () => setModalOpen(false),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { width: "100%", maxWidth: 440, background: "#fff", borderRadius: 12 },
+            onClick: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx(
+              CyberiaAuth,
+              {
+                backendUrl: backendBaseUrl,
+                apiToken,
+                oauthRedirectUri,
+                initialMode: modalMode,
+                hideModeSwitch: false,
+                onAuthSuccess: (result) => {
+                  setSessionFromAuth(result);
+                  setModalOpen(false);
+                }
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function useCyberiaAuth() {
+  const context = useContext(CyberiaAuthContext);
+  if (!context) {
+    throw new Error("useCyberiaAuth must be used inside <CyberiaAuthProvider>");
+  }
+  return context;
+}
+function Show({ when, children }) {
+  const { isSignedIn } = useCyberiaAuth();
+  if (when === "signed-in" && !isSignedIn) {
+    return null;
+  }
+  if (when === "signed-out" && isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SignedIn({ children }) {
+  const { isLoaded, isSignedIn } = useCyberiaAuth();
+  if (!isLoaded || !isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isLoaded, isSignedIn } = useCyberiaAuth();
+  if (!isLoaded || isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SignInButton({ children }) {
+  const { openSignIn } = useCyberiaAuth();
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: openSignIn, children: children ?? "Sign in" });
+}
+function SignUpButton({ children }) {
+  const { openSignUp } = useCyberiaAuth();
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: openSignUp, children: children ?? "Sign up" });
+}
+function SignOutButton({ children }) {
+  const { signOut } = useCyberiaAuth();
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: signOut, children: children ?? "Sign out" });
+}
+function UserButton() {
+  const { user, signOut, openSignIn, openSignUp } = useCyberiaAuth();
+  const [open, setOpen] = useState(false);
+  const [manageOpen, setManageOpen] = useState(false);
+  const [tab, setTab] = useState("profile");
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const onOutsideClick = (event) => {
+      if (!menuRef.current) {
+        return;
+      }
+      if (!menuRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("click", onOutsideClick);
+    return () => window.removeEventListener("click", onOutsideClick);
+  }, []);
+  const initials = (user?.displayName ?? user?.email ?? "U").slice(0, 1).toUpperCase();
+  const profileName = user?.displayName ?? "Guest";
+  const profileEmail = user?.email ?? "No email";
+  const userAgent = typeof navigator === "undefined" ? "Unknown device" : navigator.userAgent;
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        style: {
+          width: 36,
+          height: 36,
+          borderRadius: 999,
+          border: "1px solid #d1d5db",
+          background: "#fff",
+          fontWeight: 700,
+          cursor: "pointer"
+        },
+        "aria-label": "Open user menu",
+        children: initials
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          top: 42,
+          minWidth: 320,
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          borderRadius: 12,
+          boxShadow: "0 12px 24px rgba(0,0,0,0.08)",
+          padding: 0,
+          zIndex: 50
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, padding: 14, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 44,
+                  height: 44,
+                  borderRadius: 999,
+                  border: "1px solid #d1d5db",
+                  display: "grid",
+                  placeItems: "center",
+                  fontWeight: 700,
+                  color: "#111827",
+                  background: "#f8fafc"
+                },
+                children: initials
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid" }, children: [
+              /* @__PURE__ */ jsx("strong", { style: { fontSize: 16, color: "#111827", lineHeight: 1.2 }, children: profileName }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#111827", fontSize: 14 }, children: profileEmail })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("hr", { style: { border: 0, borderTop: "1px solid #e5e7eb", margin: 0 } }),
+          !user && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: menuItemButtonStyleLarge,
+                onClick: () => {
+                  openSignIn();
+                  setOpen(false);
+                },
+                children: "Sign in"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: menuItemButtonStyleLarge,
+                onClick: () => {
+                  openSignUp();
+                  setOpen(false);
+                },
+                children: "Sign up"
+              }
+            )
+          ] }),
+          user && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: menuItemButtonStyleLarge,
+                onClick: () => {
+                  setManageOpen(true);
+                  setTab("profile");
+                  setOpen(false);
+                },
+                children: "Manage account"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: menuItemButtonStyleLarge,
+                onClick: () => {
+                  signOut();
+                  setOpen(false);
+                },
+                children: "Sign out"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e5e7eb", textAlign: "center", padding: "12px 10px", color: "#6b7280" }, children: [
+            "Secured by ",
+            /* @__PURE__ */ jsx("strong", { children: "cyberia auth" })
+          ] })
+        ]
+      }
+    ),
+    manageOpen && user && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          background: "rgba(17,24,39,0.55)",
+          display: "grid",
+          placeItems: "center",
+          padding: 20
+        },
+        onClick: () => setManageOpen(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 940,
+              minHeight: 540,
+              background: "#fff",
+              borderRadius: 10,
+              border: "1px solid #e5e7eb",
+              display: "grid",
+              gridTemplateColumns: "220px 1fr",
+              overflow: "hidden"
+            },
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "aside",
+                {
+                  style: {
+                    borderRight: "1px solid #e5e7eb",
+                    padding: 22,
+                    background: "#fafafa",
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 30, color: "#111827" }, children: "Account" }),
+                    /* @__PURE__ */ jsx("p", { style: { marginTop: 6, color: "#6b7280", fontSize: 12 }, children: "Manage your account info." }),
+                    /* @__PURE__ */ jsxs("div", { style: { marginTop: 20, display: "grid", gap: 8 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setTab("profile"),
+                          style: {
+                            ...tabButtonStyle,
+                            background: tab === "profile" ? "#ece8ff" : "transparent",
+                            color: tab === "profile" ? "#6d28d9" : "#4b5563"
+                          },
+                          children: "Profile"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setTab("security"),
+                          style: {
+                            ...tabButtonStyle,
+                            background: tab === "security" ? "#ece8ff" : "transparent",
+                            color: tab === "security" ? "#6d28d9" : "#4b5563"
+                          },
+                          children: "Security"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { marginTop: "auto", paddingTop: 24, color: "#6b7280", fontSize: 15 }, children: [
+                      "Secure by ",
+                      /* @__PURE__ */ jsx("strong", { children: "Cyberia Auth" })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("main", { style: { padding: 26 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 22, color: "#111827" }, children: tab === "profile" ? "Profile details" : "Security" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setManageOpen(false),
+                      style: { ...menuItemButtonStyle, width: "auto", fontSize: 24 },
+                      children: "\xD7"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("hr", { style: { border: 0, borderTop: "1px solid #e5e7eb", margin: "16px 0 20px" } }),
+                tab === "profile" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 20 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: profileRowStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: 14 }, children: "Profile" }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                      /* @__PURE__ */ jsx("div", { style: avatarLargeStyle, children: initials }),
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: 16 }, children: profileName })
+                    ] }),
+                    /* @__PURE__ */ jsx("button", { type: "button", style: linkButtonStyle, children: "Update profile" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: profileRowStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: 14 }, children: "Email addresses" }),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 16 }, children: profileEmail }),
+                    /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 14 }, children: "Primary" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: profileRowStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: 14 }, children: "Connected accounts" }),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 16 }, children: "Google / Microsoft" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", style: linkButtonStyle, children: "Connect account" })
+                  ] })
+                ] }),
+                tab === "security" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 20 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: profileRowStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: 14 }, children: "Password" }),
+                    /* @__PURE__ */ jsx("div", {}),
+                    /* @__PURE__ */ jsx("button", { type: "button", style: linkButtonStyle, children: "Set password" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { ...profileRowStyle, alignItems: "start" }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#374151", fontSize: 14 }, children: "Active devices" }),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 14, color: "#374151", maxWidth: 430 }, children: userAgent }),
+                    /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 14 }, children: "This device" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: profileRowStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: { color: "#b91c1c", fontSize: 14 }, children: "Delete account" }),
+                    /* @__PURE__ */ jsx("div", {}),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        style: {
+                          border: "none",
+                          borderRadius: 8,
+                          background: "#ef4444",
+                          color: "#fff",
+                          padding: "8px 12px",
+                          cursor: "pointer",
+                          fontSize: 14
+                        },
+                        children: "Delete account"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function Protect({
+  children,
+  fallback = null
+}) {
+  const { isLoaded, isSignedIn } = useCyberiaAuth();
+  if (!isLoaded) {
+    return null;
+  }
+  return isSignedIn ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+var cyberiaAuth = CyberiaAuth;
+var index_default = CyberiaAuth;
+var menuItemButtonStyle = {
+  width: "100%",
+  display: "block",
+  textAlign: "left",
+  padding: "8px 10px",
+  border: "none",
+  borderRadius: 8,
+  background: "transparent",
+  cursor: "pointer"
+};
+var inputStyle = {
+  width: "100%",
+  padding: 11,
+  borderRadius: 9,
+  border: "1px solid #d1d5db",
+  fontSize: 13
+};
+var fieldLabelStyle = {
+  display: "grid",
+  gap: 6,
+  fontSize: 14,
+  color: "#111827",
+  fontWeight: 600
+};
+var socialButtonStyle = {
+  border: "1px solid #d1d5db",
+  borderRadius: 9,
+  padding: "10px 12px",
+  background: "#ffffff",
+  cursor: "pointer",
+  fontSize: 16,
+  fontWeight: 300,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8
+};
+function GoogleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", height: "20", viewBox: "0 0 20 20", width: "20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19.9905 10.1871C19.9905 9.36773 19.9224 8.7698 19.7752 8.14972H10.1992V11.848H15.8201C15.7068 12.7671 15.0948 14.1512 13.7349 15.0813L13.7159 15.2051L16.7436 17.497L16.9534 17.5174C18.8798 15.779 19.9905 13.2211 19.9905 10.1871Z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.1992 19.9313C12.953 19.9313 15.2648 19.0454 16.9534 17.5174L13.7349 15.0813C12.8737 15.6682 11.7177 16.0779 10.1992 16.0779C7.50211 16.0779 5.21297 14.3395 4.39695 11.9366L4.27734 11.9466L1.12906 14.3273L1.08789 14.4391C2.76508 17.6945 6.21016 19.9313 10.1992 19.9313Z", fill: "#34A853" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.39695 11.9366C4.18164 11.3166 4.05703 10.6521 4.05703 9.96565C4.05703 9.27908 4.18164 8.61473 4.38562 7.99466L4.37992 7.8626L1.19219 5.44366L1.08789 5.49214C0.396641 6.84305 0 8.36008 0 9.96565C0 11.5712 0.396641 13.0882 1.08789 14.4391L4.39695 11.9366Z", fill: "#FBBC05" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.1992 3.85336C12.1144 3.85336 13.4062 4.66168 14.1429 5.33718L17.0213 2.59107C15.2535 0.985496 12.953 0 10.1992 0C6.21016 0 2.76508 2.23672 1.08789 5.49214L4.38563 7.99466C5.21297 5.59183 7.50211 3.85336 10.1992 3.85336Z", fill: "#EB4335" })
+  ] });
+}
+function MicrosoftIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", height: "20", viewBox: "0 0 20 20", width: "20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M0 0H20V20H0V0Z", fill: "#F3F3F3" }),
+    /* @__PURE__ */ jsx("path", { d: "M0.870117 0.869141H9.56577V9.56479H0.870117V0.869141Z", fill: "#F35325" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.4346 0.869141H19.1303V9.56479H10.4346V0.869141Z", fill: "#81BC06" }),
+    /* @__PURE__ */ jsx("path", { d: "M0.870117 10.4346H9.56577V19.1302H0.870117V10.4346Z", fill: "#05A6F0" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.4346 10.4346H19.1303V19.1302H10.4346V10.4346Z", fill: "#FFBA08" })
+  ] });
+}
+function resolveColor(value, fallback) {
+  if (!value || value.trim().length === 0) {
+    return fallback;
+  }
+  return value;
+}
+function resolveBackendBaseUrl(backendUrl) {
+  const candidate = backendUrl?.trim() || DEFAULT_BACKEND_URL;
+  return candidate.replace(/\/+$/, "");
+}
+function getBrandingCacheKey(apiToken) {
+  return `cyberia_auth_branding:${apiToken}`;
+}
+function getCachedAppConfig(apiToken) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const raw = window.localStorage.getItem(getBrandingCacheKey(apiToken));
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed.organizationName || !parsed.appName) {
+      return null;
+    }
+    return {
+      appName: parsed.appName,
+      organizationName: parsed.organizationName,
+      primaryColor: resolveColor(parsed.primaryColor, defaultAppConfig.primaryColor),
+      secondaryColor: resolveColor(parsed.secondaryColor, defaultAppConfig.secondaryColor),
+      logoUrl: parsed.logoUrl
+    };
+  } catch {
+    return null;
+  }
+}
+function cacheAppConfig(apiToken, config) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(getBrandingCacheKey(apiToken), JSON.stringify(config));
+  } catch {
+  }
+}
+var tabButtonStyle = {
+  border: "none",
+  borderRadius: 8,
+  padding: "8px 10px",
+  textAlign: "left",
+  cursor: "pointer",
+  fontSize: 14
+};
+var profileRowStyle = {
+  display: "grid",
+  gridTemplateColumns: "220px 1fr auto",
+  alignItems: "center",
+  gap: 12,
+  paddingBottom: 12,
+  borderBottom: "1px solid #f1f5f9"
+};
+var avatarLargeStyle = {
+  width: 48,
+  height: 48,
+  borderRadius: 999,
+  border: "1px solid #d1d5db",
+  display: "grid",
+  placeItems: "center",
+  fontWeight: 700,
+  color: "#111827",
+  background: "#f8fafc"
+};
+var linkButtonStyle = {
+  border: "none",
+  background: "transparent",
+  color: "#6d28d9",
+  cursor: "pointer",
+  fontSize: 14
+};
+var menuItemButtonStyleLarge = {
+  width: "100%",
+  display: "block",
+  textAlign: "left",
+  padding: "14px 14px",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: 15,
+  borderTop: "1px solid #f1f5f9"
+};
+export {
+  CyberiaAuth,
+  CyberiaAuthProvider,
+  Protect,
+  Show,
+  SignInButton,
+  SignOutButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+  cyberiaAuth,
+  index_default as default,
+  useCyberiaAuth
+};