@foir/sdk 0.2.0 → 0.4.0

package/dist/react.js

@@ -0,0 +1,812 @@
+"use client";
+
+// src/react/FoirProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/graphql/foir-request.ts
+import { print } from "graphql";
+function isFoirPreview(env) {
+  return env.FOIR_PREVIEW === "true";
+}
+var FoirRequestError = class extends Error {
+  /** HTTP status code, when the request failed at the HTTP layer. */
+  status;
+  /** GraphQL errors, when the request failed with a no-data error envelope. */
+  graphQLErrors;
+  cause;
+  constructor(message, options) {
+    super(message);
+    this.name = "FoirRequestError";
+    this.cause = options?.cause;
+    this.status = options?.status;
+    this.graphQLErrors = options?.graphQLErrors;
+  }
+};
+async function foirRequest(env, document, variables, options) {
+  const endpoint = env.PLATFORM_API_URL;
+  const apiKey = isFoirPreview(env) ? env.PLATFORM_PREVIEW_API_KEY ?? env.PLATFORM_API_KEY : env.PLATFORM_API_KEY;
+  if (!endpoint || !apiKey) {
+    throw new FoirRequestError(
+      "[foir] PLATFORM_API_URL or PLATFORM_API_KEY is not set \u2014 add them to .env"
+    );
+  }
+  const headers = {
+    "Content-Type": "application/json",
+    "x-api-key": apiKey
+  };
+  if (isFoirPreview(env)) {
+    headers["X-Foir-Schema-Channel"] = "draft";
+  }
+  if (options?.bearerToken) {
+    headers["Authorization"] = `Bearer ${options.bearerToken}`;
+  }
+  let res;
+  try {
+    res = await fetch(endpoint, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ query: print(document), variables })
+    });
+  } catch (err) {
+    throw new FoirRequestError("[foir] network error", { cause: err });
+  }
+  if (!res.ok) {
+    throw new FoirRequestError(`[foir] HTTP ${res.status} ${res.statusText}`, {
+      status: res.status
+    });
+  }
+  const json = await res.json();
+  if (json.errors?.length) {
+    const msg = json.errors.map((e) => e.message).join("; ");
+    if (json.data) {
+      console.warn(`[foir] GraphQL partial errors (data returned): ${msg}`);
+    } else {
+      throw new FoirRequestError(`[foir] GraphQL errors: ${msg}`, {
+        graphQLErrors: json.errors
+      });
+    }
+  }
+  if (!json.data) {
+    throw new FoirRequestError("[foir] empty GraphQL response");
+  }
+  return json.data;
+}
+
+// src/auth/operations.ts
+import { parse } from "graphql";
+var AUTH_RESULT_FIELDS = "token refreshToken customerId email";
+var CustomerLoginDocument = parse(
+  `mutation CustomerLogin($email: String!, $password: String!) {
+    customerLogin(email: $email, password: $password) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var CustomerRegisterDocument = parse(
+  `mutation CustomerRegister($email: String!, $password: String!) {
+    customerRegister(email: $email, password: $password) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var CustomerRefreshTokenDocument = parse(
+  `mutation CustomerRefreshToken($refreshToken: String!) {
+    customerRefreshToken(refreshToken: $refreshToken) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var CustomerRequestOTPDocument = parse(
+  `mutation CustomerRequestOTP($email: String!) {
+    customerRequestOTP(email: $email)
+  }`
+);
+var CustomerLoginOTPDocument = parse(
+  `mutation CustomerLoginOTP($email: String!, $otp: String!) {
+    customerLoginOTP(email: $email, otp: $otp) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var CustomerLoginWithProviderDocument = parse(
+  `mutation CustomerLoginWithProvider($input: ProviderLoginInput!) {
+    customerLoginWithProvider(input: $input) { redirectUrl token }
+  }`
+);
+var CustomerProviderCallbackDocument = parse(
+  `mutation CustomerProviderCallback($input: ProviderCallbackInput!) {
+    customerProviderCallback(input: $input) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var CustomerProviderVerifyOTPDocument = parse(
+  `mutation CustomerProviderVerifyOTP($input: ProviderOTPVerifyInput!) {
+    customerProviderVerifyOTP(input: $input) { ${AUTH_RESULT_FIELDS} }
+  }`
+);
+var AuthProvidersDocument = parse(
+  `query AuthProviders {
+    authProviders { key name type isDefault }
+  }`
+);
+
+// src/auth/auth.ts
+var TOKEN_KEY = "foir:token";
+var REFRESH_KEY = "foir:refreshToken";
+var CUSTOMER_ID_KEY = "foir:customerId";
+var EMAIL_KEY = "foir:email";
+async function customerLogin(env, vars) {
+  return (await foirRequest(env, CustomerLoginDocument, vars)).customerLogin;
+}
+async function customerRegister(env, vars) {
+  return (await foirRequest(env, CustomerRegisterDocument, vars)).customerRegister;
+}
+async function customerRequestOTP(env, email) {
+  return (await foirRequest(env, CustomerRequestOTPDocument, { email })).customerRequestOTP;
+}
+async function customerLoginOTP(env, vars) {
+  return (await foirRequest(env, CustomerLoginOTPDocument, vars)).customerLoginOTP;
+}
+async function customerRefreshToken(env, refreshToken) {
+  return (await foirRequest(env, CustomerRefreshTokenDocument, { refreshToken })).customerRefreshToken;
+}
+async function customerLoginWithProvider(env, input) {
+  return (await foirRequest(env, CustomerLoginWithProviderDocument, { input })).customerLoginWithProvider;
+}
+async function customerProviderCallback(env, input) {
+  return (await foirRequest(env, CustomerProviderCallbackDocument, { input })).customerProviderCallback;
+}
+async function getAuthProviders(env) {
+  return (await foirRequest(env, AuthProvidersDocument, {})).authProviders;
+}
+async function saveSession(adapter, result) {
+  await adapter.set(TOKEN_KEY, result.token);
+  await adapter.set(REFRESH_KEY, result.refreshToken);
+  await adapter.set(CUSTOMER_ID_KEY, result.customerId);
+  await adapter.set(EMAIL_KEY, result.email);
+  return { id: result.customerId, email: result.email };
+}
+async function clearSession(adapter) {
+  await adapter.unset(TOKEN_KEY);
+  await adapter.unset(REFRESH_KEY);
+  await adapter.unset(CUSTOMER_ID_KEY);
+  await adapter.unset(EMAIL_KEY);
+}
+async function getSessionToken(adapter) {
+  return await adapter.get(TOKEN_KEY) ?? null;
+}
+async function getSessionCustomer(adapter) {
+  const id = await adapter.get(CUSTOMER_ID_KEY) ?? null;
+  const email = await adapter.get(EMAIL_KEY) ?? null;
+  if (!id) return null;
+  return { id, email: email ?? "" };
+}
+async function loginWithPassword(adapter, env, vars) {
+  return saveSession(adapter, await customerLogin(env, vars));
+}
+async function registerWithPassword(adapter, env, vars) {
+  return saveSession(adapter, await customerRegister(env, vars));
+}
+async function loginWithOTP(adapter, env, vars) {
+  return saveSession(adapter, await customerLoginOTP(env, vars));
+}
+async function refreshSession(adapter, env) {
+  const refreshToken = await adapter.get(REFRESH_KEY) ?? null;
+  if (!refreshToken) return null;
+  try {
+    const result = await customerRefreshToken(env, refreshToken);
+    await saveSession(adapter, result);
+    return { token: result.token, refreshToken: result.refreshToken };
+  } catch {
+    await clearSession(adapter);
+    return null;
+  }
+}
+
+// src/auth/session-client.ts
+var DEFAULT_SESSION_PATH = "/session/token";
+var DEFAULT_LOGOUT_PATH = "/session/logout";
+var DEFAULT_REFRESH_SKEW_SECONDS = 60;
+var MIN_REFRESH_DELAY_MS = 5e3;
+var CSRF_HEADER = { "X-Foir-Session": "1" };
+function createFoirSessionClient(config) {
+  const sessionUrl = `${trimSlash(config.loginOrigin)}${config.sessionPath ?? DEFAULT_SESSION_PATH}`;
+  const logoutUrl = `${trimSlash(config.loginOrigin)}${config.logoutPath ?? DEFAULT_LOGOUT_PATH}`;
+  const skewMs = (config.refreshSkewSeconds ?? DEFAULT_REFRESH_SKEW_SECONDS) * 1e3;
+  let cached = null;
+  let inflight = null;
+  let timer = null;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  function emit(user) {
+    for (const l of listeners) l(user);
+  }
+  function clearTimer() {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function scheduleRefresh(expiresAt) {
+    clearTimer();
+    if (destroyed || typeof setTimeout === "undefined") return;
+    const delay = Math.max(expiresAt - Date.now() - skewMs, MIN_REFRESH_DELAY_MS);
+    timer = setTimeout(() => {
+      void exchange();
+    }, delay);
+    timer.unref?.();
+  }
+  function forget() {
+    const had = cached !== null;
+    cached = null;
+    clearTimer();
+    if (had) emit(null);
+  }
+  function exchange() {
+    if (inflight) return inflight;
+    const pending = (async () => {
+      let res;
+      try {
+        res = await fetch(sessionUrl, {
+          method: "GET",
+          // The whole point: send the first-party cookie cross-origin (but
+          // same-site) to the login domain. Without this the cookie is not sent.
+          credentials: "include",
+          headers: { ...CSRF_HEADER }
+        });
+      } catch {
+        return cached;
+      }
+      if (res.status === 401) {
+        forget();
+        config.onSignOut?.();
+        return null;
+      }
+      if (!res.ok) return cached;
+      let json;
+      try {
+        json = await res.json();
+      } catch {
+        return cached;
+      }
+      if (!json.access_token || !json.customer_id) return cached;
+      const expiresIn = typeof json.expires_in === "number" ? json.expires_in : 0;
+      const next = {
+        token: json.access_token,
+        expiresAt: Date.now() + expiresIn * 1e3,
+        user: { customerId: json.customer_id, email: json.email ?? "" }
+      };
+      const changed = cached?.user.customerId !== next.user.customerId;
+      cached = next;
+      scheduleRefresh(next.expiresAt);
+      if (changed) emit(next.user);
+      return next;
+    })();
+    inflight = pending;
+    void pending.finally(() => {
+      if (inflight === pending) inflight = null;
+    });
+    return pending;
+  }
+  function fresh() {
+    if (!cached) return null;
+    return Date.now() < cached.expiresAt - skewMs ? cached : null;
+  }
+  return {
+    async getToken() {
+      const hit = fresh();
+      if (hit) return hit.token;
+      const got = await exchange();
+      return got?.token ?? null;
+    },
+    async getUser() {
+      const hit = fresh();
+      if (hit) return hit.user;
+      const got = await exchange();
+      return got?.user ?? null;
+    },
+    async signOut() {
+      try {
+        await fetch(logoutUrl, {
+          method: "POST",
+          credentials: "include",
+          headers: { ...CSRF_HEADER }
+        });
+      } catch {
+      }
+      forget();
+      config.onSignOut?.();
+    },
+    signInUrl(returnTo) {
+      const dest = new URL(trimSlash(config.loginOrigin));
+      const target = returnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
+      if (target && target !== "/") dest.searchParams.set("returnTo", target);
+      return dest.toString();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    destroy() {
+      destroyed = true;
+      clearTimer();
+      listeners.clear();
+    }
+  };
+}
+function trimSlash(s) {
+  return s.replace(/\/+$/, "");
+}
+
+// src/react/localStorageAdapter.ts
+function createLocalStorageAdapter() {
+  const store = () => {
+    try {
+      return typeof window !== "undefined" ? window.localStorage : null;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    get: (key) => store()?.getItem(key) ?? null,
+    set: (key, value) => {
+      store()?.setItem(key, value);
+    },
+    unset: (key) => {
+      store()?.removeItem(key);
+    }
+  };
+}
+
+// src/react/FoirProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var FoirContext = createContext(null);
+function FoirProvider({
+  env,
+  adapter,
+  hostedSession,
+  children
+}) {
+  if (process.env.NODE_ENV !== "production" && adapter && hostedSession) {
+    console.warn(
+      "[foir] FoirProvider: `adapter` is ignored when `hostedSession` is set \u2014 the hosted session keeps the access token in memory and never persists it."
+    );
+  }
+  const envRef = useRef(env);
+  envRef.current = env;
+  const adapterRef = useRef(adapter ?? createLocalStorageAdapter());
+  if (adapter && adapter !== adapterRef.current) adapterRef.current = adapter;
+  const [status, setStatus] = useState("loading");
+  const [customer, setCustomer] = useState(null);
+  const apply = useCallback((c) => {
+    setCustomer(c);
+    setStatus(c ? "authenticated" : "unauthenticated");
+  }, []);
+  const loginOrigin = hostedSession?.loginOrigin;
+  const sessionPath = hostedSession?.sessionPath;
+  const logoutPath = hostedSession?.logoutPath;
+  const refreshSkewSeconds = hostedSession?.refreshSkewSeconds;
+  const hosted = useMemo(() => {
+    if (!loginOrigin) return null;
+    return createFoirSessionClient({
+      loginOrigin,
+      sessionPath,
+      logoutPath,
+      refreshSkewSeconds,
+      onSignOut: () => apply(null)
+    });
+  }, [loginOrigin, sessionPath, logoutPath, refreshSkewSeconds, apply]);
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      if (hosted) {
+        const u = await hosted.getUser();
+        if (!cancelled) apply(u ? { id: u.customerId, email: u.email } : null);
+        return;
+      }
+      const c = await getSessionCustomer(adapterRef.current);
+      if (!cancelled) apply(c);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [apply, hosted]);
+  useEffect(() => {
+    if (!hosted) return;
+    return () => hosted.destroy();
+  }, [hosted]);
+  const assertTokenMode = useCallback(
+    (action) => {
+      if (hosted) {
+        throw new Error(
+          `[foir] ${action}() is not available in hostedSession mode \u2014 the customer signs in at your Foir login domain. Redirect to hostedSignInUrl() instead.`
+        );
+      }
+    },
+    [hosted]
+  );
+  const signIn = useCallback(
+    async (vars) => {
+      assertTokenMode("signIn");
+      const c = await loginWithPassword(adapterRef.current, envRef.current, vars);
+      apply(c);
+      return c;
+    },
+    [apply, assertTokenMode]
+  );
+  const register = useCallback(
+    async (vars) => {
+      assertTokenMode("register");
+      const c = await registerWithPassword(adapterRef.current, envRef.current, vars);
+      apply(c);
+      return c;
+    },
+    [apply, assertTokenMode]
+  );
+  const requestOtp = useCallback(
+    (email) => {
+      assertTokenMode("requestOtp");
+      return customerRequestOTP(envRef.current, email);
+    },
+    [assertTokenMode]
+  );
+  const signInWithOtp = useCallback(
+    async (vars) => {
+      assertTokenMode("signInWithOtp");
+      const c = await loginWithOTP(adapterRef.current, envRef.current, vars);
+      apply(c);
+      return c;
+    },
+    [apply, assertTokenMode]
+  );
+  const signInWithProvider = useCallback(
+    async (providerKey, opts) => {
+      assertTokenMode("signInWithProvider");
+      const res = await customerLoginWithProvider(envRef.current, {
+        providerKey,
+        ...opts
+      });
+      if (res.redirectUrl && typeof window !== "undefined") {
+        window.location.assign(res.redirectUrl);
+      }
+    },
+    [assertTokenMode]
+  );
+  const completeProviderLogin = useCallback(
+    async (input) => {
+      assertTokenMode("completeProviderLogin");
+      const result = await customerProviderCallback(envRef.current, input);
+      const c = await saveSession(adapterRef.current, result);
+      apply(c);
+      return c;
+    },
+    [apply, assertTokenMode]
+  );
+  const signOut = useCallback(async () => {
+    if (hosted) {
+      await hosted.signOut();
+      return;
+    }
+    await clearSession(adapterRef.current);
+    apply(null);
+  }, [apply, hosted]);
+  const refresh = useCallback(async () => {
+    if (hosted) {
+      return await hosted.getToken() !== null;
+    }
+    const tokens = await refreshSession(adapterRef.current, envRef.current);
+    if (!tokens) {
+      apply(null);
+      return false;
+    }
+    return true;
+  }, [apply, hosted]);
+  const getToken = useCallback(
+    () => hosted ? hosted.getToken() : getSessionToken(adapterRef.current),
+    [hosted]
+  );
+  const getProviders = useCallback(() => getAuthProviders(envRef.current), []);
+  const hostedSignInUrl = useMemo(
+    () => hosted ? (returnTo) => hosted.signInUrl(returnTo) : null,
+    [hosted]
+  );
+  const value = useMemo(
+    () => ({
+      status,
+      customer,
+      env,
+      adapter: adapterRef.current,
+      signIn,
+      register,
+      requestOtp,
+      signInWithOtp,
+      signInWithProvider,
+      completeProviderLogin,
+      signOut,
+      refresh,
+      getToken,
+      getProviders,
+      hostedSignInUrl
+    }),
+    [
+      status,
+      customer,
+      env,
+      signIn,
+      register,
+      requestOtp,
+      signInWithOtp,
+      signInWithProvider,
+      completeProviderLogin,
+      signOut,
+      refresh,
+      getToken,
+      getProviders,
+      hostedSignInUrl
+    ]
+  );
+  return /* @__PURE__ */ jsx(FoirContext.Provider, { value, children });
+}
+function useFoirContext() {
+  const ctx = useContext(FoirContext);
+  if (!ctx) {
+    throw new Error("Foir hooks must be used inside a <FoirProvider>.");
+  }
+  return ctx;
+}
+function useFoirSession() {
+  const { status, customer } = useFoirContext();
+  return {
+    status,
+    customer,
+    isLoading: status === "loading",
+    isAuthenticated: status === "authenticated"
+  };
+}
+function useFoirUser() {
+  return useFoirContext().customer;
+}
+function useFoirAuth() {
+  const {
+    signIn,
+    register,
+    requestOtp,
+    signInWithOtp,
+    signInWithProvider,
+    completeProviderLogin,
+    signOut,
+    refresh,
+    getToken,
+    getProviders,
+    hostedSignInUrl
+  } = useFoirContext();
+  return {
+    signIn,
+    register,
+    requestOtp,
+    signInWithOtp,
+    signInWithProvider,
+    completeProviderLogin,
+    signOut,
+    refresh,
+    getToken,
+    getProviders,
+    hostedSignInUrl
+  };
+}
+
+// src/react/SignIn.tsx
+import { useState as useState3 } from "react";
+
+// src/react/OAuthButtons.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var REDIRECT_TYPES = /* @__PURE__ */ new Set(["OAUTH2", "OIDC", "SAML"]);
+var rowStyle = { display: "flex", flexDirection: "column", gap: 8 };
+var btnStyle = {
+  padding: "8px 12px",
+  borderRadius: 6,
+  border: "1px solid currentColor",
+  background: "transparent",
+  cursor: "pointer",
+  font: "inherit"
+};
+function OAuthButtons({
+  returnTo,
+  redirectUri,
+  filter,
+  children,
+  className,
+  onError
+}) {
+  const { getProviders, signInWithProvider } = useFoirAuth();
+  const [providers, setProviders] = useState2([]);
+  useEffect2(() => {
+    let cancelled = false;
+    void getProviders().then((list) => {
+      if (!cancelled) setProviders(list);
+    }).catch((err) => onError?.(err));
+    return () => {
+      cancelled = true;
+    };
+  }, [getProviders, onError]);
+  const shown = providers.filter(
+    (p) => filter ? filter(p) : REDIRECT_TYPES.has(p.type)
+  );
+  if (shown.length === 0) return null;
+  const start = (p) => {
+    void signInWithProvider(p.key, { returnTo, redirectUri }).catch(
+      (err) => onError?.(err)
+    );
+  };
+  return /* @__PURE__ */ jsx2("div", { className, "data-foir-oauth-buttons": true, style: className ? void 0 : rowStyle, children: shown.map(
+    (p) => children ? /* @__PURE__ */ jsx2("span", { children: children(p, () => start(p)) }, p.key) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-foir-provider": p.key,
+        onClick: () => start(p),
+        style: className ? void 0 : btnStyle,
+        children: [
+          "Continue with ",
+          p.name
+        ]
+      },
+      p.key
+    )
+  ) });
+}
+
+// src/react/SignIn.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var formStyle = { display: "flex", flexDirection: "column", gap: 10, maxWidth: 320 };
+var inputStyle = {
+  padding: "8px 10px",
+  borderRadius: 6,
+  border: "1px solid currentColor",
+  background: "transparent",
+  font: "inherit"
+};
+var submitStyle = { ...inputStyle, cursor: "pointer", fontWeight: 600 };
+var errorStyle = { color: "#c0392b", fontSize: 13, margin: 0 };
+var dividerStyle = { fontSize: 12, opacity: 0.6, textAlign: "center" };
+function SignIn({
+  method = "password",
+  hostedUrl,
+  oauth = true,
+  afterSignInUrl,
+  onSignIn,
+  className
+}) {
+  const { signIn, requestOtp, signInWithOtp } = useFoirAuth();
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [otp, setOtp] = useState3("");
+  const [otpSent, setOtpSent] = useState3(false);
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3(null);
+  const styled = !className;
+  if (hostedUrl) {
+    return /* @__PURE__ */ jsx3("div", { className, "data-foir-signin": true, children: /* @__PURE__ */ jsx3("a", { href: hostedUrl, "data-foir-hosted-login": true, style: styled ? submitStyle : void 0, children: "Sign in" }) });
+  }
+  const finish = (customer) => {
+    onSignIn?.(customer);
+    if (afterSignInUrl && typeof window !== "undefined") {
+      window.location.assign(afterSignInUrl);
+    }
+  };
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      if (method === "otp") {
+        if (!otpSent) {
+          await requestOtp(email);
+          setOtpSent(true);
+        } else {
+          finish(await signInWithOtp({ email, otp }));
+        }
+      } else {
+        finish(await signIn({ email, password }));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Sign-in failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className, "data-foir-signin": true, style: styled ? formStyle : void 0, children: [
+    /* @__PURE__ */ jsxs2("form", { onSubmit, style: styled ? formStyle : void 0, children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "email",
+          name: "email",
+          autoComplete: "email",
+          placeholder: "Email",
+          required: true,
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: busy || method === "otp" && otpSent,
+          style: styled ? inputStyle : void 0
+        }
+      ),
+      method === "password" && /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "password",
+          name: "password",
+          autoComplete: "current-password",
+          placeholder: "Password",
+          required: true,
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          disabled: busy,
+          style: styled ? inputStyle : void 0
+        }
+      ),
+      method === "otp" && otpSent && /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "text",
+          name: "otp",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          placeholder: "One-time code",
+          required: true,
+          value: otp,
+          onChange: (e) => setOtp(e.target.value),
+          disabled: busy,
+          style: styled ? inputStyle : void 0
+        }
+      ),
+      error && /* @__PURE__ */ jsx3("p", { "data-foir-error": true, style: styled ? errorStyle : void 0, children: error }),
+      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, style: styled ? submitStyle : void 0, children: busy ? "Please wait\u2026" : method === "otp" ? otpSent ? "Verify code" : "Send code" : "Sign in" })
+    ] }),
+    oauth && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { "data-foir-divider": true, style: styled ? dividerStyle : void 0, children: "or" }),
+      /* @__PURE__ */ jsx3(OAuthButtons, { returnTo: afterSignInUrl, onError: (err) => setError(err instanceof Error ? err.message : "Sign-in failed") })
+    ] })
+  ] });
+}
+
+// src/react/UserButton.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var rootStyle = { display: "flex", alignItems: "center", gap: 8 };
+var emailStyle = { fontSize: 14 };
+var btnStyle2 = {
+  padding: "4px 10px",
+  borderRadius: 6,
+  border: "1px solid currentColor",
+  background: "transparent",
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: 13
+};
+function UserButton({ afterSignOut, afterSignOutUrl, className }) {
+  const user = useFoirUser();
+  const { signOut } = useFoirAuth();
+  if (!user) return null;
+  const styled = !className;
+  const onSignOut = async () => {
+    await signOut();
+    afterSignOut?.();
+    if (afterSignOutUrl && typeof window !== "undefined") {
+      window.location.assign(afterSignOutUrl);
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className, "data-foir-user-button": true, style: styled ? rootStyle : void 0, children: [
+    /* @__PURE__ */ jsx4("span", { "data-foir-user-email": true, style: styled ? emailStyle : void 0, children: user.email }),
+    /* @__PURE__ */ jsx4("button", { type: "button", onClick: onSignOut, style: styled ? btnStyle2 : void 0, children: "Sign out" })
+  ] });
+}
+export {
+  FoirProvider,
+  OAuthButtons,
+  SignIn,
+  UserButton,
+  createLocalStorageAdapter,
+  useFoirAuth,
+  useFoirSession,
+  useFoirUser
+};