@better-auth-ui/react 1.6.0

package/src/index.ts

@@ -0,0 +1,34 @@
+"use client"
+
+export * from "./components/auth/auth-provider"
+export * from "./components/email"
+export * from "./components/icons"
+export * from "./components/settings/account/theme-preview"
+export * from "./hooks/auth/use-authenticate"
+export * from "./hooks/auth/use-request-password-reset"
+export * from "./hooks/auth/use-reset-password"
+export * from "./hooks/auth/use-send-verification-email"
+export * from "./hooks/auth/use-session"
+export * from "./hooks/auth/use-sign-in-email"
+export * from "./hooks/auth/use-sign-in-magic-link"
+export * from "./hooks/auth/use-sign-in-social"
+export * from "./hooks/auth/use-sign-out"
+export * from "./hooks/auth/use-sign-up-email"
+export * from "./hooks/auth/use-user"
+export * from "./hooks/settings/use-account-info"
+export * from "./hooks/settings/use-change-email"
+export * from "./hooks/settings/use-change-password"
+export * from "./hooks/settings/use-delete-user"
+export * from "./hooks/settings/use-link-social"
+export * from "./hooks/settings/use-list-accounts"
+export * from "./hooks/settings/use-list-device-sessions"
+export * from "./hooks/settings/use-list-sessions"
+export * from "./hooks/settings/use-revoke-multi-session"
+export * from "./hooks/settings/use-revoke-session"
+export * from "./hooks/settings/use-set-active-session"
+export * from "./hooks/settings/use-unlink-account"
+export * from "./hooks/settings/use-update-user"
+export * from "./lib/auth-client"
+export * from "./lib/auth-config"
+export * from "./lib/auth-context"
+export * from "./lib/provider-icons"

package/src/lib/auth-client.ts

@@ -0,0 +1,37 @@
+import {
+  magicLinkClient,
+  multiSessionClient,
+  usernameClient
+} from "better-auth/client/plugins"
+import { createAuthClient } from "better-auth/react"
+import type { AuthConfig } from "./auth-config"
+
+export type { PathToObject } from "better-auth/client"
+
+/**
+ * Type representing any auth client created with `createAuthClient`.
+ *
+ * Used for type flexibility when accepting auth clients that may have different
+ * plugin configurations or feature sets.
+ */
+export type AnyAuthClient = Omit<ReturnType<typeof createAuthClient>, "signUp">
+
+const authClient = createAuthClient({
+  plugins: [magicLinkClient(), multiSessionClient(), usernameClient()]
+})
+
+/**
+ * Type representing the default auth client with plugins enabled.
+ *
+ * This is the standard auth client type used throughout the React package
+ * and includes all required plugins enabled.
+ */
+
+type ResolveAuthClient<T> = "AuthClient" extends keyof T
+  ? T["AuthClient"]
+  : typeof authClient
+
+/**
+ * The resolved auth client type, either from user augmentation or the default.
+ */
+export type AuthClient = ResolveAuthClient<AuthConfig>

package/src/lib/auth-config.ts

@@ -0,0 +1,48 @@
+import type { AuthConfig as BaseAuthConfig } from "@better-auth-ui/react/core"
+import type { ComponentType, PropsWithChildren } from "react"
+import type { AnyAuthClient, AuthClient } from "./auth-client"
+
+/**
+ * Extends the base AuthConfig with React-specific requirements including
+ * an authClient instance and a Link component for navigation.
+ *
+ * Users can augment this interface to provide their own auth client type:
+ * @example
+ * ```ts
+ * declare module "@better-auth-ui/react" {
+ *   interface AuthConfig {
+ *     AuthClient: typeof authClient
+ *   }
+ * }
+ * ```
+ */
+export interface AuthConfig extends BaseAuthConfig {
+  authClient: AuthClient
+  /**
+   * React component for rendering links
+   * @remarks `LinkComponent`
+   */
+  Link: ComponentType<
+    PropsWithChildren<{ className?: string; href: string; to?: string }>
+  >
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: required for generic utility type
+type DeepPartial<T> = T extends (...args: any[]) => any
+  ? T
+  : T extends object
+    ? {
+        [P in keyof T]?: DeepPartial<T[P]>
+      }
+    : T
+
+/**
+ * Partial AuthConfig with any Better Auth client instance.
+ */
+export type AnyAuthConfig = DeepPartial<Omit<AuthConfig, "authClient">> & {
+  /**
+   * Better Auth client instance
+   * @remarks `AuthClient`
+   */
+  authClient?: AnyAuthClient
+}

package/src/lib/auth-context.ts

@@ -0,0 +1,6 @@
+"use client"
+
+import { createContext } from "react"
+import type { AuthConfig } from "./auth-config"
+
+export const AuthContext = createContext<AuthConfig | undefined>(undefined)

package/src/lib/provider-icons.ts

@@ -0,0 +1,90 @@
+import type { SocialProvider } from "better-auth/social-providers"
+import type { ComponentPropsWithRef, ComponentType } from "react"
+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: Record<
+  SocialProvider,
+  ComponentType<ComponentPropsWithRef<"svg">>
+> = {
+  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
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}