@frank-auth/react/dist/esm/components/auth/sign-in/sign-in.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as t, jsxs as I } from "react/jsx-runtime";
import c from "react";
import { SignInCard as b } from "./sign-in-card.js";
import { SignInForm as y } from "./sign-in-form.js";
import { SignInModal as v } from "./sign-in-modal.js";
function h({
  mode: e = "form",
  modalProps: a = {},
  cardProps: g = {},
  formProps: o = {},
  autoMode: r = !1,
  organizationFlow: s = !1,
  showOrganizationSelector: l = !1,
  autoSelectOrganization: u = !1,
  ...i
}) {
  const d = c.useMemo(() => r ? typeof window < "u" && document.querySelector("[data-modal-backdrop]") ? "modal" : typeof window < "u" && document.querySelector("[data-card-container]") ? "card" : "form" : e, [r, e]), n = r ? d : e, S = c.useMemo(() => {
    if (!u) return i.organizationId;
    if (typeof window < "u") {
      const f = new URLSearchParams(window.location.search), p = f.get("org") || f.get("organization_id");
      if (p) return p;
      const z = window.location.hostname.split(".")[0];
      if (z && z !== "www" && z !== "app")
        return z;
    }
    return i.organizationId;
  }, [u, i.organizationId]), m = {
    ...i,
    organizationId: S,
    showOrganizationSelector: s ? l : !1
  }, w = {
    ...o,
    showOrganizationSelector: s ? l : o.showOrganizationSelector,
    variant: s ? "default" : o.variant
  };
  switch (n) {
    case "modal":
      return /* @__PURE__ */ t(
        v,
        {
          ...m,
          ...a,
          showOrganizationSelector: s ? l : a.showOrganizationSelector
        }
      );
    case "card":
      return /* @__PURE__ */ t(
        b,
        {
          ...m,
          ...g,
          showOrganizationBranding: s
        }
      );
    default:
      return /* @__PURE__ */ t(y, { ...m, ...w });
  }
}
function O({
  organizationId: e,
  organizationName: a,
  organizationLogo: g,
  allowOrganizationSwitching: o = !1,
  showOrganizationInfo: r = !0,
  organizationWelcomeMessage: s,
  organizationAuthMethods: l,
  title: u,
  subtitle: i,
  methods: d,
  ...n
}) {
  const S = u || (a ? `Welcome to ${a}` : "Welcome back");
  return /* @__PURE__ */ t(
    h,
    {
      ...n,
      organizationId: e,
      organizationFlow: !0,
      title: S,
      subtitle: i || s || "Sign in to your account",
      methods: l || d || ["password", "oauth", "sso"],
      showOrganizationSelector: o,
      showBranding: r
    }
  );
}
function x({
  organizations: e = [],
  defaultOrganizationId: a,
  showOrganizationLogos: g = !0,
  allowCreateOrganization: o = !1,
  onOrganizationSelected: r,
  ...s
}) {
  const [l, u] = c.useState(
    a
  );
  return c.useCallback(
    (i) => {
      u(i), r?.(i);
    },
    [r]
  ), /* @__PURE__ */ t(
    h,
    {
      ...s,
      organizationId: l,
      organizationFlow: !0,
      showOrganizationSelector: !0,
      autoSelectOrganization: !1
    }
  );
}
function F({
  organizationId: e,
  ...a
}) {
  return /* @__PURE__ */ t(
    O,
    {
      ...a,
      organizationId: e,
      organizationAuthMethods: ["sso", "password"],
      title: "Single Sign-On",
      subtitle: "Sign in with your organization's SSO provider"
    }
  );
}
function $(e) {
  return /* @__PURE__ */ t(
    h,
    {
      ...e,
      methods: ["magic-link", "passkey", "oauth", "sso"],
      title: "Sign in securely",
      subtitle: "No password required"
    }
  );
}
function A(e) {
  return /* @__PURE__ */ t(
    h,
    {
      ...e,
      methods: ["passkey", "password", "sso"],
      title: "Secure Sign In",
      subtitle: "Sign in with enhanced security"
    }
  );
}
function D(e) {
  return /* @__PURE__ */ t(h, { ...e, organizationFlow: !0, autoSelectOrganization: !0, showBranding: !0 });
}
function L(e) {
  return /* @__PURE__ */ t(
    h,
    {
      ...e,
      organizationFlow: !0,
      autoSelectOrganization: !0,
      showOrganizationSelector: !0
    }
  );
}
function q({
  invitationToken: e,
  organizationName: a,
  inviterInfo: g,
  autoCreateAccount: o = !0,
  title: r,
  subtitle: s,
  onSuccess: l,
  ...u
}) {
  const i = c.useMemo(() => {
    try {
      const f = atob(e);
      return JSON.parse(f);
    } catch {
      return null;
    }
  }, [e]), d = a || i?.orgName || "the organization", n = g?.name || i?.inviterName, S = r || `Join ${d}`, m = s || (n ? `${n} invited you to sign in to ${d}` : `You've been invited to sign in to ${d}`), w = c.useCallback(
    (f) => {
      l?.(f);
    },
    [l]
  );
  return /* @__PURE__ */ t(
    h,
    {
      ...u,
      organizationId: i?.orgId,
      organizationFlow: !0,
      title: S,
      subtitle: m,
      showBranding: !0,
      onSuccess: w,
      formProps: {
        ...u.formProps,
        footer: /* @__PURE__ */ t("div", { className: "text-center text-sm text-default-500", children: o && /* @__PURE__ */ t("p", { children: "Don't have an account? One will be created for you." }) })
      }
    }
  );
}
function R({ onSuccess: e, ...a }) {
  const [g, o] = c.useState("organization"), [r, s] = c.useState(
    a.organizationId
  ), [l, u] = c.useState(null), i = c.useCallback((n) => {
    s(n), o("credentials");
  }, []), d = c.useCallback(
    (n) => {
      n.status === "complete" ? (o("complete"), e?.(n)) : n.status === "needs_mfa" ? (u(n), o("mfa")) : e?.(n);
    },
    [e]
  );
  switch (c.useCallback(
    (n) => {
      o("complete"), e?.(n);
    },
    [e]
  ), g) {
    case "organization":
      return r ? (o("credentials"), null) : /* @__PURE__ */ t(
        x,
        {
          ...a,
          onOrganizationSelected: i
        }
      );
    case "mfa":
      return /* @__PURE__ */ t("div", { className: "space-y-4", children: /* @__PURE__ */ I("div", { className: "text-center", children: [
        /* @__PURE__ */ t("h2", { className: "text-xl font-semibold", children: "Two-Factor Authentication" }),
        /* @__PURE__ */ t("p", { className: "text-default-500", children: "Complete your sign-in with MFA" })
      ] }) });
    case "complete":
      return /* @__PURE__ */ I("div", { className: "text-center space-y-4", children: [
        /* @__PURE__ */ t("div", { className: "text-success-600 text-xl", children: "✓" }),
        /* @__PURE__ */ t("h2", { className: "text-xl font-semibold", children: "Welcome back!" }),
        /* @__PURE__ */ t("p", { className: "text-default-500", children: "You have been successfully signed in." })
      ] });
    default:
      return /* @__PURE__ */ t(
        O,
        {
          ...a,
          organizationId: r,
          onSuccess: d
        }
      );
  }
}
export {
  q as InvitationSignIn,
  x as MultiOrganizationSignIn,
  O as OrganizationSignIn,
  $ as PasswordlessSignIn,
  R as ProgressiveSignIn,
  F as SSOSignIn,
  A as SecureSignIn,
  h as SignIn,
  D as SubdomainSignIn,
  L as URLBasedSignIn
};
//# sourceMappingURL=sign-in.js.map