@authrobo/react 0.2.0 → 0.5.0

package/dist/index.cjs

@@ -25,7 +25,10 @@ __export(index_exports, {
   AuthRoboAuth: () => AuthRoboAuth,
   AuthRoboButton: () => AuthRoboButton,
   AuthRoboProvider: () => AuthRoboProvider,
+  BRAND_STYLE: () => BRAND_STYLE,
   PROVIDER_META: () => PROVIDER_META,
+  Spinner: () => Spinner,
+  prefetchAppConfig: () => prefetchAppConfig,
   startSignIn: () => startSignIn,
   useAppConfig: () => useAppConfig,
   useLastMethod: () => useLastMethod
@@ -36,6 +39,13 @@ var import_react = require("react");
 // src/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var sz = { width: 18, height: 18, "aria-hidden": true };
+var LINKEDIN_PATH = "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z";
+var GITHUB_PATH = "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6a4.7 4.7 0 0 1 1.2-3.2c-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2a4.7 4.7 0 0 1 1.2 3.2c0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3";
+var APPLE_PATH = "M17.05 12.04c-.03-2.7 2.2-4 2.3-4.06-1.25-1.84-3.2-2.09-3.9-2.12-1.66-.17-3.24.98-4.08.98-.84 0-2.14-.96-3.52-.93-1.81.03-3.48 1.05-4.41 2.67-1.88 3.27-.48 8.1 1.35 10.76.9 1.3 1.97 2.76 3.38 2.71 1.36-.05 1.87-.88 3.51-.88 1.64 0 2.1.88 3.53.85 1.46-.03 2.38-1.33 3.27-2.63 1.03-1.51 1.46-2.97 1.48-3.05-.03-.01-2.84-1.09-2.87-4.32M14.4 4.2c.74-.9 1.24-2.15 1.1-3.4-1.07.04-2.36.71-3.13 1.61-.69.8-1.29 2.07-1.13 3.29 1.19.09 2.41-.61 3.16-1.5";
+var FACEBOOK_PATH = "M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07";
+function Glyph({ d, fill }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", ...sz, fill, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d }) });
+}
 function GoogleIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 48 48", ...sz, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#FFC107", d: "M43.6 20.5H42V20H24v8h11.3C33.7 32.9 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z" }),
@@ -44,15 +54,6 @@ function GoogleIcon() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#1976D2", d: "M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.6l6.3 5.2C41.9 36 44 30.5 44 24c0-1.3-.1-2.3-.4-3.5z" })
   ] });
 }
-function LinkedInIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", ...sz, fill: "#0A66C2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" }) });
-}
-function GitHubIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", ...sz, fill: "#181717", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6a4.7 4.7 0 0 1 1.2-3.2c-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2a4.7 4.7 0 0 1 1.2 3.2c0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3" }) });
-}
-function AppleIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", ...sz, fill: "#000", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.05 12.04c-.03-2.7 2.2-4 2.3-4.06-1.25-1.84-3.2-2.09-3.9-2.12-1.66-.17-3.24.98-4.08.98-.84 0-2.14-.96-3.52-.93-1.81.03-3.48 1.05-4.41 2.67-1.88 3.27-.48 8.1 1.35 10.76.9 1.3 1.97 2.76 3.38 2.71 1.36-.05 1.87-.88 3.51-.88 1.64 0 2.1.88 3.53.85 1.46-.03 2.38-1.33 3.27-2.63 1.03-1.51 1.46-2.97 1.48-3.05-.03-.01-2.84-1.09-2.87-4.32M14.4 4.2c.74-.9 1.24-2.15 1.1-3.4-1.07.04-2.36.71-3.13 1.61-.69.8-1.29 2.07-1.13 3.29 1.19.09 2.41-.61 3.16-1.5" }) });
-}
 function MailIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", ...sz, fill: "none", stroke: "#334155", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
@@ -61,12 +62,26 @@ function MailIcon() {
 }
 var PROVIDER_META = {
   google: { label: "Google", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GoogleIcon, {}) },
-  linkedin: { label: "LinkedIn", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkedInIcon, {}) },
-  github: { label: "GitHub", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GitHubIcon, {}) },
-  apple: { label: "Apple", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppleIcon, {}) },
+  linkedin: { label: "LinkedIn", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: LINKEDIN_PATH, fill: "#0A66C2" }) },
+  github: { label: "GitHub", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: GITHUB_PATH, fill: "#181717" }) },
+  apple: { label: "Apple", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: APPLE_PATH, fill: "#000" }) },
+  facebook: { label: "Facebook", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: FACEBOOK_PATH, fill: "#1877F2" }) },
   password: { label: "email", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MailIcon, {}) },
   magic_link: { label: "magic link", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MailIcon, {}) }
 };
+var WHITE_MARKS = {
+  linkedin: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: LINKEDIN_PATH, fill: "#fff" }),
+  github: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: GITHUB_PATH, fill: "#fff" }),
+  apple: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: APPLE_PATH, fill: "#fff" }),
+  facebook: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, { d: FACEBOOK_PATH, fill: "#fff" })
+};
+var BRAND_STYLE = {
+  google: { bg: "#ffffff", fg: "#1a73e8", border: "#dadce0" },
+  linkedin: { bg: "#0a66c2", fg: "#ffffff", border: "#0a66c2", whiteIcon: true },
+  github: { bg: "#181717", fg: "#ffffff", border: "#181717", whiteIcon: true },
+  apple: { bg: "#000000", fg: "#ffffff", border: "#000000", whiteIcon: true },
+  facebook: { bg: "#1877f2", fg: "#ffffff", border: "#1877f2", whiteIcon: true }
+};
 
 // src/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -75,6 +90,9 @@ function AuthRoboProvider({
   config,
   children
 }) {
+  (0, import_react.useEffect)(() => {
+    prefetchAppConfig(config);
+  }, [config.issuerUrl, config.clientId]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfigContext.Provider, { value: config, children });
 }
 function useResolvedConfig(override) {
@@ -94,6 +112,18 @@ function randomState() {
 }
 var EMAIL_METHODS = ["password", "magic_link"];
 function startSignIn(config, method, opts) {
+  try {
+    localStorage.setItem(lastMethodKey(config.clientId), method);
+  } catch {
+  }
+  if (opts?.startPath) {
+    const p = new URLSearchParams();
+    if (opts.loginHint) p.set("login_hint", opts.loginHint);
+    if (opts.screen) p.set("screen", opts.screen);
+    const qs = p.toString();
+    window.location.assign(`${opts.startPath.replace(/\/$/, "")}/${method}/start${qs ? `?${qs}` : ""}`);
+    return;
+  }
   const base = config.issuerUrl.replace(/\/$/, "");
   const state = opts?.state ?? randomState();
   try {
@@ -106,12 +136,16 @@ function startSignIn(config, method, opts) {
     state
   });
   if (opts?.loginHint) params.set("login_hint", opts.loginHint);
-  try {
-    localStorage.setItem(lastMethodKey(config.clientId), method);
-  } catch {
+  let path;
+  if (method === "magic_link") {
+    params.set("screen", "magic");
+    path = "/login";
+  } else if (method === "password") {
+    path = opts?.screen === "register" ? "/register" : "/login";
+  } else {
+    path = `/api/v1/auth/${method}/start`;
   }
-  const url = EMAIL_METHODS.includes(method) ? `${base}/login?${params.toString()}` : `${base}/api/v1/auth/${method}/start?${params.toString()}`;
-  window.location.assign(url);
+  window.location.assign(`${base}${path}?${params.toString()}`);
 }
 var lastMethodKey = (clientId) => `authrobo:last-method:${clientId}`;
 function useLastMethod(clientId) {
@@ -124,28 +158,54 @@ function useLastMethod(clientId) {
   }, [clientId]);
   return last;
 }
+var LOADING_STATE = { data: null, loading: true, error: null };
+var configStore = /* @__PURE__ */ new Map();
+var configKey = (c) => `${c.issuerUrl.replace(/\/$/, "")}|${c.clientId}`;
+function configEntry(key) {
+  let e = configStore.get(key);
+  if (!e) {
+    e = { state: LOADING_STATE, listeners: /* @__PURE__ */ new Set() };
+    configStore.set(key, e);
+  }
+  return e;
+}
+function prefetchAppConfig(config) {
+  if (typeof window === "undefined") return Promise.resolve();
+  const key = configKey(config);
+  const e = configEntry(key);
+  if (e.state.data || e.promise) return e.promise ?? Promise.resolve();
+  const base = config.issuerUrl.replace(/\/$/, "");
+  e.promise = fetch(`${base}/api/v1/config?client_id=${encodeURIComponent(config.clientId)}`).then((r) => r.ok ? r.json() : Promise.reject(new Error(`config ${r.status}`))).then((j) => {
+    e.state = {
+      data: { name: j.name, brandColor: j.brand_color, logoUrl: j.logo_url, methods: j.methods },
+      loading: false,
+      error: null
+    };
+  }).catch((err) => {
+    e.state = { data: null, loading: false, error: String(err?.message ?? err) };
+  }).finally(() => {
+    e.promise = void 0;
+    e.listeners.forEach((l) => l());
+  });
+  return e.promise;
+}
 function useAppConfig(config) {
   const c = useResolvedConfig(config);
-  const [state, setState] = (0, import_react.useState)({
-    data: null,
-    loading: true,
-    error: null
-  });
+  const key = configKey(c);
+  const subscribe = (0, import_react.useCallback)(
+    (cb) => {
+      const e = configEntry(key);
+      e.listeners.add(cb);
+      return () => {
+        e.listeners.delete(cb);
+      };
+    },
+    [key]
+  );
+  const getSnapshot = (0, import_react.useCallback)(() => configEntry(key).state, [key]);
+  const state = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, () => LOADING_STATE);
   (0, import_react.useEffect)(() => {
-    let active = true;
-    setState({ data: null, loading: true, error: null });
-    const base = c.issuerUrl.replace(/\/$/, "");
-    fetch(`${base}/api/v1/config?client_id=${encodeURIComponent(c.clientId)}`).then((r) => r.ok ? r.json() : Promise.reject(new Error(`config ${r.status}`))).then((j) => {
-      if (!active) return;
-      setState({
-        data: { name: j.name, brandColor: j.brand_color, logoUrl: j.logo_url, methods: j.methods },
-        loading: false,
-        error: null
-      });
-    }).catch((e) => active && setState({ data: null, loading: false, error: String(e?.message ?? e) }));
-    return () => {
-      active = false;
-    };
+    prefetchAppConfig(c);
   }, [c.issuerUrl, c.clientId]);
   return state;
 }
@@ -157,7 +217,9 @@ var TOKENS_LIGHT = `
   --authrobo-error:#b91c1c;--authrobo-divider-fg:#9ca3af;--authrobo-divider-line:#e5e7eb;
   --authrobo-overlay:rgba(2,6,23,.55);--authrobo-close:#94a3b8;--authrobo-close-hover:#334155;
   --authrobo-focus:#2b8aff;--authrobo-card-shadow:rgba(2,6,23,.4);
-  --authrobo-last-bg:#e7efff;--authrobo-last-fg:#2563eb;`;
+  --authrobo-last-bg:#e7efff;--authrobo-last-fg:#2563eb;
+  --authrobo-input-bg:#fff;--authrobo-input-fg:#111827;
+  --authrobo-tabs-bg:#f1f5f9;--authrobo-accent:#4338ca;--authrobo-accent-fg:#fff;`;
 var TOKENS_DARK = `
   --authrobo-btn-bg:#0e1626;--authrobo-btn-fg:#e6edf8;--authrobo-btn-border:#28374f;
   --authrobo-btn-hover-bg:#16233a;--authrobo-btn-hover-border:#3a4d6b;
@@ -165,7 +227,9 @@ var TOKENS_DARK = `
   --authrobo-error:#f87171;--authrobo-divider-fg:#64748b;--authrobo-divider-line:#223049;
   --authrobo-overlay:rgba(2,6,23,.72);--authrobo-close:#64748b;--authrobo-close-hover:#cbd5e1;
   --authrobo-focus:#46c8ff;--authrobo-card-shadow:rgba(0,0,0,.6);
-  --authrobo-last-bg:rgba(70,160,255,.18);--authrobo-last-fg:#8fc4ff;`;
+  --authrobo-last-bg:rgba(70,160,255,.18);--authrobo-last-fg:#8fc4ff;
+  --authrobo-input-bg:#0e1626;--authrobo-input-fg:#e6edf8;
+  --authrobo-tabs-bg:#0e1626;--authrobo-accent:#4338ca;--authrobo-accent-fg:#fff;`;
 var TOKEN_ROOTS = ".authrobo-btn,.authrobo-stack,.authrobo-card,.authrobo-overlay,.authrobo-divider,.authrobo-title";
 var scoped = (prefix, tokens) => TOKEN_ROOTS.split(",").map((s) => `${prefix}${s.trim()}`).join(",") + `{${tokens}}`;
 var CSS = `
@@ -188,6 +252,33 @@ ${scoped('[data-theme="dark"] ', TOKENS_DARK)}
 .authrobo-error{color:var(--authrobo-error);font:14px system-ui,sans-serif;margin:0;}
 .authrobo-divider{display:flex;align-items:center;gap:10px;color:var(--authrobo-divider-fg);font:500 12px system-ui,sans-serif;}
 .authrobo-divider::before,.authrobo-divider::after{content:"";height:1px;flex:1;background:var(--authrobo-divider-line);}
+.authrobo-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--authrobo-btn-border);
+  background:var(--authrobo-tabs-bg);border-radius:10px;}
+.authrobo-tab{flex:1;border:0;background:transparent;border-radius:7px;padding:8px 0;cursor:pointer;
+  font:600 13px system-ui,sans-serif;color:var(--authrobo-muted);transition:background .15s ease,color .15s ease;}
+.authrobo-tab:hover{color:var(--authrobo-title-fg);}
+.authrobo-tab[aria-selected="true"]{background:var(--authrobo-accent);color:var(--authrobo-accent-fg);}
+.authrobo-tab:focus-visible{outline:2px solid var(--authrobo-focus);outline-offset:2px;}
+.authrobo-form{display:flex;flex-direction:column;gap:10px;}
+.authrobo-label{font:500 12.5px system-ui,sans-serif;color:var(--authrobo-muted);}
+.authrobo-input{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--authrobo-btn-border);
+  background:var(--authrobo-input-bg);color:var(--authrobo-input-fg);border-radius:10px;padding:10px 12px;
+  font:14px system-ui,sans-serif;}
+.authrobo-input:focus{outline:none;border-color:var(--authrobo-accent);}
+.authrobo-primary{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;border:0;
+  background:var(--authrobo-accent);color:var(--authrobo-accent-fg);border-radius:10px;padding:11px 14px;
+  font:700 14px system-ui,sans-serif;cursor:pointer;transition:filter .15s ease;}
+.authrobo-primary:hover{filter:brightness(.96);}
+.authrobo-primary:focus-visible{outline:2px solid var(--authrobo-focus);outline-offset:2px;}
+.authrobo-primary:disabled{opacity:.7;cursor:default;}
+.authrobo-btn-brand{transition:filter .15s ease,box-shadow .15s ease;}
+.authrobo-btn-brand:hover{filter:brightness(.96);}
+.authrobo-spinner{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.2em;border-radius:50%;
+  border:2px solid color-mix(in srgb, currentColor 24%, transparent);border-top-color:currentColor;
+  animation:authrobo-spin .7s linear infinite;}
+.authrobo-loading{display:flex;align-items:center;gap:10px;padding:4px 0;}
+@keyframes authrobo-spin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion: reduce){.authrobo-spinner{animation-duration:1.4s}}
 .authrobo-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;
   justify-content:center;padding:16px;background:var(--authrobo-overlay);backdrop-filter:blur(2px);
   animation:authrobo-fade .16s ease-out both;}
@@ -209,6 +300,17 @@ function useInjectStyles() {
     document.head.appendChild(el);
   }, []);
 }
+function Spinner({ style, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: className ? `authrobo-spinner ${className}` : "authrobo-spinner",
+      role: "status",
+      "aria-label": "Loading",
+      style
+    }
+  );
+}
 function AuthRoboButton({
   provider,
   config,
@@ -216,36 +318,216 @@ function AuthRoboButton({
   className,
   style,
   onClick,
-  lastUsed
+  lastUsed,
+  startPath,
+  buttonStyle = "neutral"
 }) {
   useInjectStyles();
   const c = useResolvedConfig(config);
   const meta = PROVIDER_META[provider];
+  const brand = buttonStyle === "branded" ? BRAND_STYLE[provider] : void 0;
+  const icon = brand?.whiteIcon ? WHITE_MARKS[provider] ?? meta.icon : meta.icon;
+  const classes = ["authrobo-btn", brand ? "authrobo-btn-brand" : "", className].filter(Boolean).join(" ");
+  const brandStyle = brand ? { background: brand.bg, color: brand.fg, borderColor: brand.border } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       type: "button",
-      className: className ? `authrobo-btn ${className}` : "authrobo-btn",
-      style,
+      className: classes,
+      style: { ...brandStyle, ...style },
       onClick: () => {
         onClick?.();
-        startSignIn(c, provider);
+        startSignIn(c, provider, { startPath });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "inline-flex", alignItems: "center" }, children: meta.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "inline-flex", alignItems: "center" }, children: icon }),
         label ?? `Continue with ${meta.label}`,
         lastUsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "authrobo-last", children: "Last used" })
       ]
     }
   );
 }
+var EMAIL_TABS = [
+  { key: "magic", method: "magic_link", label: "Magic Link", cta: "Email me a link", requires: "magic_link", fields: { name: false, password: false }, proxyPath: "magic" },
+  { key: "register", method: "password", label: "Register", cta: "Create account", requires: "password", fields: { name: true, password: true }, proxyPath: "register" },
+  { key: "login", method: "password", label: "Login", cta: "Sign in", requires: "password", fields: { name: false, password: true }, proxyPath: "login" }
+];
+function EmailSwitcher({
+  config,
+  methods,
+  startPath,
+  onSuccess
+}) {
+  const tabs = (0, import_react.useMemo)(() => EMAIL_TABS.filter((t) => methods.includes(t.requires)), [methods]);
+  const [active, setActive] = (0, import_react.useState)(tabs[0]?.key ?? "login");
+  const [name, setName] = (0, import_react.useState)("");
+  const [email, setEmail] = (0, import_react.useState)("");
+  const [password, setPassword] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [sent, setSent] = (0, import_react.useState)(false);
+  const stateRef = (0, import_react.useRef)(null);
+  const proxy = !!startPath;
+  (0, import_react.useEffect)(() => {
+    if (tabs.length && !tabs.some((t) => t.key === active)) setActive(tabs[0].key);
+  }, [tabs, active]);
+  if (!tabs.length) return null;
+  const current = tabs.find((t) => t.key === active) ?? tabs[0];
+  const base = config.issuerUrl.replace(/\/$/, "");
+  const directAction = current.key === "magic" ? `${base}/api/v1/auth/magic/start` : `${base}/api/v1/auth/authorize`;
+  const selectTab = (key) => {
+    setActive(key);
+    setError(null);
+    setSent(false);
+  };
+  async function proxySubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const body = { email: email.trim() };
+      if (current.fields.password) body.password = password;
+      if (current.fields.name && name.trim()) body.name = name.trim();
+      const res = await fetch(`${startPath.replace(/\/$/, "")}/${current.proxyPath}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        throw new Error(d?.error || "Something went wrong. Please try again.");
+      }
+      try {
+        localStorage.setItem(lastMethodKey(config.clientId), current.method);
+      } catch {
+      }
+      if (current.key === "magic") setSent(true);
+      else onSuccess?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  function directSubmit() {
+    const s = randomState();
+    try {
+      sessionStorage.setItem("authrobo:state", s);
+    } catch {
+    }
+    if (stateRef.current) stateRef.current.value = s;
+    try {
+      localStorage.setItem(lastMethodKey(config.clientId), current.method);
+    } catch {
+    }
+    setLoading(true);
+  }
+  if (sent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "authrobo-stack", role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "authrobo-title", children: "Check your email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "authrobo-muted", children: [
+        "We sent a sign-in link to ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: email.trim() }),
+        ". It works once and expires shortly."
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "authrobo-stack", children: [
+    tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "authrobo-tabs", role: "tablist", "aria-label": "Sign-in method", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": current.key === t.key,
+        className: "authrobo-tab",
+        onClick: () => selectTab(t.key),
+        children: t.label
+      },
+      t.key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "form",
+      {
+        className: "authrobo-form",
+        method: proxy ? void 0 : "post",
+        action: proxy ? void 0 : directAction,
+        onSubmit: proxy ? proxySubmit : directSubmit,
+        children: [
+          !proxy && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: "client_id", value: config.clientId }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: "redirect_uri", value: config.redirectUri }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: "state", ref: stateRef }),
+            current.key !== "magic" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: "mode", value: current.key === "register" ? "register" : "login" })
+          ] }),
+          current.fields.name && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "authrobo-label", children: [
+            "Name",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                className: "authrobo-input",
+                name: "name",
+                type: "text",
+                autoComplete: "name",
+                placeholder: "Your name",
+                value: name,
+                onChange: (e) => setName(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "authrobo-label", children: [
+            "Email",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                className: "authrobo-input",
+                name: "email",
+                type: "email",
+                required: true,
+                autoComplete: "email",
+                placeholder: "you@example.com",
+                value: email,
+                onChange: (e) => setEmail(e.target.value)
+              }
+            )
+          ] }),
+          current.fields.password && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "authrobo-label", children: [
+            "Password",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                className: "authrobo-input",
+                name: "password",
+                type: "password",
+                required: true,
+                minLength: current.key === "register" ? 8 : void 0,
+                autoComplete: current.key === "register" ? "new-password" : "current-password",
+                placeholder: current.key === "register" ? "At least 8 characters" : "Your password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value)
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "authrobo-error", children: error }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", className: "authrobo-primary", disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}),
+            " Please wait\u2026"
+          ] }) : current.cta })
+        ]
+      }
+    )
+  ] });
+}
 function AuthRoboAuth({
   config,
   mode = "inline",
   open = true,
   onClose,
+  onSuccess,
   title,
-  methods: only
+  showHeader = true,
+  methods: only,
+  startPath,
+  buttonStyle = "neutral"
 }) {
   useInjectStyles();
   const c = useResolvedConfig(config);
@@ -266,24 +548,28 @@ function AuthRoboAuth({
   const email = shown.filter((m) => EMAIL_METHODS.includes(m));
   const badge = (m) => shown.length > 1 && m === lastMethod;
   const panel = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "authrobo-stack", children: [
-    (data?.logoUrl || data?.name) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }, children: [
+    showHeader && (data?.logoUrl || data?.name) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }, children: [
       data?.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: data.logoUrl, alt: "", width: 28, height: 28, style: { borderRadius: 6 } }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "authrobo-title", children: title ?? `Sign in${data?.name ? ` to ${data.name}` : ""}` })
     ] }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "authrobo-muted", children: "Loading sign-in options\u2026" }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "authrobo-loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { style: { color: "var(--authrobo-accent)" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "authrobo-muted", children: "Loading sign-in options\u2026" })
+    ] }),
     error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "authrobo-error", children: "Couldn't load sign-in options." }),
-    social.map((m) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AuthRoboButton, { provider: m, config: c, lastUsed: badge(m) }, m)),
-    email.length > 0 && social.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "authrobo-divider", children: "or" }),
-    email.map((m) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    social.map((m) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       AuthRoboButton,
       {
         provider: m,
         config: c,
-        label: m === "magic_link" ? "Email me a sign-in link" : "Continue with email",
-        lastUsed: badge(m)
+        lastUsed: badge(m),
+        startPath,
+        buttonStyle
       },
       m
     )),
+    email.length > 0 && social.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "authrobo-divider", children: "or" }),
+    email.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmailSwitcher, { config: c, methods: email, startPath, onSuccess }),
     !loading && !error && shown.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "authrobo-muted", children: "No sign-in methods are enabled for this app." })
   ] });
   if (mode === "inline") return panel;
@@ -297,7 +583,10 @@ function AuthRoboAuth({
   AuthRoboAuth,
   AuthRoboButton,
   AuthRoboProvider,
+  BRAND_STYLE,
   PROVIDER_META,
+  Spinner,
+  prefetchAppConfig,
   startSignIn,
   useAppConfig,
   useLastMethod