@better-auth-ui/react 1.6.3 → 1.6.5

package/dist/components/auth/auth-provider.d.ts

@@ -1,16 +1,27 @@
+import { AuthConfig, DeepPartial } from '@better-auth-ui/core';
 import { QueryClient } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
-import { AnyAuthClient } from '../../lib/auth-client';
-import { AnyAuthConfig, AuthConfig } from '../../lib/auth-config';
-export type AuthProviderProps = PropsWithChildren<AnyAuthConfig> & {
-    authClient: AnyAuthClient;
+import { PropsWithChildren, ReactNode } from 'react';
+import { AuthClient } from '../../lib/auth-client';
+declare module "@better-auth-ui/core" {
+    interface AuthConfig {
+        /**
+         * The auth client to use for the authentication context.
+         * @remarks `AuthClient`
+         */
+        authClient: AuthClient;
+    }
+    /** Widen `AdditionalField.label` to `ReactNode` in the React package. */
+    interface AdditionalFieldRegister {
+        label: ReactNode;
+    }
+}
+export type AuthProviderProps<TAuthClient = AuthClient> = PropsWithChildren<DeepPartial<AuthConfig>> & {
+    authClient: TAuthClient;
     navigate: (options: {
         to: string;
         replace?: boolean;
     }) => void;
-    /**
-     * TanStack QueryClient to use for your application's queries
-     */
+    /** TanStack QueryClient to use for your application's queries */
     queryClient?: QueryClient;
 };
 /**
@@ -27,6 +38,10 @@ export declare function AuthProvider({ children, queryClient, ...config }: AuthP
 /**
  * Accesses the current authentication configuration from AuthContext.
  *
+ * UI packages widen the plugin type globally via the `Register` interface
+ * (see module augmentation in `@better-auth-ui/heroui`), so callers don't
+ * need to pass a generic.
+ *
  * @returns The merged authentication configuration provided by AuthProvider.
  * @throws If no AuthProvider is present in the component tree.
  */

package/dist/components/auth/auth-provider.js

@@ -1,28 +1,44 @@
 "use client";
-import { AuthContext as e } from "../../lib/auth-context.js";
+import { FetchOptionsProvider as e } from "./fetch-options-provider.js";
 import { deepmerge as t, defaultAuthConfig as n } from "@better-auth-ui/core";
 import { QueryClient as r, QueryClientContext as i, QueryClientProvider as a } from "@tanstack/react-query";
-import { useContext as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { createContext as o, useContext as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/components/auth/auth-provider.tsx
-var c = new r(), l = {
-	...n,
-	Link: (e) => /* @__PURE__ */ s("a", { ...e })
-};
-function u({ children: n, queryClient: r, ...u }) {
-	let d = o(i), f = r || d || c, p = t(l, u);
-	return p.redirectTo = typeof window < "u" && new URLSearchParams(window.location.search).get("redirectTo")?.trim() || p.redirectTo, /* @__PURE__ */ s(e.Provider, {
-		value: p,
-		children: /* @__PURE__ */ s(a, {
-			client: f,
-			children: n
+var l = o(void 0), u = new r({ defaultOptions: { queries: { staleTime: 5e3 } } });
+function d({ children: r, queryClient: o, ...d }) {
+	let f = t(n, {
+		...d,
+		viewPaths: {
+			auth: {
+				...n.viewPaths.auth,
+				...d.viewPaths?.auth
+			},
+			settings: {
+				...n.viewPaths.settings,
+				...d.viewPaths?.settings
+			}
+		}
+	});
+	f.redirectTo = typeof window < "u" && new URLSearchParams(window.location.search).get("redirectTo")?.trim() || f.redirectTo;
+	let p = /* @__PURE__ */ new Map();
+	for (let e of f.plugins ?? []) for (let t of e.additionalFields ?? []) p.set(t.name, t);
+	for (let e of f.additionalFields ?? []) p.set(e.name, e);
+	return f.additionalFields = Array.from(p.values()), s(i) ? /* @__PURE__ */ c(l.Provider, {
+		value: f,
+		children: /* @__PURE__ */ c(e, { children: r })
+	}) : /* @__PURE__ */ c(a, {
+		client: o || u,
+		children: /* @__PURE__ */ c(l.Provider, {
+			value: f,
+			children: /* @__PURE__ */ c(e, { children: r })
 		})
 	});
 }
-function d() {
-	let t = o(e);
-	if (!t) throw Error("[Better Auth UI] AuthProvider is required");
-	return t;
+function f() {
+	let e = s(l);
+	if (!e) throw Error("[Better Auth UI] AuthProvider is required");
+	return e;
 }
 //#endregion
-export { u as AuthProvider, d as useAuth };
+export { d as AuthProvider, f as useAuth };

package/dist/components/{email → auth/email}/email-changed.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/email-changed.tsx
+//#region src/components/auth/email/email-changed.tsx
 var y = {
 	YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
 	LOGO: "Logo",

package/dist/components/{email → auth/email}/email-localization.js

@@ -5,7 +5,7 @@ import r from "./new-device.js";
 import i from "./otp-email.js";
 import a from "./password-changed.js";
 import o from "./reset-password.js";
-//#region src/components/email/email-localization.tsx
+//#region src/components/auth/email/email-localization.tsx
 var s = {
 	...e.localization,
 	...t.localization,

package/dist/components/{email → auth/email}/email-styles.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-//#region src/components/email/email-styles.tsx
+//#region src/components/auth/email/email-styles.tsx
 var t = {
 	light: {
 		background: "#F5F5F5",

package/dist/components/{email → auth/email}/email-verification.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/email-verification.tsx
+//#region src/components/auth/email/email-verification.tsx
 var y = {
 	VERIFY_YOUR_EMAIL_ADDRESS: "Verify your email address",
 	LOGO: "Logo",

package/dist/components/{email → auth/email}/magic-link.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/magic-link.tsx
+//#region src/components/auth/email/magic-link.tsx
 var y = {
 	SIGN_IN_TO_APP_NAME: "Sign in to {appName}",
 	SIGN_IN_TO_YOUR_ACCOUNT: "Sign in to your account",

package/dist/components/{email → auth/email}/new-device.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/new-device.tsx
+//#region src/components/auth/email/new-device.tsx
 var y = {
 	NEW_SIGN_IN_DETECTED: "New sign-in detected",
 	LOGO: "Logo",

package/dist/components/{email → auth/email}/otp-email.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Container as o, Head as s, Heading as c, Hr as l, Html as u, Img as d, Link as f, Preview as p, Section as m, Tailwind as h, Text as g, pixelBasedPreset as _ } from "@react-email/components";
-//#region src/components/email/otp-email.tsx
+//#region src/components/auth/email/otp-email.tsx
 var v = {
 	YOUR_VERIFICATION_CODE_IS_CODE: "Your verification code is {verificationCode}",
 	LOGO: "Logo",

package/dist/components/{email → auth/email}/password-changed.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/password-changed.tsx
+//#region src/components/auth/email/password-changed.tsx
 var y = {
 	YOUR_PASSWORD_HAS_BEEN_CHANGED: "Your password has been changed",
 	LOGO: "Logo",

package/dist/components/{email → auth/email}/reset-password.js

@@ -1,8 +1,8 @@
-import { cn as e } from "../../lib/utils.js";
+import { cn as e } from "../../../lib/utils.js";
 import t from "./email-styles.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Body as a, Button as o, Container as s, Head as c, Heading as l, Hr as u, Html as d, Img as f, Link as p, Preview as m, Section as h, Tailwind as g, Text as _, pixelBasedPreset as v } from "@react-email/components";
-//#region src/components/email/reset-password.tsx
+//#region src/components/auth/email/reset-password.tsx
 var y = {
 	RESET_YOUR_PASSWORD: "Reset your password",
 	LOGO: "Logo",

package/dist/components/auth/fetch-options-provider.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+/** Subset of BetterFetchOptions we expose. Add fields as use-cases arise. */
+export type FetchOptions = {
+    headers?: Record<string, string>;
+    body?: Record<string, unknown>;
+};
+type FetchOptionsContextValue = {
+    /** Current fetchOptions, or `undefined` when none are set. */
+    fetchOptions: FetchOptions | undefined;
+    /** OVERRIDES the entire fetchOptions object. Pass `undefined` to clear. */
+    setFetchOptions: (fetchOptions: FetchOptions | undefined) => void;
+    /** Clears `fetchOptions` and runs the registered reset (e.g. captcha widget). Call from form `onError`. */
+    resetFetchOptions: () => void;
+    /** Register a reset handler. Used by `captchaPlugin`. Pass `null` to clear. */
+    registerReset: (reset: (() => void) | null) => void;
+};
+export declare function FetchOptionsProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function useFetchOptions(): FetchOptionsContextValue;
+export {};

package/dist/components/auth/fetch-options-provider.js

@@ -0,0 +1,30 @@
+"use client";
+import { createContext as e, useCallback as t, useContext as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/auth/fetch-options-provider.tsx
+var o = e(void 0);
+function s({ children: e }) {
+	let [n, s] = i(void 0), c = r(null), l = t((e) => {
+		s(e);
+	}, []), u = t((e) => {
+		c.current = e;
+	}, []), d = t(() => {
+		s(void 0), c.current?.();
+	}, []);
+	return /* @__PURE__ */ a(o.Provider, {
+		value: {
+			fetchOptions: n,
+			setFetchOptions: l,
+			resetFetchOptions: d,
+			registerReset: u
+		},
+		children: e
+	});
+}
+function c() {
+	let e = n(o);
+	if (!e) throw Error("[Better Auth UI] useFetchOptions must be used within FetchOptionsProvider");
+	return e;
+}
+//#endregion
+export { s as FetchOptionsProvider, c as useFetchOptions };

package/dist/email.d.ts

@@ -0,0 +1 @@
+export * from './components/auth/email';

package/dist/email.js

@@ -0,0 +1,11 @@
+import e, { defaultColors as t } from "./components/auth/email/email-styles.js";
+import n from "./components/auth/email/email-changed.js";
+import r from "./components/auth/email/email-verification.js";
+import i from "./components/auth/email/magic-link.js";
+import a from "./components/auth/email/new-device.js";
+import o from "./components/auth/email/otp-email.js";
+import s from "./components/auth/email/password-changed.js";
+import c from "./components/auth/email/reset-password.js";
+import { emailLocalization as l } from "./components/auth/email/email-localization.js";
+import "./components/auth/email/index.js";
+export { n as EmailChangedEmail, e as EmailStyles, r as EmailVerificationEmail, i as MagicLinkEmail, a as NewDeviceEmail, o as OtpEmail, s as PasswordChangedEmail, c as ResetPasswordEmail, t as defaultColors, l as emailLocalization };

package/dist/hooks/auth/use-authenticate.d.ts

@@ -1,33 +1,10 @@
-import { UseSessionOptions } from './use-session';
+import { AuthClient } from '../../lib/auth-client';
+import { UseSessionOptions } from '../../queries/auth/session-query';
 /**
  * Calls `useSession` and redirects unauthenticated users to the sign-in page,
  * preserving the current URL as a `redirectTo` query param.
  *
- * @param options - Better Auth params (`query`, `fetchOptions`) and React
- *   Query options forwarded to `useQuery`.
- * @returns React Query result for the session.
+ * @param authClient - The Better Auth client.
+ * @param options - `getSession` params & `useQuery` options.
  */
-export declare function useAuthenticate(options?: UseSessionOptions): import('@tanstack/react-query').UseQueryResult<{
-    user: import('better-auth').StripEmptyObjects<{
-        id: string;
-        createdAt: Date;
-        updatedAt: Date;
-        email: string;
-        emailVerified: boolean;
-        name: string;
-        image?: string | null | undefined;
-    } & {} & {
-        username?: string | null | undefined;
-        displayUsername?: string | null | undefined;
-    }>;
-    session: import('better-auth').StripEmptyObjects<{
-        id: string;
-        createdAt: Date;
-        updatedAt: Date;
-        userId: string;
-        expiresAt: Date;
-        token: string;
-        ipAddress?: string | null | undefined;
-        userAgent?: string | null | undefined;
-    }>;
-} | null, import('better-auth/client').BetterFetchError>;
+export declare function useAuthenticate<TAuthClient extends AuthClient>(authClient: TAuthClient, options?: UseSessionOptions<TAuthClient>): import('@tanstack/react-query').UseQueryResult<import('@tanstack/react-query').NoInfer<import('../..').InferData<TAuthClient["getSession"]>>, import('better-auth/client').BetterFetchError>;

package/dist/hooks/auth/use-authenticate.js

@@ -1,23 +1,23 @@
 import { useAuth as e } from "../../components/auth/auth-provider.js";
-import { useSession as t } from "./use-session.js";
+import { useSession as t } from "../../queries/auth/session-query.js";
 import { useEffect as n } from "react";
 //#region src/hooks/auth/use-authenticate.ts
-function r(r) {
-	let { basePaths: i, viewPaths: a, navigate: o } = e(), s = t(r);
+function r(r, i) {
+	let { basePaths: a, viewPaths: o, navigate: s } = e(), c = t(r, i);
 	return n(() => {
-		if (s.data || s.isPending) return;
+		if (c.data || c.isPending) return;
 		let e = window.location.pathname + window.location.search, t = encodeURIComponent(e);
-		o({
-			to: `${i.auth}/${a.auth.signIn}?redirectTo=${t}`,
+		s({
+			to: `${a.auth}/${o.auth.signIn}?redirectTo=${t}`,
 			replace: !0
 		});
 	}, [
-		i.auth,
-		s.data,
-		s.isPending,
-		a.auth.signIn,
-		o
-	]), s;
+		a.auth,
+		c.data,
+		c.isPending,
+		o.auth.signIn,
+		s
+	]), c;
 }
 //#endregion
 export { r as useAuthenticate };