better-auth-ui 3.2.5

package/src/lib/auth-ui-provider.tsx

@@ -0,0 +1,658 @@
+"use client"
+
+import { createContext, type ReactNode, useMemo } from "react"
+import { toast } from "sonner"
+
+import { RecaptchaV3 } from "../components/captcha/recaptcha-v3"
+import { useAuthData } from "../hooks/use-auth-data"
+import {
+    type AuthLocalization,
+    authLocalization
+} from "../localization/auth-localization"
+import type {
+    AccountOptions,
+    AccountOptionsContext
+} from "../types/account-options"
+import type { AdditionalFields } from "../types/additional-fields"
+import type { AnyAuthClient } from "../types/any-auth-client"
+import type { AuthClient } from "../types/auth-client"
+import type { AuthHooks } from "../types/auth-hooks"
+import type { AuthMutators } from "../types/auth-mutators"
+import type { AvatarOptions } from "../types/avatar-options"
+import type { CaptchaOptions } from "../types/captcha-options"
+import type { CredentialsOptions } from "../types/credentials-options"
+import type { DeleteUserOptions } from "../types/delete-user-options"
+import type { GenericOAuthOptions } from "../types/generic-oauth-options"
+import type { GravatarOptions } from "../types/gravatar-options"
+import type { Link } from "../types/link"
+import type {
+    OrganizationOptions,
+    OrganizationOptionsContext
+} from "../types/organization-options"
+import type { RenderToast } from "../types/render-toast"
+import type { SignUpOptions } from "../types/sign-up-options"
+import type { SocialOptions } from "../types/social-options"
+import { OrganizationRefetcher } from "./organization-refetcher"
+import type { AuthViewPaths } from "./view-paths"
+import {
+    accountViewPaths,
+    authViewPaths,
+    organizationViewPaths
+} from "./view-paths"
+
+const DefaultLink: Link = ({ href, className, children }) => (
+    <a className={className} href={href}>
+        {children}
+    </a>
+)
+
+const defaultNavigate = (href: string) => {
+    window.location.href = href
+}
+
+const defaultReplace = (href: string) => {
+    window.location.replace(href)
+}
+
+const defaultToast: RenderToast = ({ variant = "default", message }) => {
+    if (variant === "default") {
+        toast(message)
+    } else {
+        toast[variant](message)
+    }
+}
+
+export type AuthUIContextType = {
+    authClient: AuthClient
+    /**
+     * Additional fields for users
+     */
+    additionalFields?: AdditionalFields
+    /**
+     * API Key plugin configuration
+     */
+    apiKey?:
+        | {
+              /**
+               * Prefix for API Keys
+               */
+              prefix?: string
+              /**
+               * Metadata for API Keys
+               */
+              metadata?: Record<string, unknown>
+          }
+        | boolean
+    /**
+     * Avatar configuration
+     * @default undefined
+     */
+    avatar?: AvatarOptions
+    /**
+     * Base path for the auth views
+     * @default "/auth"
+     */
+    basePath: string
+    /**
+     * Front end base URL for auth API callbacks
+     */
+    baseURL?: string
+    /**
+     * Captcha configuration
+     */
+    captcha?: CaptchaOptions
+    credentials?: CredentialsOptions
+    /**
+     * Default redirect URL after authenticating
+     * @default "/"
+     */
+    redirectTo: string
+    /**
+     * Enable or disable user change email support
+     * @default true
+     */
+    changeEmail?: boolean
+    /**
+     * User Account deletion configuration
+     * @default undefined
+     */
+    deleteUser?: DeleteUserOptions
+    /**
+     * Show Verify Email card for unverified emails
+     */
+    emailVerification?: boolean
+    /**
+     * Freshness age for Session data
+     * @default 60 * 60 * 24
+     */
+    freshAge: number
+    /**
+     * Generic OAuth provider configuration
+     */
+    genericOAuth?: GenericOAuthOptions
+    /**
+     * Gravatar configuration
+     */
+    gravatar?: boolean | GravatarOptions
+    hooks: AuthHooks
+    localization: typeof authLocalization
+    /**
+     * Enable or disable Magic Link support
+     * @default false
+     */
+    magicLink?: boolean
+    /**
+     * Enable or disable Email OTP support
+     * @default false
+     */
+    emailOTP?: boolean
+    /**
+     * Enable or disable Multi Session support
+     * @default false
+     */
+    multiSession?: boolean
+    mutators: AuthMutators
+    /**
+     * Whether the name field should be required
+     * @default true
+     */
+    nameRequired?: boolean
+    /**
+     * Enable or disable One Tap support
+     * @default false
+     */
+    oneTap?: boolean
+    /**
+     * Perform some User updates optimistically
+     * @default false
+     */
+    optimistic?: boolean
+    /**
+     * Organization configuration
+     */
+    organization?: OrganizationOptionsContext
+    /**
+     * Enable or disable Passkey support
+     * @default false
+     */
+    passkey?: boolean
+    /**
+     * Forces better-auth-tanstack to refresh the Session on the auth callback page
+     * @default false
+     */
+    persistClient?: boolean
+    /**
+     * Account configuration
+     */
+    account?: AccountOptionsContext
+    /**
+     * Sign Up configuration
+     */
+    signUp?: SignUpOptions
+    /**
+     * Social provider configuration
+     */
+    social?: SocialOptions
+    toast: RenderToast
+    /**
+     * Enable or disable two-factor authentication support
+     * @default undefined
+     */
+    twoFactor?: ("otp" | "totp")[]
+    viewPaths: AuthViewPaths
+    /**
+     * Navigate to a new URL
+     * @default window.location.href
+     */
+    navigate: (href: string) => void
+    /**
+     * Called whenever the Session changes
+     */
+    onSessionChange?: () => void | Promise<void>
+    /**
+     * Replace the current URL
+     * @default navigate
+     */
+    replace: (href: string) => void
+    /**
+     * Custom Link component for navigation
+     * @default <a>
+     */
+    Link: Link
+}
+
+export type AuthUIProviderProps = {
+    children: ReactNode
+    /**
+     * Better Auth client returned from createAuthClient
+     * @default Required
+     * @remarks `AuthClient`
+     */
+    authClient: AnyAuthClient
+    /**
+     * Enable account view & account configuration
+     * @default { fields: ["image", "name"] }
+     */
+    account?: boolean | Partial<AccountOptions>
+    /**
+     * Avatar configuration
+     * @default undefined
+     */
+    avatar?: boolean | Partial<AvatarOptions>
+    /**
+     * User Account deletion configuration
+     * @default undefined
+     */
+    deleteUser?: DeleteUserOptions | boolean
+    /**
+     * ADVANCED: Custom hooks for fetching auth data
+     */
+    hooks?: Partial<AuthHooks>
+    /**
+     * Customize the paths for the auth views
+     * @default authViewPaths
+     * @remarks `AuthViewPaths`
+     */
+    viewPaths?: Partial<AuthViewPaths>
+    /**
+     * Render custom Toasts
+     * @default Sonner
+     */
+    toast?: RenderToast
+    /**
+     * Customize the Localization strings
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+    /**
+     * ADVANCED: Custom mutators for updating auth data
+     */
+    mutators?: Partial<AuthMutators>
+    /**
+     * Organization plugin configuration
+     */
+    organization?: OrganizationOptions | boolean
+    /**
+     * Enable or disable Credentials support
+     * @default { forgotPassword: true }
+     */
+    credentials?: boolean | CredentialsOptions
+    /**
+     * Enable or disable Sign Up form
+     * @default { fields: ["name"] }
+     */
+    signUp?: SignUpOptions | boolean
+} & Partial<
+    Omit<
+        AuthUIContextType,
+        | "authClient"
+        | "viewPaths"
+        | "localization"
+        | "mutators"
+        | "toast"
+        | "hooks"
+        | "avatar"
+        | "account"
+        | "deleteUser"
+        | "credentials"
+        | "signUp"
+        | "organization"
+    >
+>
+
+export const AuthUIContext = createContext<AuthUIContextType>(
+    {} as unknown as AuthUIContextType
+)
+
+export const AuthUIProvider = ({
+    children,
+    authClient: authClientProp,
+    account: accountProp,
+    avatar: avatarProp,
+    deleteUser: deleteUserProp,
+    social: socialProp,
+    genericOAuth: genericOAuthProp,
+    basePath = "/auth",
+    baseURL = "",
+    captcha,
+    redirectTo = "/",
+    credentials: credentialsProp,
+    changeEmail = true,
+    freshAge = 60 * 60 * 24,
+    hooks: hooksProp,
+    mutators: mutatorsProp,
+    localization: localizationProp,
+    nameRequired = true,
+    organization: organizationProp,
+    signUp: signUpProp = true,
+    toast = defaultToast,
+    viewPaths: viewPathsProp,
+    navigate,
+    replace,
+    Link = DefaultLink,
+    ...props
+}: AuthUIProviderProps) => {
+    const authClient = authClientProp as AuthClient
+
+    const avatar = useMemo<AvatarOptions | undefined>(() => {
+        if (!avatarProp) return
+
+        if (avatarProp === true) {
+            return {
+                extension: "png",
+                size: 128
+            }
+        }
+
+        return {
+            upload: avatarProp.upload,
+            delete: avatarProp.delete,
+            extension: avatarProp.extension || "png",
+            size: avatarProp.size || (avatarProp.upload ? 256 : 128)
+        }
+    }, [avatarProp])
+
+    const account = useMemo<AccountOptionsContext | undefined>(() => {
+        if (accountProp === false) return
+
+        if (accountProp === true || accountProp === undefined) {
+            return {
+                basePath: "/account",
+                fields: ["image", "name"],
+                viewPaths: accountViewPaths
+            }
+        }
+
+        // Remove trailing slash from basePath
+        const basePath = accountProp.basePath?.endsWith("/")
+            ? accountProp.basePath.slice(0, -1)
+            : accountProp.basePath
+
+        return {
+            basePath: basePath ?? "/account",
+            fields: accountProp.fields || ["image", "name"],
+            viewPaths: { ...accountViewPaths, ...accountProp.viewPaths }
+        }
+    }, [accountProp])
+
+    const deleteUser = useMemo<DeleteUserOptions | undefined>(() => {
+        if (!deleteUserProp) return
+
+        if (deleteUserProp === true) {
+            return {}
+        }
+
+        return deleteUserProp
+    }, [deleteUserProp])
+
+    const social = useMemo<SocialOptions | undefined>(() => {
+        if (!socialProp) return
+
+        return socialProp
+    }, [socialProp])
+
+    const genericOAuth = useMemo<GenericOAuthOptions | undefined>(() => {
+        if (!genericOAuthProp) return
+
+        return genericOAuthProp
+    }, [genericOAuthProp])
+
+    const credentials = useMemo<CredentialsOptions | undefined>(() => {
+        if (credentialsProp === false) return
+
+        if (credentialsProp === true) {
+            return {
+                forgotPassword: true
+            }
+        }
+
+        return {
+            ...credentialsProp,
+            forgotPassword: credentialsProp?.forgotPassword ?? true
+        }
+    }, [credentialsProp])
+
+    const signUp = useMemo<SignUpOptions | undefined>(() => {
+        if (signUpProp === false) return
+
+        if (signUpProp === true || signUpProp === undefined) {
+            return {
+                fields: ["name"]
+            }
+        }
+
+        return {
+            fields: signUpProp.fields || ["name"]
+        }
+    }, [signUpProp])
+
+    const organization = useMemo<OrganizationOptionsContext | undefined>(() => {
+        if (!organizationProp) return
+
+        if (organizationProp === true) {
+            return {
+                basePath: "/organization",
+                viewPaths: organizationViewPaths,
+                customRoles: []
+            }
+        }
+
+        let logo: OrganizationOptionsContext["logo"] | undefined
+
+        if (organizationProp.logo === true) {
+            logo = {
+                extension: "png",
+                size: 128
+            }
+        } else if (organizationProp.logo) {
+            logo = {
+                upload: organizationProp.logo.upload,
+                delete: organizationProp.logo.delete,
+                extension: organizationProp.logo.extension || "png",
+                size:
+                    organizationProp.logo.size || organizationProp.logo.upload
+                        ? 256
+                        : 128
+            }
+        }
+
+        // Remove trailing slash from basePath
+        const basePath = organizationProp.basePath?.endsWith("/")
+            ? organizationProp.basePath.slice(0, -1)
+            : organizationProp.basePath
+
+        return {
+            ...organizationProp,
+            logo,
+            basePath: basePath ?? "/organization",
+            customRoles: organizationProp.customRoles || [],
+            viewPaths: {
+                ...organizationViewPaths,
+                ...organizationProp.viewPaths
+            }
+        }
+    }, [organizationProp])
+
+    const defaultMutators = useMemo(() => {
+        return {
+            deleteApiKey: (params) =>
+                authClient.apiKey.delete({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            deletePasskey: (params) =>
+                authClient.passkey.deletePasskey({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            revokeDeviceSession: (params) =>
+                authClient.multiSession.revoke({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            revokeSession: (params) =>
+                authClient.revokeSession({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            setActiveSession: (params) =>
+                authClient.multiSession.setActive({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            updateOrganization: (params) =>
+                authClient.organization.update({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            updateUser: (params) =>
+                authClient.updateUser({
+                    ...params,
+                    fetchOptions: { throw: true }
+                }),
+            unlinkAccount: (params) =>
+                authClient.unlinkAccount({
+                    ...params,
+                    fetchOptions: { throw: true }
+                })
+        } as AuthMutators
+    }, [authClient])
+
+    const defaultHooks = useMemo(() => {
+        return {
+            useSession: authClient.useSession,
+            useListAccounts: () =>
+                useAuthData({
+                    queryFn: authClient.listAccounts,
+                    cacheKey: "listAccounts"
+                }),
+            useAccountInfo: (params) =>
+                useAuthData({
+                    queryFn: () => authClient.accountInfo(params),
+                    cacheKey: `accountInfo:${JSON.stringify(params)}`
+                }),
+            useListDeviceSessions: () =>
+                useAuthData({
+                    queryFn: authClient.multiSession.listDeviceSessions,
+                    cacheKey: "listDeviceSessions"
+                }),
+            useListSessions: () =>
+                useAuthData({
+                    queryFn: authClient.listSessions,
+                    cacheKey: "listSessions"
+                }),
+            useListPasskeys: authClient.useListPasskeys,
+            useListApiKeys: () =>
+                useAuthData({
+                    queryFn: authClient.apiKey.list,
+                    cacheKey: "listApiKeys"
+                }),
+            useActiveOrganization: authClient.useActiveOrganization,
+            useListOrganizations: authClient.useListOrganizations,
+            useHasPermission: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch("/organization/has-permission", {
+                            method: "POST",
+                            body: params
+                        }),
+                    cacheKey: `hasPermission:${JSON.stringify(params)}`
+                }),
+            useInvitation: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.organization.getInvitation(params),
+                    cacheKey: `invitation:${JSON.stringify(params)}`
+                }),
+            useListInvitations: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch(
+                            `/organization/list-invitations?organizationId=${params?.query?.organizationId || ""}`
+                        ),
+                    cacheKey: `listInvitations:${JSON.stringify(params)}`
+                }),
+            useListUserInvitations: () =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch(
+                            "/organization/list-user-invitations"
+                        ),
+                    cacheKey: `listUserInvitations`
+                }),
+            useListMembers: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch(
+                            `/organization/list-members?organizationId=${params?.query?.organizationId || ""}`
+                        ),
+                    cacheKey: `listMembers:${JSON.stringify(params)}`
+                })
+        } as AuthHooks
+    }, [authClient])
+
+    const viewPaths = useMemo(() => {
+        return { ...authViewPaths, ...viewPathsProp }
+    }, [viewPathsProp])
+
+    const localization = useMemo(() => {
+        return { ...authLocalization, ...localizationProp }
+    }, [localizationProp])
+
+    const hooks = useMemo(() => {
+        return { ...defaultHooks, ...hooksProp }
+    }, [defaultHooks, hooksProp])
+
+    const mutators = useMemo(() => {
+        return { ...defaultMutators, ...mutatorsProp }
+    }, [defaultMutators, mutatorsProp])
+
+    // Remove trailing slash from baseURL
+    baseURL = baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL
+
+    // Remove trailing slash from basePath
+    basePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath
+
+    const { data: sessionData } = hooks.useSession()
+
+    return (
+        <AuthUIContext.Provider
+            value={{
+                authClient,
+                avatar,
+                basePath: basePath === "/" ? "" : basePath,
+                baseURL,
+                captcha,
+                redirectTo,
+                changeEmail,
+                credentials,
+                deleteUser,
+                freshAge,
+                genericOAuth,
+                hooks,
+                mutators,
+                localization,
+                nameRequired,
+                organization,
+                account,
+                signUp,
+                social,
+                toast,
+                navigate: navigate || defaultNavigate,
+                replace: replace || navigate || defaultReplace,
+                viewPaths,
+                Link,
+                ...props
+            }}
+        >
+            {sessionData && organization && <OrganizationRefetcher />}
+
+            {captcha?.provider === "google-recaptcha-v3" ? (
+                <RecaptchaV3>{children}</RecaptchaV3>
+            ) : (
+                children
+            )}
+        </AuthUIContext.Provider>
+    )
+}

package/src/lib/gravatar-utils.ts

@@ -0,0 +1,58 @@
+import { sha256 } from "@noble/hashes/sha2.js"
+import { bytesToHex } from "@noble/hashes/utils.js"
+import type { GravatarOptions } from "../types/gravatar-options"
+
+/**
+ * Generate a Gravatar URL for an email address
+ * @param email - Email address
+ * @param options - Gravatar options
+ * @returns Gravatar URL or null if email is invalid
+ */
+export function getGravatarUrl(
+    email?: string | null,
+    options?: GravatarOptions
+): string | null {
+    if (!email) return null
+
+    try {
+        // Normalize email: trim and lowercase
+        const normalizedEmail = email.trim().toLowerCase()
+        // sha256 expects Uint8Array, so encode string to Uint8Array
+        const encoder = new TextEncoder()
+        const emailBytes = encoder.encode(normalizedEmail)
+        const hash = bytesToHex(sha256(emailBytes))
+        const extension = options?.jpg ? ".jpg" : ""
+        let url = `https://gravatar.com/avatar/${hash}${extension}`
+
+        const params = new URLSearchParams()
+
+        // Add size parameter
+        if (options?.size) {
+            params.append(
+                "s",
+                Math.min(Math.max(options.size, 1), 2048).toString()
+            )
+        }
+
+        // Add default image parameter
+        if (options?.d) {
+            params.append("d", options.d)
+        }
+
+        // Add force default parameter
+        if (options?.forceDefault) {
+            params.append("f", "y")
+        }
+
+        // Append parameters if any
+        const queryString = params.toString()
+        if (queryString) {
+            url += `?${queryString}`
+        }
+
+        return url
+    } catch (error) {
+        console.error("Error generating Gravatar URL:", error)
+        return null
+    }
+}