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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as t, jsxs as E, Fragment as G } from "react/jsx-runtime";
import "@emotion/styled";
import { Button as N } from "../../ui/button/button.js";
import { UserIcon as H, ArrowRightOnRectangleIcon as j } from "@heroicons/react/24/outline";
import { useCallback as D } from "react";
import { useAuth as J } from "../../../hooks/use-auth.js";
import { useConfig as K } from "../../../hooks/use-config.js";
import { useSignInModal as P, SignInModal as Q } from "./sign-in-modal.js";
function nt({
  children: w,
  variant: g = "primary",
  color: d,
  size: f = "md",
  fullWidth: x = !1,
  startContent: C,
  endContent: I,
  className: l = "",
  modalMode: e = !1,
  modalProps: b = {},
  href: r = "/auth/sign-in",
  onClick: o,
  onSuccess: c,
  onError: B,
  disabled: i = !1,
  loading: a = !1,
  showAuthenticatedState: S = !0,
  iconOnly: n = !1,
  redirectAfterSignIn: s,
  autoRedirect: u = !0
}) {
  const { isSignedIn: L, user: p, isLoading: m } = J(), { components: $ } = K(), { isOpen: y, open: T, close: F } = P(), U = $.SignInButton;
  if (U)
    return /* @__PURE__ */ t(
      U,
      {
        children: w,
        variant: g,
        color: d,
        size: f,
        fullWidth: x,
        startContent: C,
        endContent: I,
        className: l,
        modalMode: e,
        modalProps: b,
        href: r,
        onClick: o,
        onSuccess: c,
        onError: B,
        disabled: i,
        loading: a,
        showAuthenticatedState: S,
        iconOnly: n,
        redirectAfterSignIn: s,
        autoRedirect: u
      }
    );
  const R = D(
    (h) => {
      if (c?.(h), u && s)
        setTimeout(() => {
          window.location.href = s;
        }, 1e3);
      else if (u && h.user) {
        const q = h.user.userType || "external", v = {
          internal: "/admin/dashboard",
          external: "/dashboard",
          end_user: "/app"
        }[q] || "/dashboard";
        setTimeout(() => {
          window.location.href = v;
        }, 1e3);
      }
    },
    [c, u, s]
  ), _ = D(() => {
    if (!(i || a || m)) {
      if (o) {
        o();
        return;
      }
      if (e) {
        T();
        return;
      }
      r && (window.location.href = r);
    }
  }, [i, a, m, o, e, T, r]);
  return S && L && p ? /* @__PURE__ */ t(
    N,
    {
      variant: "light",
      size: f,
      className: `${l} text-success-600`,
      startContent: /* @__PURE__ */ t(H, { className: "w-4 h-4" }),
      isDisabled: !0,
      children: n ? null : `Welcome, ${p.firstName || p.primaryEmailAddress || "User"}`
    }
  ) : /* @__PURE__ */ E(G, { children: [
    /* @__PURE__ */ t(
      N,
      {
        variant: g,
        color: d,
        size: f,
        fullWidth: x,
        startContent: C || (n ? /* @__PURE__ */ t(j, { className: "w-4 h-4" }) : /* @__PURE__ */ t(j, { className: "w-4 h-4" })),
        endContent: I,
        className: l,
        onPress: _,
        isDisabled: i || m,
        isLoading: a || m,
        isIconOnly: n,
        children: w || (n ? null : "Sign In")
      }
    ),
    e && /* @__PURE__ */ t(
      Q,
      {
        isOpen: y,
        onClose: F,
        onSuccess: R,
        onError: B,
        redirectUrl: s,
        ...b
      }
    )
  ] });
}
export {
  nt as SignInButton
};
//# sourceMappingURL=sign-in-button.js.map