@better-auth-ui/heroui 1.6.1 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/components/auth/auth-provider.d.ts +1 -1
  2. package/dist/components/auth/auth-provider.js +15 -11
  3. package/dist/components/auth/auth.d.ts +3 -3
  4. package/dist/components/auth/auth.js +36 -41
  5. package/dist/components/auth/field-separator.d.ts +1 -1
  6. package/dist/components/auth/field-separator.js +17 -4
  7. package/dist/components/auth/forgot-password.d.ts +1 -1
  8. package/dist/components/auth/forgot-password.js +69 -27
  9. package/dist/components/auth/magic-link-button.d.ts +1 -1
  10. package/dist/components/auth/magic-link-button.js +15 -18
  11. package/dist/components/auth/magic-link.d.ts +2 -2
  12. package/dist/components/auth/magic-link.js +110 -43
  13. package/dist/components/auth/passkey-button.js +23 -12
  14. package/dist/components/auth/provider-buttons.d.ts +1 -1
  15. package/dist/components/auth/provider-buttons.js +26 -33
  16. package/dist/components/auth/reset-password.d.ts +1 -1
  17. package/dist/components/auth/reset-password.js +146 -57
  18. package/dist/components/auth/sign-in.d.ts +2 -2
  19. package/dist/components/auth/sign-in.js +163 -64
  20. package/dist/components/auth/sign-out.js +26 -32
  21. package/dist/components/auth/sign-up.d.ts +2 -2
  22. package/dist/components/auth/sign-up.js +240 -70
  23. package/dist/components/email/email-changed-email.d.ts +2 -2
  24. package/dist/components/email/email-changed-email.js +29 -22
  25. package/dist/components/email/email-verification-email.d.ts +2 -2
  26. package/dist/components/email/email-verification-email.js +29 -22
  27. package/dist/components/email/magic-link-email.d.ts +2 -2
  28. package/dist/components/email/magic-link-email.js +29 -22
  29. package/dist/components/email/new-device-email.d.ts +2 -2
  30. package/dist/components/email/new-device-email.js +29 -22
  31. package/dist/components/email/otp-email.d.ts +2 -2
  32. package/dist/components/email/otp-email.js +28 -21
  33. package/dist/components/email/password-changed-email.d.ts +2 -2
  34. package/dist/components/email/password-changed-email.js +29 -22
  35. package/dist/components/email/reset-password-email.d.ts +2 -2
  36. package/dist/components/email/reset-password-email.js +29 -22
  37. package/dist/components/settings/account/account-settings.d.ts +2 -2
  38. package/dist/components/settings/account/account-settings.js +22 -19
  39. package/dist/components/settings/account/appearance.d.ts +1 -1
  40. package/dist/components/settings/account/appearance.js +70 -27
  41. package/dist/components/settings/account/change-avatar.js +88 -55
  42. package/dist/components/settings/account/change-email.d.ts +1 -1
  43. package/dist/components/settings/account/change-email.js +56 -28
  44. package/dist/components/settings/account/manage-account.d.ts +1 -1
  45. package/dist/components/settings/account/manage-account.js +50 -31
  46. package/dist/components/settings/account/manage-accounts.d.ts +1 -1
  47. package/dist/components/settings/account/manage-accounts.js +32 -36
  48. package/dist/components/settings/account/user-profile.d.ts +3 -3
  49. package/dist/components/settings/account/user-profile.js +105 -22
  50. package/dist/components/settings/security/active-session.d.ts +1 -1
  51. package/dist/components/settings/security/active-session.js +60 -51
  52. package/dist/components/settings/security/active-sessions.d.ts +1 -1
  53. package/dist/components/settings/security/active-sessions.js +32 -26
  54. package/dist/components/settings/security/change-password.d.ts +1 -1
  55. package/dist/components/settings/security/change-password.js +189 -76
  56. package/dist/components/settings/security/danger-zone.d.ts +2 -2
  57. package/dist/components/settings/security/danger-zone.js +17 -11
  58. package/dist/components/settings/security/delete-user.d.ts +1 -1
  59. package/dist/components/settings/security/delete-user.js +96 -46
  60. package/dist/components/settings/security/linked-account.d.ts +1 -1
  61. package/dist/components/settings/security/linked-account.js +61 -47
  62. package/dist/components/settings/security/linked-accounts.d.ts +1 -1
  63. package/dist/components/settings/security/linked-accounts.js +43 -40
  64. package/dist/components/settings/security/passkey.js +42 -13
  65. package/dist/components/settings/security/passkeys.d.ts +1 -1
  66. package/dist/components/settings/security/passkeys.js +51 -19
  67. package/dist/components/settings/security/security-settings.d.ts +2 -2
  68. package/dist/components/settings/security/security-settings.js +24 -21
  69. package/dist/components/settings/settings.d.ts +3 -3
  70. package/dist/components/settings/settings.js +44 -27
  71. package/dist/components/user/switch-account-item.d.ts +1 -1
  72. package/dist/components/user/switch-account-item.js +19 -15
  73. package/dist/components/user/switch-account-menu.js +27 -28
  74. package/dist/components/user/user-avatar.d.ts +3 -3
  75. package/dist/components/user/user-avatar.js +28 -30
  76. package/dist/components/user/user-button.d.ts +1 -1
  77. package/dist/components/user/user-button.js +90 -23
  78. package/dist/components/user/user-view.d.ts +3 -3
  79. package/dist/components/user/user-view.js +36 -23
  80. package/dist/core.d.ts +1 -1
  81. package/dist/index.d.ts +35 -35
  82. package/dist/index.js +36 -35
  83. package/dist/react-exports.d.ts +1 -1
  84. package/package.json +12 -10
  85. package/src/components/auth/auth.tsx +1 -1
  86. package/src/components/auth/sign-in.tsx +63 -30
  87. package/src/components/auth/sign-up.tsx +97 -3
  88. package/src/components/settings/account/user-profile.tsx +121 -6
  89. package/src/components/settings/settings.tsx +1 -1
@@ -1,4 +1,4 @@
1
- import { type AuthProviderProps as AuthProviderPropsPrimitive } from "@better-auth-ui/react";
1
+ import { AuthProviderProps as AuthProviderPropsPrimitive } from '@better-auth-ui/react';
2
2
  export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">;
3
3
  /**
4
4
  * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
@@ -1,12 +1,16 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
3
- import { RouterProvider } from "@heroui/react";
4
- /**
5
- * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
6
- *
7
- * @param children - React nodes to render inside the authentication provider
8
- * @returns A React element that renders an authentication provider configured with the provided props and toast handler
9
- */
10
- export function AuthProvider({ children, navigate, ...config }) {
11
- return (_jsx(AuthProviderPrimitive, { navigate: navigate, ...config, children: _jsx(RouterProvider, { navigate: (path) => navigate({ to: path }), children: children }) }));
1
+ import { AuthProvider as e } from "@better-auth-ui/react";
2
+ import { RouterProvider as t } from "@heroui/react";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ //#region src/components/auth/auth-provider.tsx
5
+ function r({ children: r, navigate: i, ...a }) {
6
+ return /* @__PURE__ */ n(e, {
7
+ navigate: i,
8
+ ...a,
9
+ children: /* @__PURE__ */ n(t, {
10
+ navigate: (e) => i({ to: e }),
11
+ children: r
12
+ })
13
+ });
12
14
  }
15
+ //#endregion
16
+ export { r as AuthProvider };
@@ -1,6 +1,6 @@
1
- import type { AuthView } from "@better-auth-ui/react/core";
2
- import type { CardProps } from "@heroui/react";
3
- import type { SocialLayout } from "./provider-buttons";
1
+ import { AuthView } from '@better-auth-ui/core';
2
+ import { CardProps } from '@heroui/react';
3
+ import { SocialLayout } from './provider-buttons';
4
4
  export type AuthProps = {
5
5
  className?: string;
6
6
  path?: string;
@@ -1,42 +1,37 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useAuth } from "@better-auth-ui/react";
3
- import { ForgotPassword } from "./forgot-password";
4
- import { MagicLink } from "./magic-link";
5
- import { ResetPassword } from "./reset-password";
6
- import { SignIn } from "./sign-in";
7
- import { SignOut } from "./sign-out";
8
- import { SignUp } from "./sign-up";
9
- /**
10
- * Render the appropriate authentication view based on the provided `view` or `path`.
11
- *
12
- * @param path - Route path used to resolve an auth view when `view` is not provided
13
- * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
14
- * @param socialPosition - Position for social buttons ("top" or "bottom")
15
- * @param variant - Variant to apply to the card
16
- * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
17
- * @returns The React element for the resolved authentication view
18
- */
19
- export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
20
- const { viewPaths } = useAuth();
21
- if (!view && !path) {
22
- throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
23
- }
24
- const authPathViews = Object.fromEntries(Object.entries(viewPaths.auth).map(([k, v]) => [v, k]));
25
- const currentView = view || (path ? authPathViews[path] : undefined);
26
- switch (currentView) {
27
- case "signIn":
28
- return (_jsx(SignIn, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
29
- case "signUp":
30
- return (_jsx(SignUp, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
31
- case "magicLink":
32
- return (_jsx(MagicLink, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
33
- case "forgotPassword":
34
- return _jsx(ForgotPassword, { ...props });
35
- case "resetPassword":
36
- return _jsx(ResetPassword, { ...props });
37
- case "signOut":
38
- return _jsx(SignOut, { ...props });
39
- default:
40
- throw new Error(`[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`);
41
- }
1
+ import { ForgotPassword as e } from "./forgot-password.js";
2
+ import { MagicLink as t } from "./magic-link.js";
3
+ import { ResetPassword as n } from "./reset-password.js";
4
+ import { SignIn as r } from "./sign-in.js";
5
+ import { SignOut as i } from "./sign-out.js";
6
+ import { SignUp as a } from "./sign-up.js";
7
+ import { useAuth as o } from "@better-auth-ui/react";
8
+ import { jsx as s } from "react/jsx-runtime";
9
+ //#region src/components/auth/auth.tsx
10
+ function c({ path: c, socialLayout: l, socialPosition: u, view: d, ...f }) {
11
+ let { viewPaths: p } = o();
12
+ if (!d && !c) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
13
+ let m = Object.fromEntries(Object.entries(p.auth).map(([e, t]) => [t, e]));
14
+ switch (d || (c ? m[c] : void 0)) {
15
+ case "signIn": return /* @__PURE__ */ s(r, {
16
+ socialLayout: l,
17
+ socialPosition: u,
18
+ ...f
19
+ });
20
+ case "signUp": return /* @__PURE__ */ s(a, {
21
+ socialLayout: l,
22
+ socialPosition: u,
23
+ ...f
24
+ });
25
+ case "magicLink": return /* @__PURE__ */ s(t, {
26
+ socialLayout: l,
27
+ socialPosition: u,
28
+ ...f
29
+ });
30
+ case "forgotPassword": return /* @__PURE__ */ s(e, { ...f });
31
+ case "resetPassword": return /* @__PURE__ */ s(n, { ...f });
32
+ case "signOut": return /* @__PURE__ */ s(i, { ...f });
33
+ default: throw Error(`[Better Auth UI] Valid views are: ${Object.keys(p.auth).join(", ")}`);
34
+ }
42
35
  }
36
+ //#endregion
37
+ export { c as Auth };
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
2
  export declare function FieldSeparator({ children }: {
3
3
  children: ReactNode;
4
4
  }): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,18 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Separator } from "@heroui/react";
3
- export function FieldSeparator({ children }) {
4
- return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
1
+ import { Separator as e } from "@heroui/react";
2
+ import { jsx as t, jsxs as n } from "react/jsx-runtime";
3
+ //#region src/components/auth/field-separator.tsx
4
+ function r({ children: r }) {
5
+ return /* @__PURE__ */ n("div", {
6
+ className: "flex items-center gap-4",
7
+ children: [
8
+ /* @__PURE__ */ t(e, { className: "flex-1" }),
9
+ /* @__PURE__ */ t("p", {
10
+ className: "text-xs text-muted shrink-0",
11
+ children: r
12
+ }),
13
+ /* @__PURE__ */ t(e, { className: "flex-1" })
14
+ ]
15
+ });
5
16
  }
17
+ //#endregion
18
+ export { r as FieldSeparator };
@@ -1,4 +1,4 @@
1
- import { type CardProps } from "@heroui/react";
1
+ import { CardProps } from '@heroui/react';
2
2
  export type ForgotPasswordProps = {
3
3
  className?: string;
4
4
  variant?: CardProps["variant"];
@@ -1,28 +1,70 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react";
3
- import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
4
- /**
5
- * Render a card-based "Forgot Password" form that sends a password-reset email.
6
- *
7
- * The form displays an email input, submit button, and a link back to sign-in.
8
- * Toasts are displayed on success or error via the `useForgotPassword` hook.
9
- *
10
- * @param className - Optional additional CSS class names applied to the card
11
- * @returns The forgot-password form UI as a JSX element
12
- */
13
- export function ForgotPassword({ className, variant, ...props }) {
14
- const { basePaths, localization, viewPaths, navigate } = useAuth();
15
- const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
16
- onError: (error) => toast.danger(error.error?.message || error.message),
17
- onSuccess: () => {
18
- toast.success(localization.auth.passwordResetEmailSent);
19
- navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
20
- }
21
- });
22
- function handleSubmit(e) {
23
- e.preventDefault();
24
- const formData = new FormData(e.currentTarget);
25
- requestPasswordReset({ email: formData.get("email") });
26
- }
27
- return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.forgotPassword }) }), _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] })] }) }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
1
+ import { useAuth as e, useRequestPasswordReset as t } from "@better-auth-ui/react";
2
+ import { Button as n, Card as r, Description as i, FieldError as a, Form as o, Input as s, Label as c, Link as l, Spinner as u, TextField as d, cn as f, toast as p } from "@heroui/react";
3
+ import { jsx as m, jsxs as h } from "react/jsx-runtime";
4
+ //#region src/components/auth/forgot-password.tsx
5
+ function g({ className: g, variant: _, ...v }) {
6
+ let { basePaths: y, localization: b, viewPaths: x, navigate: S } = e(), { mutate: C, isPending: w } = t({
7
+ onError: (e) => p.danger(e.error?.message || e.message),
8
+ onSuccess: () => {
9
+ p.success(b.auth.passwordResetEmailSent), S({ to: `${y.auth}/${x.auth.signIn}` });
10
+ }
11
+ });
12
+ function T(e) {
13
+ e.preventDefault(), C({ email: new FormData(e.currentTarget).get("email") });
14
+ }
15
+ return /* @__PURE__ */ h(r, {
16
+ className: f("w-full max-w-sm p-4 md:p-6", g),
17
+ variant: _,
18
+ ...v,
19
+ children: [
20
+ /* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
21
+ className: "text-xl font-semibold mb-1",
22
+ children: b.auth.forgotPassword
23
+ }) }),
24
+ /* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
25
+ onSubmit: T,
26
+ className: "flex flex-col gap-4",
27
+ children: [/* @__PURE__ */ h(d, {
28
+ name: "email",
29
+ type: "email",
30
+ autoComplete: "email",
31
+ isDisabled: w,
32
+ children: [
33
+ /* @__PURE__ */ m(c, { children: b.auth.email }),
34
+ /* @__PURE__ */ m(s, {
35
+ placeholder: b.auth.emailPlaceholder,
36
+ required: !0,
37
+ variant: _ === "transparent" ? "primary" : "secondary"
38
+ }),
39
+ /* @__PURE__ */ m(a, {})
40
+ ]
41
+ }), /* @__PURE__ */ h(n, {
42
+ type: "submit",
43
+ className: "w-full",
44
+ isPending: w,
45
+ children: [w && /* @__PURE__ */ m(u, {
46
+ color: "current",
47
+ size: "sm"
48
+ }), b.auth.sendResetLink]
49
+ })]
50
+ }) }),
51
+ /* @__PURE__ */ m(r.Footer, {
52
+ className: "flex-col",
53
+ children: /* @__PURE__ */ h(i, {
54
+ className: "text-sm",
55
+ children: [
56
+ b.auth.rememberYourPassword,
57
+ " ",
58
+ /* @__PURE__ */ m(l, {
59
+ href: `${y.auth}/${x.auth.signIn}`,
60
+ className: "text-accent decoration-accent no-underline hover:underline",
61
+ children: b.auth.signIn
62
+ })
63
+ ]
64
+ })
65
+ })
66
+ ]
67
+ });
28
68
  }
69
+ //#endregion
70
+ export { g as ForgotPassword };
@@ -1,4 +1,4 @@
1
- import type { AuthView } from "@better-auth-ui/core";
1
+ import { AuthView } from '@better-auth-ui/core';
2
2
  export type MagicLinkButtonProps = {
3
3
  isPending: boolean;
4
4
  view?: AuthView;
@@ -1,19 +1,16 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAuth } from "@better-auth-ui/react";
3
- import { Envelope, Lock } from "@gravity-ui/icons";
4
- import { cn, Link } from "@heroui/react";
5
- import { buttonVariants } from "@heroui/styles";
6
- /**
7
- * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
8
- *
9
- * @param isPending - If true, applies disabled styling and prevents interaction
10
- * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
11
- * @returns The rendered Link element with the appropriate href, icon, and label
12
- */
13
- export function MagicLinkButton({ isPending, view }) {
14
- const { basePaths, viewPaths, localization } = useAuth();
15
- const isMagicLinkView = view === "magicLink";
16
- return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled pointer-events-none"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
17
- ? localization.auth.password
18
- : localization.auth.magicLink)] }));
1
+ import { useAuth as e } from "@better-auth-ui/react";
2
+ import { Link as t, cn as n } from "@heroui/react";
3
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
4
+ import { Envelope as a, Lock as o } from "@gravity-ui/icons";
5
+ import { buttonVariants as s } from "@heroui/styles";
6
+ //#region src/components/auth/magic-link-button.tsx
7
+ function c({ isPending: c, view: l }) {
8
+ let { basePaths: u, viewPaths: d, localization: f } = e(), p = l === "magicLink";
9
+ return /* @__PURE__ */ i(t, {
10
+ href: `${u.auth}/${p ? d.auth.signIn : d.auth.magicLink}`,
11
+ className: n(s({ variant: "tertiary" }), "w-full gap-2", c && "status-disabled pointer-events-none"),
12
+ children: [r(p ? o : a, {}), f.auth.continueWith.replace("{{provider}}", p ? f.auth.password : f.auth.magicLink)]
13
+ });
19
14
  }
15
+ //#endregion
16
+ export { c as MagicLinkButton };
@@ -1,5 +1,5 @@
1
- import { type CardProps } from "@heroui/react";
2
- import { type SocialLayout } from "./provider-buttons";
1
+ import { CardProps } from '@heroui/react';
2
+ import { SocialLayout } from './provider-buttons';
3
3
  export type MagicLinkProps = {
4
4
  className?: string;
5
5
  socialLayout?: SocialLayout;
@@ -1,44 +1,111 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAuth, useSignInMagicLink, useSignInSocial } from "@better-auth-ui/react";
3
- import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
4
- import { useState } from "react";
5
- import { FieldSeparator } from "./field-separator";
6
- import { MagicLinkButton } from "./magic-link-button";
7
- import { PasskeyButton } from "./passkey-button";
8
- import { ProviderButtons } from "./provider-buttons";
9
- /**
10
- * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
11
- *
12
- * @param className - Additional CSS class names applied to the card container
13
- * @param socialLayout - Layout style for social provider buttons
14
- * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
15
- * @returns The magic-link sign-in UI as a JSX element
16
- */
17
- export function MagicLink({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
18
- const { basePaths, baseURL, localization, passkey, redirectTo, socialProviders, viewPaths } = useAuth();
19
- const [email, setEmail] = useState("");
20
- const { mutate: signInMagicLink, isPending: magicLinkPending } = useSignInMagicLink({
21
- onError: (error) => toast.danger(error.error?.message || error.message),
22
- onSuccess: () => {
23
- setEmail("");
24
- toast.success(localization.auth.magicLinkSent);
25
- }
26
- });
27
- const [socialRedirecting, setSocialRedirecting] = useState(false);
28
- const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
29
- onError: (error) => toast.danger(error.error?.message || error.message),
30
- onSuccess: () => {
31
- setSocialRedirecting(true);
32
- setTimeout(() => {
33
- setSocialRedirecting(false);
34
- }, 5000);
35
- }
36
- });
37
- const isPending = magicLinkPending || socialPending || socialRedirecting;
38
- const handleSubmit = (e) => {
39
- e.preventDefault();
40
- signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` });
41
- };
42
- const showSeparator = !!socialProviders?.length;
43
- return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendMagicLink] }), _jsx(MagicLinkButton, { view: "magicLink", isPending: isPending }), passkey && _jsx(PasskeyButton, { isPending: isPending })] })] }), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signUp })] }) })] }));
1
+ import { FieldSeparator as e } from "./field-separator.js";
2
+ import { MagicLinkButton as t } from "./magic-link-button.js";
3
+ import { PasskeyButton as n } from "./passkey-button.js";
4
+ import { ProviderButtons as r } from "./provider-buttons.js";
5
+ import { useAuth as i, useSignInMagicLink as a, useSignInSocial as o } from "@better-auth-ui/react";
6
+ import { Button as s, Card as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
7
+ import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
8
+ import { useState as S } from "react";
9
+ //#region src/components/auth/magic-link.tsx
10
+ function C({ className: C, socialLayout: w, socialPosition: T = "bottom", variant: E, ...D }) {
11
+ let { basePaths: O, baseURL: k, localization: A, passkey: j, redirectTo: M, socialProviders: N, viewPaths: P } = i(), [F, I] = S(""), { mutate: L, isPending: R } = a({
12
+ onError: (e) => v.danger(e.error?.message || e.message),
13
+ onSuccess: () => {
14
+ I(""), v.success(A.auth.magicLinkSent);
15
+ }
16
+ }), [z, B] = S(!1), { mutate: V, isPending: H } = o({
17
+ onError: (e) => v.danger(e.error?.message || e.message),
18
+ onSuccess: () => {
19
+ B(!0), setTimeout(() => {
20
+ B(!1);
21
+ }, 5e3);
22
+ }
23
+ }), U = R || H || z, W = (e) => {
24
+ e.preventDefault(), L({
25
+ email: F,
26
+ callbackURL: `${k}${M}`
27
+ });
28
+ }, G = !!N?.length;
29
+ return /* @__PURE__ */ x(c, {
30
+ className: _("w-full max-w-sm p-4 md:p-6", C),
31
+ variant: E,
32
+ ...D,
33
+ children: [
34
+ /* @__PURE__ */ b(c.Header, { children: /* @__PURE__ */ b(c.Title, {
35
+ className: "text-xl font-semibold mb-1",
36
+ children: A.auth.signIn
37
+ }) }),
38
+ /* @__PURE__ */ x(c.Content, {
39
+ className: "gap-4",
40
+ children: [
41
+ T === "top" && /* @__PURE__ */ x(y, { children: [!!N?.length && /* @__PURE__ */ b(r, {
42
+ socialLayout: w,
43
+ signInSocial: V,
44
+ isPending: U
45
+ }), G && /* @__PURE__ */ b(e, { children: A.auth.or })] }),
46
+ /* @__PURE__ */ x(d, {
47
+ onSubmit: W,
48
+ className: "flex flex-col gap-4",
49
+ children: [/* @__PURE__ */ x(g, {
50
+ name: "email",
51
+ type: "email",
52
+ autoComplete: "email",
53
+ isDisabled: U,
54
+ value: F,
55
+ onChange: I,
56
+ children: [
57
+ /* @__PURE__ */ b(p, { children: A.auth.email }),
58
+ /* @__PURE__ */ b(f, {
59
+ placeholder: A.auth.emailPlaceholder,
60
+ required: !0,
61
+ variant: E === "transparent" ? "primary" : "secondary"
62
+ }),
63
+ /* @__PURE__ */ b(u, {})
64
+ ]
65
+ }), /* @__PURE__ */ x("div", {
66
+ className: "flex flex-col gap-3",
67
+ children: [
68
+ /* @__PURE__ */ x(s, {
69
+ type: "submit",
70
+ className: "w-full",
71
+ isPending: U,
72
+ children: [U && /* @__PURE__ */ b(h, {
73
+ color: "current",
74
+ size: "sm"
75
+ }), A.auth.sendMagicLink]
76
+ }),
77
+ /* @__PURE__ */ b(t, {
78
+ view: "magicLink",
79
+ isPending: U
80
+ }),
81
+ j && /* @__PURE__ */ b(n, { isPending: U })
82
+ ]
83
+ })]
84
+ }),
85
+ T === "bottom" && /* @__PURE__ */ x(y, { children: [G && /* @__PURE__ */ b(e, { children: A.auth.or }), !!N?.length && /* @__PURE__ */ b(r, {
86
+ socialLayout: w,
87
+ signInSocial: V,
88
+ isPending: U
89
+ })] })
90
+ ]
91
+ }),
92
+ /* @__PURE__ */ b(c.Footer, {
93
+ className: "flex-col",
94
+ children: /* @__PURE__ */ x(l, {
95
+ className: "text-sm",
96
+ children: [
97
+ A.auth.needToCreateAnAccount,
98
+ " ",
99
+ /* @__PURE__ */ b(m, {
100
+ href: `${O.auth}/${P.auth.signUp}`,
101
+ className: "text-accent decoration-accent no-underline hover:underline",
102
+ children: A.auth.signUp
103
+ })
104
+ ]
105
+ })
106
+ })
107
+ ]
108
+ });
44
109
  }
110
+ //#endregion
111
+ export { C as MagicLink };
@@ -1,13 +1,24 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAuth, useSignInPasskey } from "@better-auth-ui/react";
3
- import { Fingerprint } from "@gravity-ui/icons";
4
- import { Button, Spinner, toast } from "@heroui/react";
5
- export function PasskeyButton({ isPending }) {
6
- const { localization, redirectTo, navigate } = useAuth();
7
- const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey({
8
- onError: (error) => toast.danger(error.error?.message || error.message),
9
- onSuccess: () => navigate({ to: redirectTo })
10
- });
11
- const isDisabled = isPending || passkeyPending;
12
- return (_jsxs(Button, { className: "w-full", variant: "tertiary", isDisabled: isDisabled, isPending: passkeyPending, onPress: () => signInPasskey(), children: [passkeyPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Fingerprint, {}), localization.auth.continueWith.replace("{{provider}}", localization.auth.passkey)] }));
1
+ import { useAuth as e, useSignInPasskey as t } from "@better-auth-ui/react";
2
+ import { Button as n, Spinner as r, toast as i } from "@heroui/react";
3
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
4
+ import { Fingerprint as s } from "@gravity-ui/icons";
5
+ //#region src/components/auth/passkey-button.tsx
6
+ function c({ isPending: c }) {
7
+ let { localization: l, redirectTo: u, navigate: d } = e(), { mutate: f, isPending: p } = t({
8
+ onError: (e) => i.danger(e.error?.message || e.message),
9
+ onSuccess: () => d({ to: u })
10
+ });
11
+ return /* @__PURE__ */ o(n, {
12
+ className: "w-full",
13
+ variant: "tertiary",
14
+ isDisabled: c || p,
15
+ isPending: p,
16
+ onPress: () => f(),
17
+ children: [p ? /* @__PURE__ */ a(r, {
18
+ color: "current",
19
+ size: "sm"
20
+ }) : /* @__PURE__ */ a(s, {}), l.auth.continueWith.replace("{{provider}}", l.auth.passkey)]
21
+ });
13
22
  }
23
+ //#endregion
24
+ export { c as PasskeyButton };
@@ -1,4 +1,4 @@
1
- import type { SocialProvider } from "better-auth/social-providers";
1
+ import { SocialProvider } from 'better-auth/social-providers';
2
2
  export type ProviderButtonsProps = {
3
3
  isPending: boolean;
4
4
  socialLayout?: SocialLayout;
@@ -1,34 +1,27 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { getProviderName } from "@better-auth-ui/core";
3
- import { providerIcons, useAuth } from "@better-auth-ui/react";
4
- import { Button, cn } from "@heroui/react";
5
- import { useMemo } from "react";
6
- /**
7
- * Render social provider sign-in buttons and handle initiation and pending state.
8
- *
9
- * @param isPending - Disables all provider buttons when true.
10
- * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
11
- * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
12
- * @returns The JSX element that renders the configured social provider buttons.
13
- */
14
- export function ProviderButtons({ isPending, socialLayout = "auto", signInSocial }) {
15
- const { baseURL, localization, redirectTo, socialProviders } = useAuth();
16
- const callbackURL = `${baseURL}${redirectTo}`;
17
- const resolvedSocialLayout = useMemo(() => {
18
- if (socialLayout === "auto") {
19
- if (socialProviders?.length && socialProviders.length >= 4) {
20
- return "horizontal";
21
- }
22
- return "vertical";
23
- }
24
- return socialLayout;
25
- }, [socialLayout, socialProviders?.length]);
26
- return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => {
27
- const ProviderIcon = providerIcons[provider];
28
- return (_jsxs(Button, { className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1"), variant: "tertiary", isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), children: [_jsx(ProviderIcon, {}), resolvedSocialLayout === "vertical"
29
- ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
30
- : resolvedSocialLayout === "grid"
31
- ? getProviderName(provider)
32
- : null] }, provider));
33
- }) }));
1
+ import { providerIcons as e, useAuth as t } from "@better-auth-ui/react";
2
+ import { Button as n, cn as r } from "@heroui/react";
3
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
4
+ import { useMemo as o } from "react";
5
+ import { getProviderName as s } from "@better-auth-ui/core";
6
+ //#region src/components/auth/provider-buttons.tsx
7
+ function c({ isPending: c, socialLayout: l = "auto", signInSocial: u }) {
8
+ let { baseURL: d, localization: f, redirectTo: p, socialProviders: m } = t(), h = `${d}${p}`, g = o(() => l === "auto" ? m?.length && m.length >= 4 ? "horizontal" : "vertical" : l, [l, m?.length]);
9
+ return /* @__PURE__ */ i("div", {
10
+ className: r("gap-3", g === "grid" && "grid grid-cols-2", g === "vertical" && "flex flex-col", g === "horizontal" && "flex flex-wrap"),
11
+ children: m?.map((t) => {
12
+ let o = e[t];
13
+ return /* @__PURE__ */ a(n, {
14
+ className: r("w-full", g === "horizontal" && "flex-1"),
15
+ variant: "tertiary",
16
+ isPending: c,
17
+ onPress: () => u({
18
+ provider: t,
19
+ callbackURL: h
20
+ }),
21
+ children: [/* @__PURE__ */ i(o, {}), g === "vertical" ? f.auth.continueWith.replace("{{provider}}", s(t)) : g === "grid" ? s(t) : null]
22
+ }, t);
23
+ })
24
+ });
34
25
  }
26
+ //#endregion
27
+ export { c as ProviderButtons };
@@ -1,4 +1,4 @@
1
- import { type CardProps } from "@heroui/react";
1
+ import { CardProps } from '@heroui/react';
2
2
  export type ResetPasswordProps = {
3
3
  className?: string;
4
4
  variant?: CardProps["variant"];