better-auth-ui 3.2.5

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

@@ -0,0 +1,184 @@
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    useSyncExternalStore
+} from "react"
+
+import { authDataCache } from "../lib/auth-data-cache"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { getLocalizedError } from "../lib/utils"
+import type { FetchError } from "../types/fetch-error"
+
+export function useAuthData<T>({
+    queryFn,
+    cacheKey,
+    staleTime = 10000 // Default 10 seconds
+}: {
+    queryFn: () => Promise<{ data: T | null; error?: FetchError | null }>
+    cacheKey?: string
+    staleTime?: number
+}) {
+    const {
+        hooks: { useSession },
+        toast,
+        localization
+    } = useContext(AuthUIContext)
+    const { data: sessionData, isPending: sessionPending } = useSession()
+
+    // Generate a stable cache key based on the queryFn if not provided
+    const queryFnRef = useRef(queryFn)
+    queryFnRef.current = queryFn
+
+    const stableCacheKey = cacheKey || queryFn.toString()
+
+    // Subscribe to cache updates for this key
+    const cacheEntry = useSyncExternalStore(
+        useCallback(
+            (callback) => authDataCache.subscribe(stableCacheKey, callback),
+            [stableCacheKey]
+        ),
+        useCallback(
+            () => authDataCache.get<T>(stableCacheKey),
+            [stableCacheKey]
+        ),
+        useCallback(
+            () => authDataCache.get<T>(stableCacheKey),
+            [stableCacheKey]
+        )
+    )
+
+    const initialized = useRef(false)
+    const previousUserId = useRef<string | undefined>(undefined)
+    const [error, setError] = useState<FetchError | null>(null)
+
+    const refetch = useCallback(async () => {
+        // Check if there's already an in-flight request for this key
+        const existingRequest = authDataCache.getInFlightRequest<{
+            data: T | null
+            error?: FetchError | null
+        }>(stableCacheKey)
+        if (existingRequest) {
+            // Wait for the existing request to complete
+            try {
+                const result = await existingRequest
+                if (result.error) {
+                    setError(result.error)
+                } else {
+                    setError(null)
+                }
+            } catch (err) {
+                setError(err as FetchError)
+            }
+            return
+        }
+
+        // Mark as refetching if we have cached data
+        if (cacheEntry?.data !== undefined) {
+            authDataCache.setRefetching(stableCacheKey, true)
+        }
+
+        // Create the fetch promise
+        const fetchPromise = queryFnRef.current()
+
+        // Store the promise as in-flight
+        authDataCache.setInFlightRequest(stableCacheKey, fetchPromise)
+
+        try {
+            const { data, error } = await fetchPromise
+
+            if (error) {
+                setError(error)
+                toast({
+                    variant: "error",
+                    message: getLocalizedError({ error, localization })
+                })
+            } else {
+                setError(null)
+            }
+
+            // Update cache with new data
+            authDataCache.set(stableCacheKey, data)
+        } catch (err) {
+            const error = err as FetchError
+            setError(error)
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        } finally {
+            authDataCache.setRefetching(stableCacheKey, false)
+            authDataCache.removeInFlightRequest(stableCacheKey)
+        }
+    }, [stableCacheKey, toast, localization, cacheEntry])
+
+    useEffect(() => {
+        const currentUserId = sessionData?.user?.id
+
+        if (!sessionData) {
+            // Clear cache when session is lost
+            authDataCache.setRefetching(stableCacheKey, false)
+            authDataCache.clear(stableCacheKey)
+            initialized.current = false
+            previousUserId.current = undefined
+            return
+        }
+
+        // Check if user ID has changed
+        const userIdChanged =
+            previousUserId.current !== undefined &&
+            previousUserId.current !== currentUserId
+
+        // If user changed, clear cache to ensure isPending becomes true
+        if (userIdChanged) {
+            authDataCache.clear(stableCacheKey)
+        }
+
+        // If we have cached data, we're not pending anymore
+        const hasCachedData = cacheEntry?.data !== undefined
+
+        // Check if data is stale
+        const isStale =
+            !cacheEntry || Date.now() - cacheEntry.timestamp > staleTime
+
+        if (
+            !initialized.current ||
+            !hasCachedData ||
+            userIdChanged ||
+            (hasCachedData && isStale)
+        ) {
+            // Only fetch if we don't have data or if the data is stale
+            if (!hasCachedData || isStale) {
+                initialized.current = true
+                refetch()
+            }
+        }
+
+        // Update the previous user ID
+        previousUserId.current = currentUserId
+    }, [
+        sessionData,
+        sessionData?.user?.id,
+        stableCacheKey,
+        refetch,
+        cacheEntry,
+        staleTime
+    ])
+
+    // Determine if we're in a pending state
+    // We're only pending if:
+    // 1. Session is still loading, OR
+    // 2. We have no cached data and no error
+    const isPending =
+        sessionPending || (cacheEntry?.data === undefined && !error)
+
+    return {
+        data: cacheEntry?.data ?? null,
+        isPending,
+        isRefetching: cacheEntry?.isRefetching ?? false,
+        error,
+        refetch
+    }
+}

package/src/hooks/use-authenticate.ts

@@ -0,0 +1,62 @@
+import { useContext, useEffect } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import type { AuthViewPath } from "../server"
+import type { AnyAuthClient } from "../types/any-auth-client"
+
+interface AuthenticateOptions<TAuthClient extends AnyAuthClient> {
+    authClient?: TAuthClient
+    authView?: AuthViewPath
+    enabled?: boolean
+}
+
+export function useAuthenticate<TAuthClient extends AnyAuthClient>(
+    options?: AuthenticateOptions<TAuthClient>
+) {
+    type Session = TAuthClient["$Infer"]["Session"]["session"]
+    type User = TAuthClient["$Infer"]["Session"]["user"]
+
+    const { authView = "SIGN_IN", enabled = true } = options ?? {}
+
+    const {
+        hooks: { useSession },
+        basePath,
+        viewPaths,
+        replace
+    } = useContext(AuthUIContext)
+
+    const { data, isPending, error, refetch } = useSession()
+    const sessionData = data as
+        | {
+              session: Session
+              user: User
+          }
+        | null
+        | undefined
+
+    useEffect(() => {
+        if (!enabled || isPending || sessionData) return
+
+        const currentUrl = new URL(window.location.href)
+        const redirectTo =
+            currentUrl.searchParams.get("redirectTo") ||
+            window.location.href.replace(window.location.origin, "")
+
+        replace(`${basePath}/${viewPaths[authView]}?redirectTo=${redirectTo}`)
+    }, [
+        isPending,
+        sessionData,
+        basePath,
+        viewPaths,
+        replace,
+        authView,
+        enabled
+    ])
+
+    return {
+        data: sessionData,
+        user: sessionData?.user,
+        isPending,
+        error,
+        refetch
+    }
+}

package/src/hooks/use-captcha.tsx

@@ -0,0 +1,138 @@
+import type HCaptcha from "@hcaptcha/react-hcaptcha"
+import type { TurnstileInstance } from "@marsidev/react-turnstile"
+import { useGoogleReCaptcha } from "@wojtekmaj/react-recaptcha-v3"
+import { type RefObject, useContext, useRef } from "react"
+import type ReCAPTCHA from "react-google-recaptcha"
+
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import type { AuthLocalization } from "../localization/auth-localization"
+
+// Default captcha endpoints
+const DEFAULT_CAPTCHA_ENDPOINTS = [
+    "/sign-up/email",
+    "/sign-in/email",
+    "/forget-password"
+]
+
+// Sanitize action name for reCAPTCHA
+// Google reCAPTCHA only allows A-Za-z/_ in action names
+const sanitizeActionName = (action: string): string => {
+    // First remove leading slash if present
+    let result = action.startsWith("/") ? action.substring(1) : action
+
+    // Convert both kebab-case and path separators to camelCase
+    // Example: "/sign-in/email" becomes "signInEmail"
+    result = result
+        .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+        .replace(/\/([a-z])/g, (_, letter) => letter.toUpperCase())
+        .replace(/\//g, "")
+        .replace(/[^A-Za-z0-9_]/g, "")
+
+    return result
+}
+
+export function useCaptcha({
+    localization
+}: {
+    localization: Partial<AuthLocalization>
+}) {
+    const { captcha, localization: contextLocalization } =
+        useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    const captchaRef = useRef<any>(null)
+    const { executeRecaptcha } = useGoogleReCaptcha()
+
+    const executeCaptcha = async (action: string) => {
+        if (!captcha) throw new Error(localization.MISSING_RESPONSE)
+
+        // Sanitize the action name for reCAPTCHA
+        let response: string | undefined | null
+
+        switch (captcha.provider) {
+            case "google-recaptcha-v3": {
+                const sanitizedAction = sanitizeActionName(action)
+                response = await executeRecaptcha?.(sanitizedAction)
+                break
+            }
+            case "google-recaptcha-v2-checkbox": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                response = recaptchaRef.current.getValue()
+                break
+            }
+            case "google-recaptcha-v2-invisible": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                response = await recaptchaRef.current.executeAsync()
+                break
+            }
+            case "cloudflare-turnstile": {
+                const turnstileRef = captchaRef as RefObject<TurnstileInstance>
+                response = turnstileRef.current.getResponse()
+                break
+            }
+            case "hcaptcha": {
+                const hcaptchaRef = captchaRef as RefObject<HCaptcha>
+                response = hcaptchaRef.current.getResponse()
+                break
+            }
+        }
+
+        if (!response) {
+            throw new Error(localization.MISSING_RESPONSE)
+        }
+
+        return response
+    }
+
+    const getCaptchaHeaders = async (action: string) => {
+        if (!captcha) return undefined
+
+        // Use custom endpoints if provided, otherwise use defaults
+        const endpoints = captcha.endpoints || DEFAULT_CAPTCHA_ENDPOINTS
+
+        // Only execute captcha if the action is in the endpoints list
+        if (endpoints.includes(action)) {
+            return { "x-captcha-response": await executeCaptcha(action) }
+        }
+
+        return undefined
+    }
+
+    const resetCaptcha = () => {
+        if (!captcha) return
+
+        switch (captcha.provider) {
+            case "google-recaptcha-v3": {
+                // No widget to reset; token is generated per execute call
+                break
+            }
+            case "google-recaptcha-v2-checkbox":
+            case "google-recaptcha-v2-invisible": {
+                const recaptchaRef = captchaRef as RefObject<ReCAPTCHA>
+                recaptchaRef.current?.reset?.()
+                break
+            }
+            case "cloudflare-turnstile": {
+                const turnstileRef = captchaRef as RefObject<TurnstileInstance>
+                // Some versions expose reset on the instance
+                // biome-ignore lint/suspicious/noExplicitAny: defensive
+                ;(turnstileRef.current as any)?.reset?.()
+                break
+            }
+            case "hcaptcha": {
+                const hcaptchaRef = captchaRef as RefObject<HCaptcha>
+                // HCaptcha uses resetCaptcha()
+                hcaptchaRef.current?.resetCaptcha?.()
+                break
+            }
+        }
+    }
+
+    return {
+        captchaRef,
+        getCaptchaHeaders,
+        resetCaptcha
+    }
+}

package/src/hooks/use-current-organization.ts

@@ -0,0 +1,59 @@
+import type { Organization } from "better-auth/plugins/organization"
+import { useContext, useMemo } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+
+export function useCurrentOrganization({
+    slug: slugProp
+}: {
+    slug?: string
+} = {}) {
+    const {
+        organization: organizationOptions,
+        hooks: { useActiveOrganization, useListOrganizations }
+    } = useContext(AuthUIContext)
+
+    const { pathMode, slug: contextSlug } = organizationOptions || {}
+
+    let data: Organization | null | undefined
+    let isPending: boolean | undefined
+    let isRefetching: boolean | undefined
+
+    let refetch: (() => void) | undefined
+
+    const {
+        data: organizations,
+        isPending: organizationsPending,
+        isRefetching: organizationsRefetching
+    } = useListOrganizations()
+
+    if (pathMode === "slug") {
+        const slug = slugProp || contextSlug
+
+        data = organizations?.find((organization) => organization.slug === slug)
+        isPending = organizationsPending
+        isRefetching = organizationsRefetching
+    } else {
+        const {
+            data: activeOrganization,
+            isPending: organizationPending,
+            isRefetching: organizationRefetching,
+            refetch: refetchOrganization
+        } = useActiveOrganization()
+
+        refetch = refetchOrganization
+
+        data = activeOrganization
+        isPending = organizationPending
+        isRefetching = organizationRefetching
+    }
+
+    return useMemo(
+        () => ({
+            data,
+            isPending,
+            isRefetching,
+            refetch
+        }),
+        [data, isPending, isRefetching, refetch]
+    )
+}

package/src/hooks/use-hydrated.ts

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from "react"
+
+function subscribe() {
+    return () => {}
+}
+
+export function useIsHydrated() {
+    return useSyncExternalStore(
+        subscribe,
+        () => true,
+        () => false
+    )
+}

package/src/hooks/use-lang.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react"
+
+export function useLang() {
+    const [lang, setLang] = useState<string>()
+
+    useEffect(() => {
+        const checkLang = () => {
+            const currentLang = document.documentElement.getAttribute("lang")
+            setLang(currentLang ?? undefined)
+        }
+
+        // Initial check
+        checkLang()
+
+        // Listen for changes to lang attribute on html tag
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.attributeName === "lang") {
+                    checkLang()
+                }
+            }
+        })
+
+        observer.observe(document.documentElement, { attributes: true })
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    return { lang }
+}

package/src/hooks/use-success-transition.ts

@@ -0,0 +1,51 @@
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useState,
+    useTransition
+} from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { getSearchParam } from "../lib/utils"
+
+export function useOnSuccessTransition({
+    redirectTo: redirectToProp
+}: {
+    redirectTo?: string
+}) {
+    const { redirectTo: contextRedirectTo } = useContext(AuthUIContext)
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const [isPending, startTransition] = useTransition()
+    const [success, setSuccess] = useState(false)
+
+    const {
+        navigate,
+        hooks: { useSession },
+        onSessionChange
+    } = useContext(AuthUIContext)
+
+    const { refetch: refetchSession } = useSession()
+
+    useEffect(() => {
+        if (!success || isPending) return
+
+        startTransition(() => {
+            navigate(getRedirectTo())
+        })
+    }, [success, isPending, navigate, getRedirectTo])
+
+    const onSuccess = useCallback(async () => {
+        await refetchSession?.()
+        setSuccess(true)
+
+        if (onSessionChange) startTransition(onSessionChange)
+    }, [refetchSession, onSessionChange])
+
+    return { onSuccess, isPending }
+}

package/src/hooks/use-theme.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react"
+
+export function useTheme() {
+    const [theme, setTheme] = useState<"light" | "dark">("light")
+
+    useEffect(() => {
+        const checkTheme = () => {
+            const isDark =
+                document.documentElement.classList.contains("dark") ||
+                document.documentElement
+                    .getAttribute("style")
+                    ?.includes("color-scheme: dark")
+            setTheme(isDark ? "dark" : "light")
+        }
+
+        // Initial check
+        checkTheme()
+
+        // Listen for changes to html tag
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (
+                    mutation.attributeName === "style" ||
+                    mutation.attributeName === "class"
+                ) {
+                    checkTheme()
+                }
+            }
+        })
+
+        observer.observe(document.documentElement, { attributes: true })
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    return { theme }
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+export * from "./components/account/account-view"
+export * from "./components/auth/auth-callback"
+export * from "./components/auth/auth-form"
+export * from "./components/auth/auth-view"
+export * from "./components/auth/forms/forgot-password-form"
+export * from "./components/auth/forms/magic-link-form"
+export * from "./components/auth/forms/recover-account-form"
+export * from "./components/auth/forms/reset-password-form"
+export * from "./components/auth/forms/sign-in-form"
+export * from "./components/auth/forms/sign-up-form"
+export * from "./components/auth/forms/two-factor-form"
+export * from "./components/auth/sign-out"
+export * from "./components/auth-loading"
+export * from "./components/organization/accept-invitation-card"
+export * from "./components/organization/create-organization-dialog"
+export * from "./components/organization/delete-organization-card"
+export * from "./components/organization/organization-cell-view"
+export * from "./components/organization/organization-invitations-card"
+export * from "./components/organization/organization-logo"
+export * from "./components/organization/organization-logo-card"
+export * from "./components/organization/organization-members-card"
+export * from "./components/organization/organization-name-card"
+export * from "./components/organization/organization-settings-cards"
+export * from "./components/organization/organization-slug-card"
+export * from "./components/organization/organization-switcher"
+export * from "./components/organization/organization-view"
+export * from "./components/organization/organizations-card"
+export * from "./components/organization/user-invitations-card"
+export * from "./components/password-input"
+export * from "./components/provider-icons"
+export * from "./components/redirect-to-sign-in"
+export * from "./components/redirect-to-sign-up"
+export * from "./components/settings/account/accounts-card"
+export * from "./components/settings/account/delete-account-card"
+export * from "./components/settings/account/update-avatar-card"
+export * from "./components/settings/account/update-field-card"
+export * from "./components/settings/account/update-name-card"
+export * from "./components/settings/account/update-username-card"
+export * from "./components/settings/account-settings-cards"
+export * from "./components/settings/api-key/api-keys-card"
+export * from "./components/settings/passkey/passkeys-card"
+export * from "./components/settings/providers/providers-card"
+export * from "./components/settings/security/change-email-card"
+export * from "./components/settings/security/change-password-card"
+export * from "./components/settings/security/sessions-card"
+export * from "./components/settings/security-settings-cards"
+export * from "./components/settings/shared/settings-card"
+export * from "./components/settings/skeletons/input-field-skeleton"
+export * from "./components/settings/skeletons/settings-cell-skeleton"
+export * from "./components/settings/two-factor/two-factor-card"
+export * from "./components/signed-in"
+export * from "./components/signed-out"
+export * from "./components/user-avatar"
+export * from "./components/user-button"
+export * from "./components/user-view"
+export * from "./hooks/use-auth-data"
+export * from "./hooks/use-authenticate"
+export * from "./hooks/use-current-organization"
+export * from "./lib/auth-ui-provider"
+export * from "./lib/social-providers"
+export { getViewByPath } from "./lib/utils"
+export * from "./lib/view-paths"
+export * from "./localization/auth-localization"
+export * from "./types/auth-hooks"
+export * from "./types/auth-mutators"

package/src/instantdb.ts

@@ -0,0 +1 @@
+export * from "./lib/instantdb/use-instant-options"