@better-auth-ui/react 1.6.0 → 1.6.2

package/dist/lib/auth-client.js

@@ -1,5 +1,11 @@
-import { magicLinkClient, multiSessionClient, usernameClient } from "better-auth/client/plugins";
-import { createAuthClient } from "better-auth/react";
-const authClient = createAuthClient({
-    plugins: [magicLinkClient(), multiSessionClient(), usernameClient()]
-});
+import { passkeyClient as e } from "@better-auth/passkey/client";
+import { magicLinkClient as t, multiSessionClient as n, usernameClient as r } from "better-auth/client/plugins";
+import { createAuthClient as i } from "better-auth/react";
+//#region src/lib/auth-client.ts
+i({ plugins: [
+	t(),
+	n(),
+	e(),
+	r()
+] });
+//#endregion

package/dist/lib/auth-config.d.ts

@@ -1,6 +1,6 @@
-import type { AuthConfig as BaseAuthConfig } from "@better-auth-ui/react/core";
-import type { ComponentType, PropsWithChildren } from "react";
-import type { AnyAuthClient, AuthClient } from "./auth-client";
+import { AuthConfig as BaseAuthConfig } from '@better-auth-ui/core';
+import { ComponentType, PropsWithChildren } from 'react';
+import { AnyAuthClient, AuthClient } from './auth-client';
 /**
  * Extends the base AuthConfig with React-specific requirements including
  * an authClient instance and a Link component for navigation.

package/dist/lib/auth-context.d.ts

@@ -1,2 +1,2 @@
-import type { AuthConfig } from "./auth-config";
-export declare const AuthContext: import("react").Context<AuthConfig | undefined>;
+import { AuthConfig } from './auth-config';
+export declare const AuthContext: import('react').Context<AuthConfig | undefined>;

package/dist/lib/auth-context.js

@@ -1,3 +1,6 @@
 "use client";
-import { createContext } from "react";
-export const AuthContext = createContext(undefined);
+import { createContext as e } from "react";
+//#region src/lib/auth-context.ts
+var t = e(void 0);
+//#endregion
+export { t as AuthContext };

package/dist/lib/provider-icons.d.ts

@@ -1,5 +1,5 @@
-import type { SocialProvider } from "better-auth/social-providers";
-import type { ComponentPropsWithRef, ComponentType } from "react";
+import { SocialProvider } from 'better-auth/social-providers';
+import { ComponentPropsWithRef, ComponentType } from 'react';
 /**
  * Mapping of social authentication provider names to their corresponding icon components.
  *

package/dist/lib/provider-icons.js

@@ -1,48 +1,76 @@
-import { Apple, Atlassian, Cognito, Discord, Dropbox, Facebook, Figma, GitHub, GitLab, Google, HuggingFace, Kakao, Kick, Line, Linear, LinkedIn, Microsoft, Naver, Notion, Paybin, PayPal, Polar, Railway, Reddit, Roblox, Salesforce, Slack, Spotify, TikTok, Twitch, Vercel, VK, WeChat, X, Zoom } from "../components/icons";
-/**
- * Mapping of social authentication provider names to their corresponding icon components.
- *
- * Provides React SVG icon components for all supported social authentication providers.
- * Each icon is a React component that accepts standard SVG props and can be customized
- * with className, size, color, etc.
- *
- * Supported providers include: Apple, Google, GitHub, Microsoft, Discord, Facebook,
- * Twitter/X, and many others.
- */
-export const providerIcons = {
-    apple: Apple,
-    atlassian: Atlassian,
-    cognito: Cognito,
-    discord: Discord,
-    dropbox: Dropbox,
-    facebook: Facebook,
-    figma: Figma,
-    github: GitHub,
-    gitlab: GitLab,
-    google: Google,
-    huggingface: HuggingFace,
-    kakao: Kakao,
-    kick: Kick,
-    line: Line,
-    linear: Linear,
-    linkedin: LinkedIn,
-    microsoft: Microsoft,
-    naver: Naver,
-    notion: Notion,
-    paybin: Paybin,
-    paypal: PayPal,
-    polar: Polar,
-    railway: Railway,
-    reddit: Reddit,
-    roblox: Roblox,
-    salesforce: Salesforce,
-    slack: Slack,
-    spotify: Spotify,
-    tiktok: TikTok,
-    twitch: Twitch,
-    twitter: X,
-    vercel: Vercel,
-    vk: VK,
-    wechat: WeChat,
-    zoom: Zoom
+import { Apple as e } from "../components/icons/apple.js";
+import { Atlassian as t } from "../components/icons/atlassian.js";
+import { Cognito as n } from "../components/icons/cognito.js";
+import { Discord as r } from "../components/icons/discord.js";
+import { Dropbox as i } from "../components/icons/dropbox.js";
+import { Facebook as a } from "../components/icons/facebook.js";
+import { Figma as o } from "../components/icons/figma.js";
+import { GitHub as s } from "../components/icons/github.js";
+import { GitLab as c } from "../components/icons/gitlab.js";
+import { Google as l } from "../components/icons/google.js";
+import { HuggingFace as u } from "../components/icons/huggingface.js";
+import { Kakao as d } from "../components/icons/kakao.js";
+import { Kick as f } from "../components/icons/kick.js";
+import { Line as p } from "../components/icons/line.js";
+import { Linear as m } from "../components/icons/linear.js";
+import { LinkedIn as h } from "../components/icons/linkedin.js";
+import { Microsoft as g } from "../components/icons/microsoft.js";
+import { Naver as _ } from "../components/icons/naver.js";
+import { Notion as v } from "../components/icons/notion.js";
+import { Paybin as y } from "../components/icons/paybin.js";
+import { PayPal as b } from "../components/icons/paypal.js";
+import { Polar as x } from "../components/icons/polar.js";
+import { Railway as S } from "../components/icons/railway.js";
+import { Reddit as C } from "../components/icons/reddit.js";
+import { Roblox as w } from "../components/icons/roblox.js";
+import { Salesforce as T } from "../components/icons/salesforce.js";
+import { Slack as E } from "../components/icons/slack.js";
+import { Spotify as D } from "../components/icons/spotify.js";
+import { TikTok as O } from "../components/icons/tiktok.js";
+import { Twitch as k } from "../components/icons/twitch.js";
+import { Vercel as A } from "../components/icons/vercel.js";
+import { VK as j } from "../components/icons/vk.js";
+import { WeChat as M } from "../components/icons/wechat.js";
+import { X as N } from "../components/icons/x.js";
+import { Zoom as P } from "../components/icons/zoom.js";
+import "../components/icons/index.js";
+//#region src/lib/provider-icons.ts
+var F = {
+	apple: e,
+	atlassian: t,
+	cognito: n,
+	discord: r,
+	dropbox: i,
+	facebook: a,
+	figma: o,
+	github: s,
+	gitlab: c,
+	google: l,
+	huggingface: u,
+	kakao: d,
+	kick: f,
+	line: p,
+	linear: m,
+	linkedin: h,
+	microsoft: g,
+	naver: _,
+	notion: v,
+	paybin: y,
+	paypal: b,
+	polar: x,
+	railway: S,
+	reddit: C,
+	roblox: w,
+	salesforce: T,
+	slack: E,
+	spotify: D,
+	tiktok: O,
+	twitch: k,
+	twitter: N,
+	vercel: A,
+	vk: j,
+	wechat: M,
+	zoom: P
 };
+//#endregion
+export { F as providerIcons };

package/dist/lib/utils.d.ts

@@ -1,2 +1,2 @@
-import { type ClassValue } from "clsx";
+import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -1,5 +1,8 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/lib/utils.ts
+function n(...n) {
+	return t(e(n));
 }
+//#endregion
+export { n as cn };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@better-auth-ui/react",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "scripts": {
-    "build": "tsc",
+    "build": "vite build",
     "dev": "tsc --watch",
     "email": "email dev --dir src/components/email -p 9000",
     "test": "vitest"
@@ -16,12 +16,12 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./core": {
-      "import": "./dist/core.js",
-      "types": "./dist/core.d.ts"
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
     }
   },
   "devDependencies": {
@@ -33,12 +33,13 @@
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.4",
-    "better-auth": "^1.6.4",
+    "@better-auth/passkey": "^1.6.5",
+    "better-auth": "^1.6.5",
     "clsx": "^2.1.1",
     "playwright": "^1.59.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-email": "^5.2.10",
+    "react-email": "^6.0.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "vitest": "^4.1.4",
@@ -50,7 +51,8 @@
   "peerDependencies": {
     "@react-email/components": ">=1.0.12",
     "@tanstack/react-query": ">=5.99.0",
-    "better-auth": ">=1.6.4",
+    "@better-auth/passkey": ">=1.6.5",
+    "better-auth": ">=1.6.5",
     "clsx": ">=2.0.0",
     "react": ">=19.2.5",
     "react-dom": ">=19.2.5",
@@ -58,6 +60,11 @@
     "tailwindcss": ">=4.2.2",
     "zod": ">=4.3.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/better-auth-ui/better-auth-ui",
+    "directory": "packages/react"
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/components/auth/auth-provider.tsx

@@ -1,12 +1,6 @@
 "use client"
 
 import { deepmerge, defaultAuthConfig } from "@better-auth-ui/core"
-import {
-  type AnyAuthClient,
-  type AnyAuthConfig,
-  type AuthConfig,
-  AuthContext
-} from "@better-auth-ui/react"
 import {
   QueryClient,
   QueryClientContext,
@@ -14,6 +8,10 @@ import {
 } from "@tanstack/react-query"
 import { type PropsWithChildren, useContext } from "react"
 
+import type { AnyAuthClient } from "../../lib/auth-client"
+import type { AnyAuthConfig, AuthConfig } from "../../lib/auth-config"
+import { AuthContext } from "../../lib/auth-context"
+
 const fallbackQueryClient = new QueryClient()
 
 const baseAuthConfig: AnyAuthConfig = {

package/src/hooks/auth/use-authenticate.ts

@@ -1,5 +1,7 @@
-import { type AuthClient, useAuth } from "@better-auth-ui/react"
 import { useEffect } from "react"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import type { UseAuthQueryOptions, UseAuthQueryResult } from "./use-auth-query"
 import { useSession } from "./use-session"
 

package/src/hooks/auth/use-is-username-available.ts

@@ -0,0 +1,22 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation to check if a username is available.
+ *
+ * @returns The `useMutation` result where data contains `{ available: boolean }`.
+ */
+export function useIsUsernameAvailable(
+  options?: UseAuthMutationOptions<AuthClient["isUsernameAvailable"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({
+    authFn: authClient.isUsernameAvailable,
+    options
+  })
+}

package/src/hooks/auth/use-request-password-reset.ts

@@ -1,11 +1,9 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
+  type UseAuthMutationOptions,
   useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
-
-export { useAuthMutation } from "./use-auth-mutation"
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for the forgot-password flow.

package/src/hooks/auth/use-reset-password.ts

@@ -1,11 +1,9 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
+  type UseAuthMutationOptions,
   useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
-
-export { useAuthMutation } from "./use-auth-mutation"
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for the reset-password flow.

package/src/hooks/auth/use-send-verification-email.ts

@@ -1,11 +1,9 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
+  type UseAuthMutationOptions,
   useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
-
-export { useAuthMutation } from "./use-auth-mutation"
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation to send a verification email.

package/src/hooks/auth/use-session.ts

@@ -1,4 +1,5 @@
-import { type AuthClient, useAuth } from "@better-auth-ui/react"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
   type UseAuthQueryOptions,
   type UseAuthQueryResult,

package/src/hooks/auth/use-sign-in-email.ts

@@ -1,12 +1,11 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation,
-  useSession
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
+import { useQueryClient } from "@tanstack/react-query"
 
-export { useAuthMutation } from "./use-auth-mutation"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for email/password sign-in.
@@ -20,14 +19,14 @@ export function useSignInEmail(
   options?: UseAuthMutationOptions<AuthClient["signIn"]["email"]>
 ) {
   const { authClient } = useAuth()
-  const { refetch } = useSession({ refetchOnMount: false })
+  const queryClient = useQueryClient()
 
   return useAuthMutation({
     authFn: authClient.signIn.email,
     options: {
       ...options,
       onSuccess: async (...args) => {
-        await refetch()
+        queryClient.resetQueries({ queryKey: ["auth", "getSession"] })
         await options?.onSuccess?.(...args)
       }
     }

package/src/hooks/auth/use-sign-in-magic-link.ts

@@ -1,11 +1,9 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
+  type UseAuthMutationOptions,
   useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
-
-export { useAuthMutation } from "./use-auth-mutation"
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for magic-link sign-in.

package/src/hooks/auth/use-sign-in-passkey.ts

@@ -0,0 +1,34 @@
+import { useQueryClient } from "@tanstack/react-query"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for passkey sign-in.
+ *
+ * The mutation sends a passkey sign-in request and
+ * refetches the session on completion.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignInPasskey(
+  options?: UseAuthMutationOptions<AuthClient["signIn"]["passkey"]>
+) {
+  const { authClient } = useAuth()
+  const queryClient = useQueryClient()
+
+  return useAuthMutation({
+    authFn: authClient.signIn.passkey,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        queryClient.resetQueries({ queryKey: ["auth", "getSession"] })
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/auth/use-sign-in-social.ts

@@ -1,11 +1,9 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
+  type UseAuthMutationOptions,
   useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
-
-export { useAuthMutation } from "./use-auth-mutation"
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for social sign-in.

package/src/hooks/auth/use-sign-in-username.ts

@@ -0,0 +1,34 @@
+import { useQueryClient } from "@tanstack/react-query"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for username/password sign-in.
+ *
+ * The mutation sends a username/password sign-in request and
+ * refetches the session on completion.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignInUsername(
+  options?: UseAuthMutationOptions<AuthClient["signIn"]["username"]>
+) {
+  const { authClient } = useAuth()
+  const queryClient = useQueryClient()
+
+  return useAuthMutation({
+    authFn: authClient.signIn.username,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        queryClient.resetQueries({ queryKey: ["auth", "getSession"] })
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/auth/use-sign-out.ts

@@ -1,12 +1,11 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation
-} from "@better-auth-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
 
-export { useAuthMutation } from "./use-auth-mutation"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for signing out.

package/src/hooks/auth/use-sign-up-email.ts

@@ -1,12 +1,11 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation,
-  useSession
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "./use-auth-mutation"
+import { useQueryClient } from "@tanstack/react-query"
 
-export { useAuthMutation } from "./use-auth-mutation"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "./use-auth-mutation"
 
 /**
  * Hook that creates a mutation for email/password sign-up.
@@ -20,14 +19,14 @@ export function useSignUpEmail(
   options?: UseAuthMutationOptions<AuthClient["signUp"]["email"]>
 ) {
   const { authClient } = useAuth()
-  const { refetch } = useSession({ refetchOnMount: false })
+  const queryClient = useQueryClient()
 
   return useAuthMutation({
     authFn: authClient.signUp.email,
     options: {
       ...options,
       onSuccess: async (...args) => {
-        await refetch()
+        queryClient.resetQueries({ queryKey: ["auth", "getSession"] })
         await options?.onSuccess?.(...args)
       }
     }

package/src/hooks/auth/use-user.ts

@@ -1,6 +1,5 @@
-import type { AuthClient } from "@better-auth-ui/react"
+import type { AuthClient } from "../../lib/auth-client"
 import type { UseAuthQueryOptions } from "./use-auth-query"
-
 import { useSession } from "./use-session"
 
 /**

package/src/hooks/settings/use-account-info.ts

@@ -1,4 +1,5 @@
-import { type AuthClient, useAuth } from "@better-auth-ui/react"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
 
 /**

package/src/hooks/settings/use-add-passkey.ts

@@ -0,0 +1,32 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import {
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "../auth/use-auth-mutation"
+import { useListUserPasskeys } from "./use-list-user-passkeys"
+
+/**
+ * Hook that creates a mutation for adding a new passkey.
+ *
+ * Refetches the passkeys list on success.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useAddPasskey(
+  options?: UseAuthMutationOptions<AuthClient["passkey"]["addPasskey"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useListUserPasskeys()
+
+  return useAuthMutation({
+    authFn: authClient.passkey.addPasskey,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/settings/use-change-email.ts

@@ -1,10 +1,10 @@
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
 import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation,
-  useSession
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+  type UseAuthMutationOptions,
+  useAuthMutation
+} from "../auth/use-auth-mutation"
+import { useSession } from "../auth/use-session"
 
 /**
  * Hook that creates a mutation for changing the current user's email address.