@erikey/react 0.4.26 → 0.4.28

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

@@ -0,0 +1,769 @@
+"use client"
+
+import { createContext, type ReactNode, useMemo } from "react"
+
+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 { EmailVerificationOptions } from "../types/email-verification-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 type { TeamOptions, TeamOptionsContext } from "../types/team-options"
+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)
+}
+
+// Default toast is a no-op - users should provide their own via onError/onSuccess
+const defaultToast: RenderToast = () => {}
+
+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
+    /**
+     * Email verification configuration
+     */
+    emailVerification?: EmailVerificationOptions
+    /**
+     * 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 error localization.
+     * When false, errors messages from backend will be used directly.
+     * @default true
+     */
+    localizeErrors: boolean
+    /**
+     * 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
+    /**
+     * Teams configuration (requires organizations to be enabled)
+     */
+    teams?: TeamOptionsContext
+    /**
+     * Enable or disable Passkey support
+     * @default false
+     */
+    passkey?: boolean
+    /**
+     * Enable or disable Wallet (SIWE) support
+     * @default false
+     */
+    wallet?: 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>
+    /**
+     * Email verification configuration
+     * @default undefined
+     */
+    emailVerification?: boolean | Partial<EmailVerificationOptions>
+    /**
+     * Render custom Toasts
+     * @default Sonner
+     */
+    toast?: RenderToast
+    /**
+     * Customize the Localization strings
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+    /**
+     * Enable or disable error localization.
+     * When false, errors messages from backend will be used directly.
+     * @default true
+     */
+    localizeErrors?: boolean
+    /**
+     * ADVANCED: Custom mutators for updating auth data
+     */
+    mutators?: Partial<AuthMutators>
+    /**
+     * Organization plugin configuration
+     */
+    organization?: OrganizationOptions | boolean
+    /**
+     * Teams plugin configuration (requires organizations to be enabled)
+     */
+    teams?: TeamOptions | 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"
+        | "localizeErrors"
+        | "teams"
+        | "emailVerification"
+    >
+>
+
+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 = typeof window !== 'undefined' ? window.location.origin : "",
+    captcha,
+    redirectTo = "/",
+    credentials: credentialsProp,
+    changeEmail = true,
+    freshAge = 60 * 60 * 24,
+    hooks: hooksProp,
+    mutators: mutatorsProp,
+    localization: localizationProp,
+    localizeErrors = true,
+    nameRequired = true,
+    organization: organizationProp,
+    teams: teamsProp,
+    signUp: signUpProp = true,
+    toast = defaultToast,
+    viewPaths: viewPathsProp,
+    navigate,
+    replace,
+    Link = DefaultLink,
+    emailVerification: emailVerificationProp,
+    ...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),
+            Image: avatarProp.Image
+        }
+    }, [avatarProp])
+
+    const emailVerification = useMemo<
+        EmailVerificationOptions | undefined
+    >(() => {
+        if (!emailVerificationProp) return
+
+        if (emailVerificationProp === true) {
+            return {
+                otp: false
+            }
+        }
+
+        return {
+            otp: emailVerificationProp.otp ?? false
+        }
+    }, [emailVerificationProp])
+
+    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,
+                usernameRequired: true
+            }
+        }
+
+        return {
+            ...credentialsProp,
+            forgotPassword: credentialsProp?.forgotPassword ?? true,
+            usernameRequired: credentialsProp?.usernameRequired ?? 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 teams = useMemo<TeamOptionsContext | undefined>(() => {
+        if (!teamsProp || !organization) return
+
+        if (teamsProp === true) {
+            return {
+                enabled: true,
+                customRoles: [],
+                colors: {
+                    count: 5,
+                    prefix: "team"
+                }
+            }
+        }
+
+        return {
+            enabled: teamsProp.enabled ?? true,
+            customRoles: teamsProp.customRoles || [],
+            colors: {
+                count: teamsProp.colors?.count ?? 5,
+                prefix: teamsProp.colors?.prefix ?? "team"
+            }
+        }
+    }, [teamsProp, organization])
+
+    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 }
+                }),
+            updateTeam: (params) =>
+                authClient.$fetch("/organization/update-team", {
+                    method: "POST",
+                    body: params,
+                    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)}`
+                }),
+            useListTeams: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch(
+                            `/organization/list-teams?organizationId=${
+                                params?.organizationId || ""
+                            }`
+                        ),
+                    cacheKey: `listTeams:${JSON.stringify(params)}`
+                }),
+            useListTeamMembers: (params) =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch("/organization/list-team-members", {
+                            method: "POST",
+                            body: params?.teamId
+                                ? { query: { teamId: params.teamId } }
+                                : undefined
+                        }),
+                    cacheKey: `listTeamMembers:${JSON.stringify(params)}`
+                }),
+            useListUserTeams: () =>
+                useAuthData({
+                    queryFn: () =>
+                        authClient.$fetch("/organization/list-user-teams"),
+                    cacheKey: "listUserTeams"
+                })
+        } as unknown 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,
+                emailVerification,
+                freshAge,
+                genericOAuth,
+                hooks,
+                mutators,
+                localization,
+                localizeErrors,
+                nameRequired,
+                organization,
+                teams,
+                account,
+                signUp,
+                social,
+                toast,
+                navigate: navigate || defaultNavigate,
+                replace: replace || navigate || defaultReplace,
+                viewPaths,
+                Link,
+                ...props
+            }}
+        >
+            {captcha?.provider === "google-recaptcha-v3" ? (
+                <RecaptchaV3>{children}</RecaptchaV3>
+            ) : (
+                children
+            )}
+        </AuthUIContext.Provider>
+    )
+}