@better-auth-ui/heroui 1.6.4 → 1.6.5

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 (13) hide show
  1. package/dist/components/auth/delete-user/danger-zone.d.ts +3 -2
  2. package/dist/components/auth/forgot-password.js +67 -48
  3. package/dist/components/auth/sign-in.js +72 -67
  4. package/dist/components/auth/sign-up.js +82 -77
  5. package/dist/components/auth/username/sign-in-username.js +80 -74
  6. package/dist/components/auth/username/username-field.js +4 -2
  7. package/package.json +1 -1
  8. package/src/components/auth/delete-user/danger-zone.tsx +9 -2
  9. package/src/components/auth/forgot-password.tsx +29 -7
  10. package/src/components/auth/sign-in.tsx +13 -1
  11. package/src/components/auth/sign-up.tsx +12 -2
  12. package/src/components/auth/username/sign-in-username.tsx +40 -24
  13. package/src/components/auth/username/username-field.tsx +4 -2
package/dist/components/auth/delete-user/danger-zone.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { CardProps } from '@heroui/react';
2
2
  import { ComponentProps } from 'react';
3
- export type DangerZoneProps = Omit<ComponentProps<"div">, "children"> & {
3
+ export type DangerZoneProps = {
4
+ className?: string;
4
5
  variant?: CardProps["variant"];
5
6
  };
6
7
  /**
7
8
  * Renders the danger zone heading and {@link DeleteUser}.
8
9
  * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
9
10
  */
10
- export declare function DangerZone({ className, variant, ...props }: DangerZoneProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function DangerZone({ className, variant, ...props }: DangerZoneProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
package/dist/components/auth/forgot-password.js CHANGED
@@ -1,64 +1,83 @@
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";
1
+ import { useAuth as e, useFetchOptions as t, useRequestPasswordReset as n } from "@better-auth-ui/react";
2
+ import { Button as r, Card as i, Description as a, FieldError as o, Form as s, Input as c, Label as l, Link as u, Spinner as d, TextField as f, cn as p, toast as m } from "@heroui/react";
3
+ import { jsx as h, jsxs as g } from "react/jsx-runtime";
4
4
  //#region src/components/auth/forgot-password.tsx
5
- function g({ className: g, variant: _, ...v }) {
6
- let { authClient: y, basePaths: b, localization: x, viewPaths: S, navigate: C } = e(), { mutate: w, isPending: T } = t(y, { onSuccess: () => {
7
- p.success(x.auth.passwordResetEmailSent), C({ to: `${b.auth}/${S.auth.signIn}` });
8
- } });
9
- function E(e) {
10
- e.preventDefault(), w({ email: new FormData(e.currentTarget).get("email") });
5
+ function _({ className: _, variant: v, ...y }) {
6
+ let { authClient: b, basePaths: x, localization: S, viewPaths: C, navigate: w, plugins: T } = e(), { fetchOptions: E, resetFetchOptions: D } = t(), { mutate: O, isPending: k } = n(b, {
7
+ onError: (e) => {
8
+ m.danger(e.error?.message || e.message), D();
9
+ },
10
+ onSuccess: () => {
11
+ m.success(S.auth.passwordResetEmailSent), w({ to: `${x.auth}/${C.auth.signIn}` });
12
+ }
13
+ });
14
+ function A(e) {
15
+ e.preventDefault(), O({
16
+ email: new FormData(e.currentTarget).get("email"),
17
+ fetchOptions: E
18
+ });
11
19
  }
12
- return /* @__PURE__ */ h(r, {
13
- className: f("w-full max-w-sm gap-4 md:p-6", g),
14
- variant: _,
15
- ...v,
20
+ let j = T.find((e) => e.captchaComponent)?.captchaComponent;
21
+ return /* @__PURE__ */ g(i, {
22
+ className: p("w-full max-w-sm gap-4 md:p-6", _),
23
+ variant: v,
24
+ ...y,
16
25
  children: [
17
- /* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
26
+ /* @__PURE__ */ h(i.Header, { children: /* @__PURE__ */ h(i.Title, {
18
27
  className: "text-xl font-semibold mb-1",
19
- children: x.auth.forgotPassword
28
+ children: S.auth.forgotPassword
20
29
  }) }),
21
- /* @__PURE__ */ m(r.Content, {
30
+ /* @__PURE__ */ h(i.Content, {
22
31
  className: "gap-4",
23
- children: /* @__PURE__ */ h(o, {
24
- onSubmit: E,
32
+ children: /* @__PURE__ */ g(s, {
33
+ onSubmit: A,
25
34
  className: "flex flex-col gap-4",
26
- children: [/* @__PURE__ */ h(d, {
27
- name: "email",
28
- type: "email",
29
- autoComplete: "email",
30
- isDisabled: T,
31
- children: [
32
- /* @__PURE__ */ m(c, { children: x.auth.email }),
33
- /* @__PURE__ */ m(s, {
34
- placeholder: x.auth.emailPlaceholder,
35
- required: !0,
36
- variant: _ === "transparent" ? "primary" : "secondary"
37
- }),
38
- /* @__PURE__ */ m(a, {})
39
- ]
40
- }), /* @__PURE__ */ h(n, {
41
- type: "submit",
42
- className: "w-full",
43
- isPending: T,
44
- children: [T && /* @__PURE__ */ m(u, {
45
- color: "current",
46
- size: "sm"
47
- }), x.auth.sendResetLink]
48
- })]
35
+ children: [
36
+ /* @__PURE__ */ g(f, {
37
+ name: "email",
38
+ type: "email",
39
+ autoComplete: "email",
40
+ isDisabled: k,
41
+ children: [
42
+ /* @__PURE__ */ h(l, { children: S.auth.email }),
43
+ /* @__PURE__ */ h(c, {
44
+ placeholder: S.auth.emailPlaceholder,
45
+ required: !0,
46
+ variant: v === "transparent" ? "primary" : "secondary"
47
+ }),
48
+ /* @__PURE__ */ h(o, {})
49
+ ]
50
+ }),
51
+ j && /* @__PURE__ */ h("div", {
52
+ className: "flex justify-center",
53
+ children: j
54
+ }),
55
+ /* @__PURE__ */ h("div", {
56
+ className: "flex flex-col gap-3",
57
+ children: /* @__PURE__ */ g(r, {
58
+ type: "submit",
59
+ className: "w-full",
60
+ isPending: k,
61
+ children: [k && /* @__PURE__ */ h(d, {
62
+ color: "current",
63
+ size: "sm"
64
+ }), S.auth.sendResetLink]
65
+ })
66
+ })
67
+ ]
49
68
  })
50
69
  }),
51
- /* @__PURE__ */ m(r.Footer, {
70
+ /* @__PURE__ */ h(i.Footer, {
52
71
  className: "flex-col gap-3",
53
- children: /* @__PURE__ */ h(i, {
72
+ children: /* @__PURE__ */ g(a, {
54
73
  className: "text-sm",
55
74
  children: [
56
- x.auth.rememberYourPassword,
75
+ S.auth.rememberYourPassword,
57
76
  " ",
58
- /* @__PURE__ */ m(l, {
59
- href: `${b.auth}/${S.auth.signIn}`,
77
+ /* @__PURE__ */ h(u, {
78
+ href: `${x.auth}/${C.auth.signIn}`,
60
79
  className: "text-accent no-underline hover:underline decoration-accent-hover",
61
- children: x.auth.signIn
80
+ children: S.auth.signIn
62
81
  })
63
82
  ]
64
83
  })
@@ -67,4 +86,4 @@ function g({ className: g, variant: _, ...v }) {
67
86
  });
68
87
  }
69
88
  //#endregion
70
- export { g as ForgotPassword };
89
+ export { _ as ForgotPassword };
package/dist/components/auth/sign-in.js CHANGED
@@ -1,122 +1,127 @@
1
1
  import { FieldSeparator as e } from "./field-separator.js";
2
2
  import { ProviderButtons as t } from "./provider-buttons.js";
3
3
  import { authMutationKeys as n } from "@better-auth-ui/core";
4
- import { useAuth as r, useSendVerificationEmail as i, useSignInEmail as a } from "@better-auth-ui/react";
5
- import { Button as o, Card as s, Checkbox 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";
6
- import { useState as y } from "react";
7
- import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
8
- import { useIsMutating as C } from "@tanstack/react-query";
4
+ import { useAuth as r, useFetchOptions as i, useSendVerificationEmail as a, useSignInEmail as o } from "@better-auth-ui/react";
5
+ import { Button as s, Card as c, Checkbox as l, Description as u, FieldError as d, Form as f, Input as p, Label as m, Link as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
6
+ import { useState as b } from "react";
7
+ import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
8
+ import { useIsMutating as w } from "@tanstack/react-query";
9
9
  //#region src/components/auth/sign-in.tsx
10
- function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
11
- let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L, navigate: R } = r(), [z, B] = y(""), { mutate: V } = i(k, { onSuccess: () => v.success(N.auth.verificationEmailSent) }), { mutate: H, isPending: U } = a(k, {
10
+ function T({ className: T, socialLayout: E, socialPosition: D = "bottom", variant: O, ...k }) {
11
+ let { authClient: A, basePaths: j, baseURL: M, emailAndPassword: N, localization: P, plugins: F, redirectTo: I, socialProviders: L, viewPaths: R, navigate: z } = r(), { fetchOptions: B, resetFetchOptions: V } = i(), [H, U] = b(""), { mutate: W } = a(A, { onSuccess: () => y.success(P.auth.verificationEmailSent) }), { mutate: G, isPending: K } = o(A, {
12
12
  onError: (e, { email: t }) => {
13
- B(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? v.danger(e.error?.message || e.message, { actionProps: {
14
- children: N.auth.resend,
15
- onClick: () => V({
13
+ U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
14
+ children: P.auth.resend,
15
+ onClick: () => W({
16
16
  email: t,
17
- callbackURL: `${j}${F}`
17
+ callbackURL: `${M}${I}`
18
18
  })
19
- } }) : v.danger(e.error?.message || e.message);
19
+ } }) : y.danger(e.error?.message || e.message), V();
20
20
  },
21
- onSuccess: () => R({ to: F })
22
- }), W = (e) => {
21
+ onSuccess: () => z({ to: I })
22
+ }), q = (e) => {
23
23
  e.preventDefault();
24
24
  let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
25
- H({
25
+ G({
26
26
  email: n,
27
- password: z,
28
- ...M?.rememberMe ? { rememberMe: r } : {}
27
+ password: H,
28
+ ...N?.rememberMe ? { rememberMe: r } : {},
29
+ fetchOptions: B
29
30
  });
30
- }, G = C({ mutationKey: n.signIn.all }) + C({ mutationKey: n.signUp.all }) > 0, K = M?.enabled && !!I?.length;
31
- return /* @__PURE__ */ S(s, {
32
- className: _("w-full max-w-sm gap-4 md:p-6", w),
33
- variant: D,
34
- ...O,
31
+ }, J = w({ mutationKey: n.signIn.all }) + w({ mutationKey: n.signUp.all }) > 0, Y = F.find((e) => e.captchaComponent)?.captchaComponent, X = N?.enabled && !!L?.length;
32
+ return /* @__PURE__ */ C(c, {
33
+ className: v("w-full max-w-sm gap-4 md:p-6", T),
34
+ variant: O,
35
+ ...k,
35
36
  children: [
36
- /* @__PURE__ */ x(s.Header, { children: /* @__PURE__ */ x(s.Title, {
37
+ /* @__PURE__ */ S(c.Header, { children: /* @__PURE__ */ S(c.Title, {
37
38
  className: "text-xl font-semibold mb-1",
38
- children: N.auth.signIn
39
+ children: P.auth.signIn
39
40
  }) }),
40
- /* @__PURE__ */ S(s.Content, {
41
+ /* @__PURE__ */ C(c.Content, {
41
42
  className: "gap-4",
42
43
  children: [
43
- E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), K && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
44
- M?.enabled && /* @__PURE__ */ S(d, {
45
- onSubmit: W,
44
+ D === "top" && /* @__PURE__ */ C(x, { children: [!!L?.length && /* @__PURE__ */ S(t, { socialLayout: E }), X && /* @__PURE__ */ S(e, { children: P.auth.or })] }),
45
+ N?.enabled && /* @__PURE__ */ C(f, {
46
+ onSubmit: q,
46
47
  className: "flex flex-col gap-4",
47
48
  children: [
48
- /* @__PURE__ */ S(g, {
49
+ /* @__PURE__ */ C(_, {
49
50
  name: "email",
50
51
  type: "email",
51
52
  autoComplete: "email",
52
- isDisabled: G,
53
+ isDisabled: J,
53
54
  children: [
54
- /* @__PURE__ */ x(p, { children: N.auth.email }),
55
- /* @__PURE__ */ x(f, {
56
- placeholder: N.auth.emailPlaceholder,
57
- variant: D === "transparent" ? "primary" : "secondary",
55
+ /* @__PURE__ */ S(m, { children: P.auth.email }),
56
+ /* @__PURE__ */ S(p, {
57
+ placeholder: P.auth.emailPlaceholder,
58
+ variant: O === "transparent" ? "primary" : "secondary",
58
59
  required: !0
59
60
  }),
60
- /* @__PURE__ */ x(u, {})
61
+ /* @__PURE__ */ S(d, {})
61
62
  ]
62
63
  }),
63
- /* @__PURE__ */ S(g, {
64
- minLength: M?.minPasswordLength,
65
- maxLength: M?.maxPasswordLength,
64
+ /* @__PURE__ */ C(_, {
65
+ minLength: N?.minPasswordLength,
66
+ maxLength: N?.maxPasswordLength,
66
67
  name: "password",
67
68
  type: "password",
68
69
  autoComplete: "current-password",
69
- isDisabled: G,
70
- value: z,
71
- onChange: B,
70
+ isDisabled: J,
71
+ value: H,
72
+ onChange: U,
72
73
  children: [
73
- /* @__PURE__ */ x(p, { children: N.auth.password }),
74
- /* @__PURE__ */ x(f, {
75
- placeholder: N.auth.passwordPlaceholder,
76
- variant: D === "transparent" ? "primary" : "secondary",
74
+ /* @__PURE__ */ S(m, { children: P.auth.password }),
75
+ /* @__PURE__ */ S(p, {
76
+ placeholder: P.auth.passwordPlaceholder,
77
+ variant: O === "transparent" ? "primary" : "secondary",
77
78
  required: !0
78
79
  }),
79
- /* @__PURE__ */ x(u, {})
80
+ /* @__PURE__ */ S(d, {})
80
81
  ]
81
82
  }),
82
- M?.rememberMe && /* @__PURE__ */ S(c, {
83
+ N?.rememberMe && /* @__PURE__ */ C(l, {
83
84
  name: "rememberMe",
84
- isDisabled: G,
85
- variant: D === "transparent" ? "primary" : "secondary",
86
- children: [/* @__PURE__ */ x(c.Control, { children: /* @__PURE__ */ x(c.Indicator, {}) }), /* @__PURE__ */ x(c.Content, { children: /* @__PURE__ */ x(p, { children: N.auth.rememberMe }) })]
85
+ isDisabled: J,
86
+ variant: O === "transparent" ? "primary" : "secondary",
87
+ children: [/* @__PURE__ */ S(l.Control, { children: /* @__PURE__ */ S(l.Indicator, {}) }), /* @__PURE__ */ S(l.Content, { children: /* @__PURE__ */ S(m, { children: P.auth.rememberMe }) })]
87
88
  }),
88
- /* @__PURE__ */ S("div", {
89
+ Y && /* @__PURE__ */ S("div", {
90
+ className: "flex justify-center",
91
+ children: Y
92
+ }),
93
+ /* @__PURE__ */ C("div", {
89
94
  className: "flex flex-col gap-3",
90
- children: [/* @__PURE__ */ S(o, {
95
+ children: [/* @__PURE__ */ C(s, {
91
96
  type: "submit",
92
97
  className: "w-full",
93
- isPending: G,
94
- children: [U && /* @__PURE__ */ x(h, {
98
+ isPending: J,
99
+ children: [K && /* @__PURE__ */ S(g, {
95
100
  color: "current",
96
101
  size: "sm"
97
- }), N.auth.signIn]
98
- }), P.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ x(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
102
+ }), P.auth.signIn]
103
+ }), F.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ S(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
99
104
  })
100
105
  ]
101
106
  }),
102
- E === "bottom" && /* @__PURE__ */ S(b, { children: [K && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
107
+ D === "bottom" && /* @__PURE__ */ C(x, { children: [X && /* @__PURE__ */ S(e, { children: P.auth.or }), !!L?.length && /* @__PURE__ */ S(t, { socialLayout: E })] })
103
108
  ]
104
109
  }),
105
- /* @__PURE__ */ S(s.Footer, {
110
+ /* @__PURE__ */ C(c.Footer, {
106
111
  className: "flex-col gap-3",
107
- children: [M?.forgotPassword && /* @__PURE__ */ x(m, {
108
- href: `${A.auth}/${L.auth.forgotPassword}`,
112
+ children: [N?.forgotPassword && /* @__PURE__ */ S(h, {
113
+ href: `${j.auth}/${R.auth.forgotPassword}`,
109
114
  className: "no-underline hover:underline",
110
- children: N.auth.forgotPasswordLink
111
- }), M?.enabled && /* @__PURE__ */ S(l, {
115
+ children: P.auth.forgotPasswordLink
116
+ }), N?.enabled && /* @__PURE__ */ C(u, {
112
117
  className: "text-sm",
113
118
  children: [
114
- N.auth.needToCreateAnAccount,
119
+ P.auth.needToCreateAnAccount,
115
120
  " ",
116
- /* @__PURE__ */ x(m, {
117
- href: `${A.auth}/${L.auth.signUp}`,
121
+ /* @__PURE__ */ S(h, {
122
+ href: `${j.auth}/${R.auth.signUp}`,
118
123
  className: "text-accent no-underline hover:underline decoration-accent-hover",
119
- children: N.auth.signUp
124
+ children: P.auth.signUp
120
125
  })
121
126
  ]
122
127
  })]
@@ -125,4 +130,4 @@ function w({ className: w, socialLayout: T, socialPosition: E = "bottom", varian
125
130
  });
126
131
  }
127
132
  //#endregion
128
- export { w as SignIn };
133
+ export { T as SignIn };
package/dist/components/auth/sign-up.js CHANGED
@@ -2,197 +2,202 @@ import { AdditionalField as e } from "./additional-field.js";
2
2
  import { FieldSeparator as t } from "./field-separator.js";
3
3
  import { ProviderButtons as n } from "./provider-buttons.js";
4
4
  import { authMutationKeys as r, parseAdditionalFieldValue as i } from "@better-auth-ui/core";
5
- import { useAuth as a, useSignUpEmail as o } from "@better-auth-ui/react";
5
+ import { useAuth as a, useFetchOptions as o, useSignUpEmail as ee } from "@better-auth-ui/react";
6
6
  import { Eye as s, EyeSlash as c } from "@gravity-ui/icons";
7
- import { Button as l, Card as u, Description as d, FieldError as f, Form as p, Input as m, InputGroup as h, Label as g, Link as _, Spinner as v, TextField as y, cn as b, toast as x } from "@heroui/react";
8
- import { useState as S } from "react";
9
- import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
10
- import { useIsMutating as E } from "@tanstack/react-query";
7
+ import { Button as l, Card as u, Description as d, FieldError as f, Form as te, Input as p, InputGroup as m, Label as h, Link as g, Spinner as _, TextField as v, cn as y, toast as b } from "@heroui/react";
8
+ import { useState as x } from "react";
9
+ import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
10
+ import { useIsMutating as T } from "@tanstack/react-query";
11
11
  //#region src/components/auth/sign-up.tsx
12
- function D({ className: D, socialLayout: O, socialPosition: k = "bottom", variant: A, ...j }) {
13
- let { additionalFields: M, authClient: ee, basePaths: N, emailAndPassword: P, localization: F, plugins: I, redirectTo: L, socialProviders: R, viewPaths: z, navigate: B } = a(), [V, H] = S(""), [U, W] = S(""), { mutate: G, isPending: K } = o(ee, {
12
+ function E({ className: E, socialLayout: D, socialPosition: O = "bottom", variant: k, ...A }) {
13
+ let { additionalFields: j, authClient: M, basePaths: N, emailAndPassword: P, localization: F, plugins: I, redirectTo: L, socialProviders: R, viewPaths: z, navigate: B } = a(), { fetchOptions: V, resetFetchOptions: H } = o(), [U, W] = x(""), [G, K] = x(""), { mutate: q, isPending: J } = ee(M, {
14
14
  onError: (e) => {
15
- H(""), W(""), x.danger(e.error?.message || e.message);
15
+ W(""), K(""), b.danger(e.error?.message || e.message), H();
16
16
  },
17
17
  onSuccess: () => {
18
- P?.requireEmailVerification ? (x.success(F.auth.verifyYourEmail), B({ to: `${N.auth}/${z.auth.signIn}` })) : B({ to: L });
18
+ P?.requireEmailVerification ? (b.success(F.auth.verifyYourEmail), B({ to: `${N.auth}/${z.auth.signIn}` })) : B({ to: L });
19
19
  }
20
- }), [q, J] = S(!1), [Y, X] = S(!1), Z = E({ mutationKey: r.signIn.all }) + E({ mutationKey: r.signUp.all }) > 0, Q = async (e) => {
20
+ }), [Y, ne] = x(!1), [X, re] = x(!1), Z = T({ mutationKey: r.signIn.all }) + T({ mutationKey: r.signUp.all }) > 0, Q = I.find((e) => e.captchaComponent)?.captchaComponent, ie = async (e) => {
21
21
  e.preventDefault();
22
22
  let t = new FormData(e.currentTarget), n = t.get("name") ?? "", r = t.get("email");
23
- if (P?.confirmPassword && V !== U) {
24
- x.danger(F.auth.passwordsDoNotMatch), H(""), W("");
23
+ if (P?.confirmPassword && U !== G) {
24
+ b.danger(F.auth.passwordsDoNotMatch), W(""), K("");
25
25
  return;
26
26
  }
27
27
  let a = {};
28
- for (let e of M ?? []) {
28
+ for (let e of j ?? []) {
29
29
  if (!e.signUp || e.readOnly) continue;
30
30
  let n = i(e, t.get(e.name));
31
31
  if (e.validate) try {
32
32
  await e.validate(n);
33
33
  } catch (e) {
34
- x.danger(e instanceof Error ? e.message : String(e));
34
+ b.danger(e instanceof Error ? e.message : String(e));
35
35
  return;
36
36
  }
37
37
  n !== void 0 && (a[e.name] = n);
38
38
  }
39
- G({
39
+ q({
40
40
  name: n,
41
41
  email: r,
42
- password: V,
43
- ...a
42
+ password: U,
43
+ ...a,
44
+ fetchOptions: V
44
45
  });
45
46
  }, $ = P?.enabled && !!R?.length;
46
- return /* @__PURE__ */ T(u, {
47
- className: b("w-full max-w-sm gap-4 md:p-6", D),
48
- variant: A,
49
- ...j,
47
+ return /* @__PURE__ */ w(u, {
48
+ className: y("w-full max-w-sm gap-4 md:p-6", E),
49
+ variant: k,
50
+ ...A,
50
51
  children: [
51
- /* @__PURE__ */ w(u.Header, { children: /* @__PURE__ */ w(u.Title, {
52
+ /* @__PURE__ */ C(u.Header, { children: /* @__PURE__ */ C(u.Title, {
52
53
  className: "text-xl font-semibold mb-1",
53
54
  children: F.auth.signUp
54
55
  }) }),
55
- /* @__PURE__ */ T(u.Content, {
56
+ /* @__PURE__ */ w(u.Content, {
56
57
  className: "gap-4",
57
58
  children: [
58
- k === "top" && /* @__PURE__ */ T(C, { children: [!!R?.length && /* @__PURE__ */ w(n, { socialLayout: O }), $ && /* @__PURE__ */ w(t, { children: F.auth.or })] }),
59
- P?.enabled && /* @__PURE__ */ T(p, {
60
- onSubmit: Q,
59
+ O === "top" && /* @__PURE__ */ w(S, { children: [!!R?.length && /* @__PURE__ */ C(n, { socialLayout: D }), $ && /* @__PURE__ */ C(t, { children: F.auth.or })] }),
60
+ P?.enabled && /* @__PURE__ */ w(te, {
61
+ onSubmit: ie,
61
62
  className: "flex flex-col gap-4",
62
63
  children: [
63
- P.name !== !1 && /* @__PURE__ */ T(y, {
64
+ P.name !== !1 && /* @__PURE__ */ w(v, {
64
65
  name: "name",
65
66
  type: "text",
66
67
  autoComplete: "name",
67
68
  isDisabled: Z,
68
69
  children: [
69
- /* @__PURE__ */ w(g, { children: F.auth.name }),
70
- /* @__PURE__ */ w(m, {
70
+ /* @__PURE__ */ C(h, { children: F.auth.name }),
71
+ /* @__PURE__ */ C(p, {
71
72
  placeholder: F.auth.namePlaceholder,
72
73
  required: !0,
73
- variant: A === "transparent" ? "primary" : "secondary"
74
+ variant: k === "transparent" ? "primary" : "secondary"
74
75
  }),
75
- /* @__PURE__ */ w(f, {})
76
+ /* @__PURE__ */ C(f, {})
76
77
  ]
77
78
  }),
78
- /* @__PURE__ */ T(y, {
79
+ /* @__PURE__ */ w(v, {
79
80
  name: "email",
80
81
  type: "email",
81
82
  autoComplete: "email",
82
83
  isDisabled: Z,
83
84
  children: [
84
- /* @__PURE__ */ w(g, { children: F.auth.email }),
85
- /* @__PURE__ */ w(m, {
85
+ /* @__PURE__ */ C(h, { children: F.auth.email }),
86
+ /* @__PURE__ */ C(p, {
86
87
  placeholder: F.auth.emailPlaceholder,
87
88
  required: !0,
88
- variant: A === "transparent" ? "primary" : "secondary"
89
+ variant: k === "transparent" ? "primary" : "secondary"
89
90
  }),
90
- /* @__PURE__ */ w(f, {})
91
+ /* @__PURE__ */ C(f, {})
91
92
  ]
92
93
  }),
93
- M?.map((t) => t.signUp === "above" && /* @__PURE__ */ w(e, {
94
+ j?.map((t) => t.signUp === "above" && /* @__PURE__ */ C(e, {
94
95
  name: t.name,
95
96
  field: t,
96
97
  isPending: Z,
97
- variant: A
98
+ variant: k
98
99
  }, t.name)),
99
- /* @__PURE__ */ T(y, {
100
+ /* @__PURE__ */ w(v, {
100
101
  minLength: P?.minPasswordLength,
101
102
  maxLength: P?.maxPasswordLength,
102
103
  name: "password",
103
104
  autoComplete: "new-password",
104
105
  isDisabled: Z,
105
- value: V,
106
- onChange: H,
106
+ value: U,
107
+ onChange: W,
107
108
  children: [
108
- /* @__PURE__ */ w(g, { children: F.auth.password }),
109
- /* @__PURE__ */ T(h, {
110
- variant: A === "transparent" ? "primary" : "secondary",
111
- children: [/* @__PURE__ */ w(h.Input, {
109
+ /* @__PURE__ */ C(h, { children: F.auth.password }),
110
+ /* @__PURE__ */ w(m, {
111
+ variant: k === "transparent" ? "primary" : "secondary",
112
+ children: [/* @__PURE__ */ C(m.Input, {
112
113
  placeholder: F.auth.passwordPlaceholder,
113
- type: q ? "text" : "password",
114
+ type: Y ? "text" : "password",
114
115
  name: "password",
115
116
  required: !0
116
- }), /* @__PURE__ */ w(h.Suffix, {
117
+ }), /* @__PURE__ */ C(m.Suffix, {
117
118
  className: "px-0",
118
- children: /* @__PURE__ */ w(l, {
119
+ children: /* @__PURE__ */ C(l, {
119
120
  isIconOnly: !0,
120
- "aria-label": q ? F.auth.hidePassword : F.auth.showPassword,
121
+ "aria-label": Y ? F.auth.hidePassword : F.auth.showPassword,
121
122
  size: "sm",
122
123
  variant: "ghost",
123
- onPress: () => J(!q),
124
+ onPress: () => ne(!Y),
124
125
  isDisabled: Z,
125
- children: w(q ? c : s, {})
126
+ children: C(Y ? c : s, {})
126
127
  })
127
128
  })]
128
129
  }),
129
- /* @__PURE__ */ w(f, {})
130
+ /* @__PURE__ */ C(f, {})
130
131
  ]
131
132
  }),
132
- P?.confirmPassword && /* @__PURE__ */ T(y, {
133
+ P?.confirmPassword && /* @__PURE__ */ w(v, {
133
134
  minLength: P?.minPasswordLength,
134
135
  maxLength: P?.maxPasswordLength,
135
136
  name: "confirmPassword",
136
137
  autoComplete: "new-password",
137
138
  isDisabled: Z,
138
- value: U,
139
- onChange: W,
139
+ value: G,
140
+ onChange: K,
140
141
  children: [
141
- /* @__PURE__ */ w(g, { children: F.auth.confirmPassword }),
142
- /* @__PURE__ */ T(h, {
143
- variant: A === "transparent" ? "primary" : "secondary",
144
- children: [/* @__PURE__ */ w(h.Input, {
142
+ /* @__PURE__ */ C(h, { children: F.auth.confirmPassword }),
143
+ /* @__PURE__ */ w(m, {
144
+ variant: k === "transparent" ? "primary" : "secondary",
145
+ children: [/* @__PURE__ */ C(m.Input, {
145
146
  name: "confirmPassword",
146
147
  placeholder: F.auth.confirmPasswordPlaceholder,
147
- type: Y ? "text" : "password",
148
+ type: X ? "text" : "password",
148
149
  required: !0
149
- }), /* @__PURE__ */ w(h.Suffix, {
150
+ }), /* @__PURE__ */ C(m.Suffix, {
150
151
  className: "px-0",
151
- children: /* @__PURE__ */ w(l, {
152
+ children: /* @__PURE__ */ C(l, {
152
153
  isIconOnly: !0,
153
- "aria-label": Y ? F.auth.hidePassword : F.auth.showPassword,
154
+ "aria-label": X ? F.auth.hidePassword : F.auth.showPassword,
154
155
  size: "sm",
155
156
  variant: "ghost",
156
- onPress: () => X(!Y),
157
+ onPress: () => re(!X),
157
158
  isDisabled: Z,
158
- children: w(Y ? c : s, {})
159
+ children: C(X ? c : s, {})
159
160
  })
160
161
  })]
161
162
  }),
162
- /* @__PURE__ */ w(f, {})
163
+ /* @__PURE__ */ C(f, {})
163
164
  ]
164
165
  }),
165
- M?.map((t) => t.signUp && t.signUp !== "above" && /* @__PURE__ */ w(e, {
166
+ j?.map((t) => t.signUp && t.signUp !== "above" && /* @__PURE__ */ C(e, {
166
167
  name: t.name,
167
168
  field: t,
168
169
  isPending: Z,
169
- variant: A
170
+ variant: k
170
171
  }, t.name)),
171
- /* @__PURE__ */ T("div", {
172
+ Q && /* @__PURE__ */ C("div", {
173
+ className: "flex justify-center",
174
+ children: Q
175
+ }),
176
+ /* @__PURE__ */ w("div", {
172
177
  className: "flex flex-col gap-3",
173
- children: [/* @__PURE__ */ T(l, {
178
+ children: [/* @__PURE__ */ w(l, {
174
179
  type: "submit",
175
180
  className: "w-full",
176
181
  isPending: Z,
177
- children: [K && /* @__PURE__ */ w(v, {
182
+ children: [J && /* @__PURE__ */ C(_, {
178
183
  color: "current",
179
184
  size: "sm"
180
185
  }), F.auth.signUp]
181
- }), I.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ w(t, { view: "signUp" }, `${e.id}-${n.toString()}`)))]
186
+ }), I.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ C(t, { view: "signUp" }, `${e.id}-${n.toString()}`)))]
182
187
  })
183
188
  ]
184
189
  }),
185
- k === "bottom" && /* @__PURE__ */ T(C, { children: [$ && /* @__PURE__ */ w(t, { children: F.auth.or }), !!R?.length && /* @__PURE__ */ w(n, { socialLayout: O })] })
190
+ O === "bottom" && /* @__PURE__ */ w(S, { children: [$ && /* @__PURE__ */ C(t, { children: F.auth.or }), !!R?.length && /* @__PURE__ */ C(n, { socialLayout: D })] })
186
191
  ]
187
192
  }),
188
- /* @__PURE__ */ w(u.Footer, {
193
+ /* @__PURE__ */ C(u.Footer, {
189
194
  className: "flex-col gap-3",
190
- children: /* @__PURE__ */ T(d, {
195
+ children: /* @__PURE__ */ w(d, {
191
196
  className: "text-sm",
192
197
  children: [
193
198
  F.auth.alreadyHaveAnAccount,
194
199
  " ",
195
- /* @__PURE__ */ w(_, {
200
+ /* @__PURE__ */ C(g, {
196
201
  href: `${N.auth}/${z.auth.signIn}`,
197
202
  className: "text-accent no-underline hover:underline decoration-accent-hover",
198
203
  children: F.auth.signIn
@@ -204,4 +209,4 @@ function D({ className: D, socialLayout: O, socialPosition: k = "bottom", varian
204
209
  });
205
210
  }
206
211
  //#endregion
207
- export { D as SignUp };
212
+ export { E as SignUp };
package/dist/components/auth/username/sign-in-username.js CHANGED
@@ -2,135 +2,141 @@ import { FieldSeparator as e } from "../field-separator.js";
2
2
  import { ProviderButtons as t } from "../provider-buttons.js";
3
3
  import { usernamePlugin as n } from "../../../lib/auth/username-plugin.js";
4
4
  import { authMutationKeys as r } from "@better-auth-ui/core";
5
- import { useAuth as i, useAuthPlugin as a, useSendVerificationEmail as o, useSignInEmail as s, useSignInUsername as c } from "@better-auth-ui/react";
6
- import { Button as l, Card as u, Checkbox as d, Description as f, FieldError as p, Form as m, Input as h, Label as g, Link as _, Spinner as v, TextField as y, cn as b, toast as x } from "@heroui/react";
7
- import { useState as S } from "react";
8
- import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
9
- import { useIsMutating as E } from "@tanstack/react-query";
5
+ import { useAuth as i, useAuthPlugin as a, useFetchOptions as o, useSendVerificationEmail as s, useSignInEmail as c, useSignInUsername as l } from "@better-auth-ui/react";
6
+ import { Button as ee, Card as u, Checkbox as d, Description as f, FieldError as p, Form as te, Input as m, Label as h, Link as g, Spinner as ne, TextField as _, cn as v, toast as y } from "@heroui/react";
7
+ import { useState as re } from "react";
8
+ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
9
+ import { useIsMutating as C } from "@tanstack/react-query";
10
10
  //#region src/components/auth/username/sign-in-username.tsx
11
- function D({ className: D, socialLayout: O, socialPosition: k = "bottom", variant: A, ...j }) {
12
- let { authClient: M, basePaths: N, baseURL: P, emailAndPassword: F, localization: I, plugins: L, redirectTo: R, socialProviders: z, viewPaths: B, navigate: V } = i(), { localization: H } = a(n), [U, W] = S(""), { mutate: G } = o(M, { onSuccess: () => x.success(I.auth.verificationEmailSent) });
13
- function K(e) {
11
+ function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
12
+ let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L, navigate: R } = i(), { fetchOptions: z, resetFetchOptions: B } = o(), { localization: V } = a(n), [H, U] = re(""), { mutate: W } = s(k, { onSuccess: () => y.success(N.auth.verificationEmailSent) });
13
+ function G(e) {
14
14
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
15
15
  }
16
- let { mutate: q } = s(M, {
16
+ let { mutate: K, isPending: q } = c(k, {
17
17
  onError: (e, { email: t }) => {
18
- W(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? x.danger(e.error?.message || e.message, { actionProps: {
19
- children: I.auth.resend,
20
- onClick: () => G({
18
+ U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
19
+ children: N.auth.resend,
20
+ onClick: () => W({
21
21
  email: t,
22
- callbackURL: `${P}${R}`
22
+ callbackURL: `${j}${F}`
23
23
  })
24
- } }) : x.danger(e.error?.message || e.message);
24
+ } }) : y.danger(e.error?.message || e.message), B();
25
25
  },
26
- onSuccess: () => V({ to: R })
27
- }), { mutate: J, isPending: Y } = c(M, {
26
+ onSuccess: () => R({ to: F })
27
+ }), { mutate: J, isPending: Y } = l(k, {
28
28
  onError: (e) => {
29
- W(""), x.danger(e.error?.message || e.message);
29
+ U(""), y.danger(e.error?.message || e.message), B();
30
30
  },
31
- onSuccess: () => V({ to: R })
32
- }), X = (e) => {
31
+ onSuccess: () => R({ to: F })
32
+ }), ie = (e) => {
33
33
  e.preventDefault();
34
34
  let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
35
- K(n) ? q({
35
+ G(n) ? K({
36
36
  email: n,
37
- password: U,
38
- ...F?.rememberMe ? { rememberMe: r } : {}
37
+ password: H,
38
+ ...M?.rememberMe ? { rememberMe: r } : {},
39
+ fetchOptions: z
39
40
  }) : J({
40
41
  username: n,
41
- password: U,
42
- ...F?.rememberMe ? { rememberMe: r } : {}
42
+ password: H,
43
+ ...M?.rememberMe ? { rememberMe: r } : {},
44
+ fetchOptions: z
43
45
  });
44
- }, Z = E({ mutationKey: r.signIn.all }) + E({ mutationKey: r.signUp.all }) > 0, Q = F?.enabled && !!z?.length;
45
- return /* @__PURE__ */ T(u, {
46
- className: b("w-full max-w-sm gap-4 md:p-6", D),
47
- variant: A,
48
- ...j,
46
+ }, X = C({ mutationKey: r.signIn.all }) + C({ mutationKey: r.signUp.all }) > 0, Z = q || Y, Q = P.find((e) => e.captchaComponent)?.captchaComponent, $ = M?.enabled && !!I?.length;
47
+ return /* @__PURE__ */ S(u, {
48
+ className: v("w-full max-w-sm gap-4 md:p-6", w),
49
+ variant: D,
50
+ ...O,
49
51
  children: [
50
- /* @__PURE__ */ w(u.Header, { children: /* @__PURE__ */ w(u.Title, {
52
+ /* @__PURE__ */ x(u.Header, { children: /* @__PURE__ */ x(u.Title, {
51
53
  className: "text-xl font-semibold mb-1",
52
- children: I.auth.signIn
54
+ children: N.auth.signIn
53
55
  }) }),
54
- /* @__PURE__ */ T(u.Content, {
56
+ /* @__PURE__ */ S(u.Content, {
55
57
  className: "gap-4",
56
58
  children: [
57
- k === "top" && /* @__PURE__ */ T(C, { children: [!!z?.length && /* @__PURE__ */ w(t, { socialLayout: O }), Q && /* @__PURE__ */ w(e, { children: I.auth.or })] }),
58
- F?.enabled && /* @__PURE__ */ T(m, {
59
- onSubmit: X,
59
+ E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), $ && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
60
+ M?.enabled && /* @__PURE__ */ S(te, {
61
+ onSubmit: ie,
60
62
  className: "flex flex-col gap-4",
61
63
  children: [
62
- /* @__PURE__ */ T(y, {
64
+ /* @__PURE__ */ S(_, {
63
65
  name: "email",
64
66
  type: "text",
65
67
  autoComplete: "username email",
66
- isDisabled: Z,
68
+ isDisabled: X,
67
69
  children: [
68
- /* @__PURE__ */ w(g, { children: H.username }),
69
- /* @__PURE__ */ w(h, {
70
- placeholder: H.usernameOrEmailPlaceholder,
71
- variant: A === "transparent" ? "primary" : "secondary",
70
+ /* @__PURE__ */ x(h, { children: V.username }),
71
+ /* @__PURE__ */ x(m, {
72
+ placeholder: V.usernameOrEmailPlaceholder,
73
+ variant: D === "transparent" ? "primary" : "secondary",
72
74
  required: !0
73
75
  }),
74
- /* @__PURE__ */ w(p, {})
76
+ /* @__PURE__ */ x(p, {})
75
77
  ]
76
78
  }),
77
- /* @__PURE__ */ T(y, {
78
- minLength: F?.minPasswordLength,
79
- maxLength: F?.maxPasswordLength,
79
+ /* @__PURE__ */ S(_, {
80
+ minLength: M?.minPasswordLength,
81
+ maxLength: M?.maxPasswordLength,
80
82
  name: "password",
81
83
  type: "password",
82
84
  autoComplete: "current-password",
83
- isDisabled: Z,
84
- value: U,
85
- onChange: W,
85
+ isDisabled: X,
86
+ value: H,
87
+ onChange: U,
86
88
  children: [
87
- /* @__PURE__ */ w(g, { children: I.auth.password }),
88
- /* @__PURE__ */ w(h, {
89
- placeholder: I.auth.passwordPlaceholder,
90
- variant: A === "transparent" ? "primary" : "secondary",
89
+ /* @__PURE__ */ x(h, { children: N.auth.password }),
90
+ /* @__PURE__ */ x(m, {
91
+ placeholder: N.auth.passwordPlaceholder,
92
+ variant: D === "transparent" ? "primary" : "secondary",
91
93
  required: !0
92
94
  }),
93
- /* @__PURE__ */ w(p, {})
95
+ /* @__PURE__ */ x(p, {})
94
96
  ]
95
97
  }),
96
- F?.rememberMe && /* @__PURE__ */ T(d, {
98
+ M?.rememberMe && /* @__PURE__ */ S(d, {
97
99
  name: "rememberMe",
98
- isDisabled: Z,
99
- variant: A === "transparent" ? "primary" : "secondary",
100
- children: [/* @__PURE__ */ w(d.Control, { children: /* @__PURE__ */ w(d.Indicator, {}) }), /* @__PURE__ */ w(d.Content, { children: /* @__PURE__ */ w(g, { children: I.auth.rememberMe }) })]
100
+ isDisabled: X,
101
+ variant: D === "transparent" ? "primary" : "secondary",
102
+ children: [/* @__PURE__ */ x(d.Control, { children: /* @__PURE__ */ x(d.Indicator, {}) }), /* @__PURE__ */ x(d.Content, { children: /* @__PURE__ */ x(h, { children: N.auth.rememberMe }) })]
101
103
  }),
102
- /* @__PURE__ */ T("div", {
104
+ Q && /* @__PURE__ */ x("div", {
105
+ className: "flex justify-center",
106
+ children: Q
107
+ }),
108
+ /* @__PURE__ */ S("div", {
103
109
  className: "flex flex-col gap-3",
104
- children: [/* @__PURE__ */ T(l, {
110
+ children: [/* @__PURE__ */ S(ee, {
105
111
  type: "submit",
106
112
  className: "w-full",
107
- isPending: Y || Z,
108
- children: [Y && /* @__PURE__ */ w(v, {
113
+ isPending: Z || X,
114
+ children: [Z && /* @__PURE__ */ x(ne, {
109
115
  color: "current",
110
116
  size: "sm"
111
- }), I.auth.signIn]
112
- }), L.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ w(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
117
+ }), N.auth.signIn]
118
+ }), P.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ x(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
113
119
  })
114
120
  ]
115
121
  }),
116
- k === "bottom" && /* @__PURE__ */ T(C, { children: [Q && /* @__PURE__ */ w(e, { children: I.auth.or }), !!z?.length && /* @__PURE__ */ w(t, { socialLayout: O })] })
122
+ E === "bottom" && /* @__PURE__ */ S(b, { children: [$ && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
117
123
  ]
118
124
  }),
119
- /* @__PURE__ */ T(u.Footer, {
125
+ /* @__PURE__ */ S(u.Footer, {
120
126
  className: "flex-col gap-3",
121
- children: [F?.forgotPassword && /* @__PURE__ */ w(_, {
122
- href: `${N.auth}/${B.auth.forgotPassword}`,
127
+ children: [M?.forgotPassword && /* @__PURE__ */ x(g, {
128
+ href: `${A.auth}/${L.auth.forgotPassword}`,
123
129
  className: "no-underline hover:underline",
124
- children: I.auth.forgotPasswordLink
125
- }), F?.enabled && /* @__PURE__ */ T(f, {
130
+ children: N.auth.forgotPasswordLink
131
+ }), M?.enabled && /* @__PURE__ */ S(f, {
126
132
  className: "text-sm",
127
133
  children: [
128
- I.auth.needToCreateAnAccount,
134
+ N.auth.needToCreateAnAccount,
129
135
  " ",
130
- /* @__PURE__ */ w(_, {
131
- href: `${N.auth}/${B.auth.signUp}`,
136
+ /* @__PURE__ */ x(g, {
137
+ href: `${A.auth}/${L.auth.signUp}`,
132
138
  className: "text-accent no-underline hover:underline decoration-accent-hover",
133
- children: I.auth.signUp
139
+ children: N.auth.signUp
134
140
  })
135
141
  ]
136
142
  })]
@@ -139,4 +145,4 @@ function D({ className: D, socialLayout: O, socialPosition: k = "bottom", varian
139
145
  });
140
146
  }
141
147
  //#endregion
142
- export { D as SignInUsername };
148
+ export { w as SignInUsername };
package/dist/components/auth/username/username-field.js CHANGED
@@ -26,7 +26,6 @@ function h({ name: h, field: g, isPending: _, variant: v }) {
26
26
  minLength: x,
27
27
  maxLength: S,
28
28
  isDisabled: _,
29
- isRequired: g.required,
30
29
  isReadOnly: g.readOnly,
31
30
  value: T,
32
31
  onChange: M,
@@ -34,7 +33,10 @@ function h({ name: h, field: g, isPending: _, variant: v }) {
34
33
  /* @__PURE__ */ f(c, { children: g.label }),
35
34
  /* @__PURE__ */ p(s, {
36
35
  variant: v === "transparent" ? "primary" : "secondary",
37
- children: [/* @__PURE__ */ f(s.Input, { placeholder: g.placeholder }), N && /* @__PURE__ */ f(s.Suffix, {
36
+ children: [/* @__PURE__ */ f(s.Input, {
37
+ placeholder: g.placeholder,
38
+ required: g.required
39
+ }), N && /* @__PURE__ */ f(s.Suffix, {
38
40
  "aria-label": O?.available ? b.usernameAvailable : O?.available === !1 ? b.usernameTaken : void 0,
39
41
  className: "px-2",
40
42
  children: O?.available ? /* @__PURE__ */ f(i, { className: "text-success" }) : k || O?.available === !1 ? /* @__PURE__ */ f(a, { className: "text-danger" }) : /* @__PURE__ */ f(l, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@better-auth-ui/heroui",
3
- "version": "1.6.4",
3
+ "version": "1.6.5",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": "vite build",
package/src/components/auth/delete-user/danger-zone.tsx CHANGED
@@ -1,8 +1,11 @@
1
1
  import { useAuth } from "@better-auth-ui/react"
2
2
  import { type CardProps, cn } from "@heroui/react"
3
3
  import type { ComponentProps } from "react"
4
+
4
5
  import { DeleteUser } from "./delete-user"
5
- export type DangerZoneProps = Omit<ComponentProps<"div">, "children"> & {
6
+
7
+ export type DangerZoneProps = {
8
+ className?: string
6
9
  variant?: CardProps["variant"]
7
10
  }
8
11
 
@@ -10,7 +13,11 @@ export type DangerZoneProps = Omit<ComponentProps<"div">, "children"> & {
10
13
  * Renders the danger zone heading and {@link DeleteUser}.
11
14
  * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
12
15
  */
13
- export function DangerZone({ className, variant, ...props }: DangerZoneProps) {
16
+ export function DangerZone({
17
+ className,
18
+ variant,
19
+ ...props
20
+ }: DangerZoneProps & ComponentProps<"div">) {
14
21
  const { localization } = useAuth()
15
22
 
16
23
  return (
package/src/components/auth/forgot-password.tsx CHANGED
@@ -1,4 +1,8 @@
1
- import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react"
1
+ import {
2
+ useAuth,
3
+ useFetchOptions,
4
+ useRequestPasswordReset
5
+ } from "@better-auth-ui/react"
2
6
  import {
3
7
  Button,
4
8
  Card,
@@ -35,11 +39,18 @@ export function ForgotPassword({
35
39
  variant,
36
40
  ...props
37
41
  }: ForgotPasswordProps & Omit<CardProps, "children">) {
38
- const { authClient, basePaths, localization, viewPaths, navigate } = useAuth()
42
+ const { authClient, basePaths, localization, viewPaths, navigate, plugins } =
43
+ useAuth()
44
+
45
+ const { fetchOptions, resetFetchOptions } = useFetchOptions()
39
46
 
40
47
  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
41
48
  authClient,
42
49
  {
50
+ onError: (error) => {
51
+ toast.danger(error.error?.message || error.message)
52
+ resetFetchOptions()
53
+ },
43
54
  onSuccess: () => {
44
55
  toast.success(localization.auth.passwordResetEmailSent)
45
56
  navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
@@ -51,9 +62,16 @@ export function ForgotPassword({
51
62
  e.preventDefault()
52
63
 
53
64
  const formData = new FormData(e.currentTarget)
54
- requestPasswordReset({ email: formData.get("email") as string })
65
+ requestPasswordReset({
66
+ email: formData.get("email") as string,
67
+ fetchOptions
68
+ })
55
69
  }
56
70
 
71
+ const Captcha = plugins.find(
72
+ (plugin) => plugin.captchaComponent
73
+ )?.captchaComponent
74
+
57
75
  return (
58
76
  <Card
59
77
  className={cn("w-full max-w-sm gap-4 md:p-6", className)}
@@ -85,11 +103,15 @@ export function ForgotPassword({
85
103
  <FieldError />
86
104
  </TextField>
87
105
 
88
- <Button type="submit" className="w-full" isPending={isPending}>
89
- {isPending && <Spinner color="current" size="sm" />}
106
+ {Captcha && <div className="flex justify-center">{Captcha}</div>}
107
+
108
+ <div className="flex flex-col gap-3">
109
+ <Button type="submit" className="w-full" isPending={isPending}>
110
+ {isPending && <Spinner color="current" size="sm" />}
90
111
 
91
- {localization.auth.sendResetLink}
92
- </Button>
112
+ {localization.auth.sendResetLink}
113
+ </Button>
114
+ </div>
93
115
  </Form>
94
116
  </Card.Content>
95
117
 
package/src/components/auth/sign-in.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { authMutationKeys } from "@better-auth-ui/core"
2
2
  import {
3
3
  useAuth,
4
+ useFetchOptions,
4
5
  useSendVerificationEmail,
5
6
  useSignInEmail
6
7
  } from "@better-auth-ui/react"
@@ -58,6 +59,8 @@ export function SignIn({
58
59
  navigate
59
60
  } = useAuth()
60
61
 
62
+ const { fetchOptions, resetFetchOptions } = useFetchOptions()
63
+
61
64
  const [password, setPassword] = useState("")
62
65
 
63
66
  const { mutate: sendVerificationEmail } = useSendVerificationEmail(
@@ -87,6 +90,8 @@ export function SignIn({
87
90
  } else {
88
91
  toast.danger(error.error?.message || error.message)
89
92
  }
93
+
94
+ resetFetchOptions()
90
95
  },
91
96
  onSuccess: () => navigate({ to: redirectTo })
92
97
  }
@@ -102,7 +107,8 @@ export function SignIn({
102
107
  signInEmail({
103
108
  email,
104
109
  password,
105
- ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
110
+ ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
111
+ fetchOptions
106
112
  })
107
113
  }
108
114
 
@@ -114,6 +120,10 @@ export function SignIn({
114
120
  })
115
121
  const isPending = signInMutating + signUpMutating > 0
116
122
 
123
+ const Captcha = plugins.find(
124
+ (plugin) => plugin.captchaComponent
125
+ )?.captchaComponent
126
+
117
127
  const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
118
128
 
119
129
  return (
@@ -197,6 +207,8 @@ export function SignIn({
197
207
  </Checkbox>
198
208
  )}
199
209
 
210
+ {Captcha && <div className="flex justify-center">{Captcha}</div>}
211
+
200
212
  <div className="flex flex-col gap-3">
201
213
  <Button type="submit" className="w-full" isPending={isPending}>
202
214
  {signInEmailPending && <Spinner color="current" size="sm" />}
package/src/components/auth/sign-up.tsx CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  authMutationKeys,
3
3
  parseAdditionalFieldValue
4
4
  } from "@better-auth-ui/core"
5
- import { useAuth, useSignUpEmail } from "@better-auth-ui/react"
5
+ import { useAuth, useFetchOptions, useSignUpEmail } from "@better-auth-ui/react"
6
6
  import { Eye, EyeSlash } from "@gravity-ui/icons"
7
7
  import {
8
8
  Button,
@@ -63,6 +63,8 @@ export function SignUp({
63
63
  navigate
64
64
  } = useAuth()
65
65
 
66
+ const { fetchOptions, resetFetchOptions } = useFetchOptions()
67
+
66
68
  const [password, setPassword] = useState("")
67
69
  const [confirmPassword, setConfirmPassword] = useState("")
68
70
 
@@ -73,6 +75,7 @@ export function SignUp({
73
75
  setPassword("")
74
76
  setConfirmPassword("")
75
77
  toast.danger(error.error?.message || error.message)
78
+ resetFetchOptions()
76
79
  },
77
80
  onSuccess: () => {
78
81
  if (emailAndPassword?.requireEmailVerification) {
@@ -97,6 +100,10 @@ export function SignUp({
97
100
  })
98
101
  const isPending = signInMutating + signUpMutating > 0
99
102
 
103
+ const Captcha = plugins.find(
104
+ (plugin) => plugin.captchaComponent
105
+ )?.captchaComponent
106
+
100
107
  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
101
108
  e.preventDefault()
102
109
 
@@ -139,7 +146,8 @@ export function SignUp({
139
146
  name,
140
147
  email,
141
148
  password,
142
- ...additionalFieldValues
149
+ ...additionalFieldValues,
150
+ fetchOptions
143
151
  })
144
152
  }
145
153
 
@@ -323,6 +331,8 @@ export function SignUp({
323
331
  )
324
332
  )}
325
333
 
334
+ {Captcha && <div className="flex justify-center">{Captcha}</div>}
335
+
326
336
  <div className="flex flex-col gap-3">
327
337
  <Button type="submit" className="w-full" isPending={isPending}>
328
338
  {signUpEmailPending && <Spinner color="current" size="sm" />}
package/src/components/auth/username/sign-in-username.tsx CHANGED
@@ -3,6 +3,7 @@ import {
3
3
  type UsernameAuthClient,
4
4
  useAuth,
5
5
  useAuthPlugin,
6
+ useFetchOptions,
6
7
  useSendVerificationEmail,
7
8
  useSignInEmail,
8
9
  useSignInUsername
@@ -61,6 +62,8 @@ export function SignInUsername({
61
62
  navigate
62
63
  } = useAuth()
63
64
 
65
+ const { fetchOptions, resetFetchOptions } = useFetchOptions()
66
+
64
67
  const { localization: usernameLocalization } = useAuthPlugin(usernamePlugin)
65
68
 
66
69
  const [password, setPassword] = useState("")
@@ -76,33 +79,37 @@ export function SignInUsername({
76
79
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
77
80
  }
78
81
 
79
- const { mutate: signInEmail } = useSignInEmail(authClient, {
80
- onError: (error, { email }) => {
81
- setPassword("")
82
-
83
- if (error.error?.code === "EMAIL_NOT_VERIFIED") {
84
- toast.danger(error.error?.message || error.message, {
85
- actionProps: {
86
- children: localization.auth.resend,
87
- onClick: () =>
88
- sendVerificationEmail({
89
- email,
90
- callbackURL: `${baseURL}${redirectTo}`
91
- })
92
- }
93
- })
94
- } else {
95
- toast.danger(error.error?.message || error.message)
96
- }
97
- },
98
- onSuccess: () => navigate({ to: redirectTo })
99
- })
82
+ const { mutate: signInEmail, isPending: isSignInEmailPending } =
83
+ useSignInEmail(authClient, {
84
+ onError: (error, { email }) => {
85
+ setPassword("")
86
+
87
+ if (error.error?.code === "EMAIL_NOT_VERIFIED") {
88
+ toast.danger(error.error?.message || error.message, {
89
+ actionProps: {
90
+ children: localization.auth.resend,
91
+ onClick: () =>
92
+ sendVerificationEmail({
93
+ email,
94
+ callbackURL: `${baseURL}${redirectTo}`
95
+ })
96
+ }
97
+ })
98
+ } else {
99
+ toast.danger(error.error?.message || error.message)
100
+ }
101
+
102
+ resetFetchOptions()
103
+ },
104
+ onSuccess: () => navigate({ to: redirectTo })
105
+ })
100
106
 
101
- const { mutate: signInUsername, isPending: isSignInPending } =
107
+ const { mutate: signInUsername, isPending: isSignInUsernamePending } =
102
108
  useSignInUsername(authClient as UsernameAuthClient, {
103
109
  onError: (error) => {
104
110
  setPassword("")
105
111
  toast.danger(error.error?.message || error.message)
112
+ resetFetchOptions()
106
113
  },
107
114
  onSuccess: () => navigate({ to: redirectTo })
108
115
  })
@@ -118,13 +125,15 @@ export function SignInUsername({
118
125
  signInEmail({
119
126
  email,
120
127
  password,
121
- ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
128
+ ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
129
+ fetchOptions
122
130
  })
123
131
  } else {
124
132
  signInUsername({
125
133
  username: email,
126
134
  password,
127
- ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
135
+ ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
136
+ fetchOptions
128
137
  })
129
138
  }
130
139
  }
@@ -136,6 +145,11 @@ export function SignInUsername({
136
145
  mutationKey: authMutationKeys.signUp.all
137
146
  })
138
147
  const isPending = signInMutating + signUpMutating > 0
148
+ const isSignInPending = isSignInEmailPending || isSignInUsernamePending
149
+
150
+ const Captcha = plugins.find(
151
+ (plugin) => plugin.captchaComponent
152
+ )?.captchaComponent
139
153
 
140
154
  const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
141
155
 
@@ -220,6 +234,8 @@ export function SignInUsername({
220
234
  </Checkbox>
221
235
  )}
222
236
 
237
+ {Captcha && <div className="flex justify-center">{Captcha}</div>}
238
+
223
239
  <div className="flex flex-col gap-3">
224
240
  <Button
225
241
  type="submit"
package/src/components/auth/username/username-field.tsx CHANGED
@@ -84,7 +84,6 @@ export function UsernameField({
84
84
  minLength={minUsernameLength}
85
85
  maxLength={maxUsernameLength}
86
86
  isDisabled={isPending}
87
- isRequired={field.required}
88
87
  isReadOnly={field.readOnly}
89
88
  value={value}
90
89
  onChange={handleChange}
@@ -92,7 +91,10 @@ export function UsernameField({
92
91
  <Label>{field.label}</Label>
93
92
 
94
93
  <InputGroup variant={variant === "transparent" ? "primary" : "secondary"}>
95
- <InputGroup.Input placeholder={field.placeholder} />
94
+ <InputGroup.Input
95
+ placeholder={field.placeholder}
96
+ required={field.required}
97
+ />
96
98
 
97
99
  {isCheckingAvailability && (
98
100
  <InputGroup.Suffix