better-auth-ui 3.2.5

package/src/lib/image-utils.ts

@@ -0,0 +1,55 @@
+export async function resizeAndCropImage(
+    file: File,
+    name: string,
+    size: number,
+    extension: string
+): Promise<File> {
+    const image = await loadImage(file)
+
+    const canvas = document.createElement("canvas")
+    canvas.width = canvas.height = size
+
+    const ctx = canvas.getContext("2d")
+
+    const minEdge = Math.min(image.width, image.height)
+
+    const sx = (image.width - minEdge) / 2
+    const sy = (image.height - minEdge) / 2
+    const sWidth = minEdge
+    const sHeight = minEdge
+
+    ctx?.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, size, size)
+
+    const resizedImageBlob = await new Promise<Blob | null>((resolve) =>
+        canvas.toBlob(resolve, `image/${extension}`)
+    )
+
+    return new File([resizedImageBlob as BlobPart], `${name}.${extension}`, {
+        type: `image/${extension}`
+    })
+}
+
+async function loadImage(file: File): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+        const image = new Image()
+        const reader = new FileReader()
+
+        reader.onload = (e) => {
+            image.src = e.target?.result as string
+        }
+
+        image.onload = () => resolve(image)
+        image.onerror = (err) => reject(err)
+
+        reader.readAsDataURL(file)
+    })
+}
+
+export async function fileToBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(file)
+    })
+}

package/src/lib/instantdb/model-names.ts

@@ -0,0 +1,24 @@
+const namespaces = [
+    "user",
+    "session",
+    "account",
+    "passkey",
+    "twoFactor"
+] as const
+type Namespace = (typeof namespaces)[number]
+
+export type ModelNames = {
+    [key in Namespace]: string
+}
+
+export const getModelName = ({
+    namespace,
+    modelNames,
+    usePlural = false
+}: {
+    namespace: Namespace
+    modelNames?: Partial<ModelNames>
+    usePlural?: boolean
+}) => {
+    return modelNames?.[namespace] || `${namespace}${usePlural ? "s" : ""}`
+}

package/src/lib/instantdb/use-instant-options.ts

@@ -0,0 +1,98 @@
+import type { InstantReactWebDatabase } from "@instantdb/react"
+import type { User } from "better-auth"
+import { useMemo } from "react"
+
+import type { Session } from "../../types/auth-client"
+import type { AuthHooks } from "../../types/auth-hooks"
+import type { AuthMutators } from "../../types/auth-mutators"
+import type { Refetch } from "../../types/refetch"
+import { getModelName } from "./model-names"
+import { useListAccounts } from "./use-list-accounts"
+import { useListSessions } from "./use-list-sessions"
+import { useSession } from "./use-session"
+
+const namespaces = ["user", "session", "account", "passkey"] as const
+type Namespace = (typeof namespaces)[number]
+
+type ModelNames = {
+    [key in Namespace]: string
+}
+
+export interface UseInstantOptionsProps {
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    db: InstantReactWebDatabase<any>
+    modelNames?: Partial<ModelNames>
+    usePlural?: boolean
+    sessionData?: { user: User; session: Session }
+    refetch?: Refetch
+    user?: { id: string } | null
+    isPending: boolean
+}
+
+export function useInstantOptions({
+    db,
+    usePlural = true,
+    modelNames,
+    sessionData,
+    isPending,
+    user
+}: UseInstantOptionsProps) {
+    const userId = user?.id || sessionData?.user.id
+
+    const hooks = useMemo(() => {
+        return {
+            useSession: () =>
+                useSession({
+                    db,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                }),
+            useListAccounts: () =>
+                useListAccounts({
+                    db,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                }),
+            useListSessions: () =>
+                useListSessions({
+                    db,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                })
+        } as AuthHooks
+    }, [db, modelNames, usePlural, sessionData, isPending])
+
+    const mutators = useMemo(() => {
+        return {
+            updateUser: async (data) => {
+                if (!userId) {
+                    throw new Error("Unauthenticated")
+                }
+
+                const modelName = getModelName({
+                    namespace: "user",
+                    modelNames,
+                    usePlural
+                })
+
+                db.transact([
+                    db.tx[modelName][userId].update({
+                        ...data,
+                        updatedAt: Date.now()
+                    })
+                ])
+            }
+        } as AuthMutators
+    }, [db, userId, modelNames, usePlural])
+
+    return {
+        hooks,
+        mutators
+    }
+}

package/src/lib/instantdb/use-list-accounts.ts

@@ -0,0 +1,38 @@
+import type { BetterFetchError } from "@better-fetch/fetch"
+import type { Account } from "better-auth"
+import { useMemo } from "react"
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import type { UseInstantOptionsProps } from "./use-instant-options"
+
+export function useListAccounts({
+    db,
+    modelNames,
+    usePlural,
+    isPending
+}: UseInstantOptionsProps): ReturnType<AuthHooks["useListAccounts"]> {
+    const { user: authUser, isLoading: authLoading } = db.useAuth()
+
+    const modelName = getModelName({
+        namespace: "account",
+        modelNames,
+        usePlural
+    })
+
+    const { data, isLoading, error } = db.useQuery(
+        authUser
+            ? { [modelName]: { $: { where: { userId: authUser?.id } } } }
+            : null
+    )
+
+    const accounts = useMemo(
+        () => data?.[modelName] as Account[],
+        [data, modelName]
+    )
+
+    return {
+        data: accounts,
+        isPending: !accounts && (isPending || authLoading || isLoading),
+        error: (error as BetterFetchError) || null
+    }
+}

package/src/lib/instantdb/use-list-sessions.ts

@@ -0,0 +1,53 @@
+import type { Session } from "better-auth"
+import { useMemo } from "react"
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import type { UseInstantOptionsProps } from "./use-instant-options"
+
+export function useListSessions({
+    db,
+    modelNames,
+    usePlural,
+    isPending
+}: UseInstantOptionsProps): ReturnType<AuthHooks["useListSessions"]> {
+    const { user: authUser, isLoading: authLoading } = db.useAuth()
+
+    const modelName = getModelName({
+        namespace: "session",
+        modelNames,
+        usePlural
+    })
+
+    const now = useMemo(() => Date.now(), [])
+
+    const { data, isLoading } = db.useQuery(
+        authUser
+            ? {
+                  [modelName]: {
+                      $: {
+                          where: {
+                              userId: authUser?.id,
+                              expiresAt: { $gte: now }
+                          }
+                      }
+                  }
+              }
+            : null
+    )
+
+    const sessions = useMemo(() => {
+        if (data?.[modelName]) {
+            return data[modelName].map((session) => ({
+                ...session,
+                expiresAt: new Date(session.expiresAt as string),
+                createdAt: new Date(session.createdAt as string),
+                updatedAt: new Date(session.updatedAt as string)
+            })) as Session[]
+        }
+    }, [data, modelName])
+
+    return {
+        data: sessions,
+        isPending: !sessions && (isPending || authLoading || isLoading)
+    }
+}

package/src/lib/instantdb/use-session.ts

@@ -0,0 +1,55 @@
+import type { BetterFetchError } from "better-auth/react"
+import { useMemo } from "react"
+import type { User } from "../../types/auth-client"
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import type { UseInstantOptionsProps } from "./use-instant-options"
+
+export function useSession({
+    db,
+    sessionData,
+    isPending,
+    refetch,
+    usePlural,
+    modelNames
+}: UseInstantOptionsProps): ReturnType<AuthHooks["useSession"]> {
+    const { user: authUser, error } = db.useAuth()
+
+    const modelName = getModelName({
+        namespace: "user",
+        modelNames,
+        usePlural
+    })
+
+    const { data } = db.useQuery(
+        authUser
+            ? { [modelName]: { $: { where: { id: authUser?.id } } } }
+            : null
+    )
+
+    const user = useMemo(() => {
+        if (data?.[modelName]?.length) {
+            const user = data[modelName][0]
+            return {
+                ...user,
+                createdAt: new Date(user.createdAt as string),
+                updatedAt: new Date(user.updatedAt as string)
+            } as User
+        }
+        return null
+    }, [data, modelName])
+
+    return {
+        data: sessionData
+            ? {
+                  session: sessionData.session,
+                  user: (sessionData?.user.id === user?.id
+                      ? user
+                      : sessionData.user) as User
+              }
+            : null,
+        isPending,
+        refetch: refetch || (() => {}),
+        error: (error as BetterFetchError) || null
+    }
+}

package/src/lib/organization-refetcher.tsx

@@ -0,0 +1,56 @@
+import { useContext, useEffect } from "react"
+import { useCurrentOrganization } from "../hooks/use-current-organization"
+import { AuthUIContext } from "./auth-ui-provider"
+
+export const OrganizationRefetcher = () => {
+    const {
+        hooks: { useListOrganizations, useSession },
+        organization: organizationOptions,
+        navigate,
+        redirectTo
+    } = useContext(AuthUIContext)
+
+    const { slug, pathMode, personalPath } = organizationOptions || {}
+
+    const { data: sessionData } = useSession()
+
+    const {
+        data: organization,
+        isPending: organizationPending,
+        isRefetching: organizationRefetching,
+        refetch: refetchOrganization
+    } = useCurrentOrganization()
+
+    const { refetch: refetchListOrganizations } = useListOrganizations()
+
+    const { data: organizations } = useListOrganizations()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Refetch fix
+    useEffect(() => {
+        if (!sessionData?.user.id) return
+
+        if (organization || organizations) {
+            refetchOrganization?.()
+            refetchListOrganizations?.()
+        }
+    }, [sessionData?.user.id])
+
+    useEffect(() => {
+        if (organizationRefetching || organizationPending) return
+
+        if (slug && pathMode === "slug" && !organization) {
+            navigate(personalPath || redirectTo)
+        }
+    }, [
+        organization,
+        organizationRefetching,
+        organizationPending,
+        slug,
+        pathMode,
+        personalPath,
+        navigate,
+        redirectTo
+    ])
+
+    return null
+}

package/src/lib/social-providers.ts

@@ -0,0 +1,144 @@
+import {
+    AppleIcon,
+    DiscordIcon,
+    DropboxIcon,
+    FacebookIcon,
+    GitHubIcon,
+    GitLabIcon,
+    GoogleIcon,
+    HuggingFaceIcon,
+    KickIcon,
+    LinearIcon,
+    LinkedInIcon,
+    MicrosoftIcon,
+    NotionIcon,
+    type ProviderIcon,
+    RedditIcon,
+    RobloxIcon,
+    SlackIcon,
+    SpotifyIcon,
+    TikTokIcon,
+    TwitchIcon,
+    VKIcon,
+    XIcon,
+    ZoomIcon
+} from "../components/provider-icons"
+
+export const socialProviders = [
+    {
+        provider: "apple",
+        name: "Apple",
+        icon: AppleIcon
+    },
+    {
+        provider: "discord",
+        name: "Discord",
+        icon: DiscordIcon
+    },
+    {
+        provider: "dropbox",
+        name: "Dropbox",
+        icon: DropboxIcon
+    },
+    {
+        provider: "facebook",
+        name: "Facebook",
+        icon: FacebookIcon
+    },
+    {
+        provider: "github",
+        name: "GitHub",
+        icon: GitHubIcon
+    },
+    {
+        provider: "gitlab",
+        name: "GitLab",
+        icon: GitLabIcon
+    },
+    {
+        provider: "google",
+        name: "Google",
+        icon: GoogleIcon
+    },
+    {
+        provider: "huggingface",
+        name: "Hugging Face",
+        icon: HuggingFaceIcon
+    },
+    {
+        provider: "kick",
+        name: "Kick",
+        icon: KickIcon
+    },
+    {
+        provider: "linear",
+        name: "Linear",
+        icon: LinearIcon
+    },
+    {
+        provider: "linkedin",
+        name: "LinkedIn",
+        icon: LinkedInIcon
+    },
+    {
+        provider: "microsoft",
+        name: "Microsoft",
+        icon: MicrosoftIcon
+    },
+    {
+        provider: "notion",
+        name: "Notion",
+        icon: NotionIcon
+    },
+    {
+        provider: "reddit",
+        name: "Reddit",
+        icon: RedditIcon
+    },
+    {
+        provider: "roblox",
+        name: "Roblox",
+        icon: RobloxIcon
+    },
+    {
+        provider: "slack",
+        name: "Slack",
+        icon: SlackIcon
+    },
+    {
+        provider: "spotify",
+        name: "Spotify",
+        icon: SpotifyIcon
+    },
+    {
+        provider: "tiktok",
+        name: "TikTok",
+        icon: TikTokIcon
+    },
+    {
+        provider: "twitch",
+        name: "Twitch",
+        icon: TwitchIcon
+    },
+    {
+        provider: "vk",
+        name: "VK",
+        icon: VKIcon
+    },
+    {
+        provider: "twitter",
+        name: "X",
+        icon: XIcon
+    },
+    {
+        provider: "zoom",
+        name: "Zoom",
+        icon: ZoomIcon
+    }
+] as const
+
+export type Provider = {
+    provider: string
+    name: string
+    icon?: ProviderIcon
+}

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

@@ -0,0 +1,49 @@
+import { useCallback, useMemo } from "react"
+import {
+    AuthUIProvider,
+    type AuthUIProviderProps
+} from "../../lib/auth-ui-provider"
+import { useTanstackOptions } from "./use-tanstack-options"
+
+export function AuthUIProviderTanstack({
+    children,
+    authClient,
+    hooks: hooksProp,
+    mutators: mutatorsProp,
+    onSessionChange: onSessionChangeProp,
+    ...props
+}: AuthUIProviderProps) {
+    const {
+        hooks: contextHooks,
+        mutators: contextMutators,
+        onSessionChange,
+        optimistic
+    } = useTanstackOptions({ authClient })
+
+    const hooks = useMemo(
+        () => ({ ...contextHooks, ...hooksProp }),
+        [contextHooks, hooksProp]
+    )
+    const mutators = useMemo(
+        () => ({ ...contextMutators, ...mutatorsProp }),
+        [contextMutators, mutatorsProp]
+    )
+
+    const onSessionChangeCallback = useCallback(async () => {
+        await onSessionChange()
+        await onSessionChangeProp?.()
+    }, [onSessionChangeProp, onSessionChange])
+
+    return (
+        <AuthUIProvider
+            authClient={authClient}
+            hooks={hooks}
+            mutators={mutators}
+            onSessionChange={onSessionChangeCallback}
+            optimistic={optimistic}
+            {...props}
+        >
+            {children}
+        </AuthUIProvider>
+    )
+}

package/src/lib/tanstack/use-tanstack-options.ts

@@ -0,0 +1,112 @@
+import {
+    AuthQueryContext,
+    createAuthHooks
+} from "@daveyplate/better-auth-tanstack"
+import { useIsRestoring, useQueryClient } from "@tanstack/react-query"
+import { useCallback, useContext, useMemo } from "react"
+import type { AuthHooks } from "../../types/auth-hooks"
+import type { AuthMutators } from "../../types/auth-mutators"
+
+export function useTanstackOptions({
+    authClient
+}: {
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    authClient: any
+}) {
+    const {
+        useUnlinkAccount,
+        useUpdateUser,
+        useDeletePasskey,
+        useRevokeSession,
+        useRevokeDeviceSession,
+        useSetActiveSession
+    } = createAuthHooks(authClient)
+    const queryClient = useQueryClient()
+
+    const { mutateAsync: updateUserAsync } = useUpdateUser()
+    const { mutateAsync: deletePasskeyAsync } = useDeletePasskey()
+    const { mutateAsync: unlinkAccountAsync } = useUnlinkAccount()
+    const { mutateAsync: revokeSessionAsync } = useRevokeSession()
+    const { mutateAsync: revokeDeviceSessionAsync } = useRevokeDeviceSession()
+    const { setActiveSessionAsync } = useSetActiveSession()
+    const { sessionKey } = useContext(AuthQueryContext)
+
+    const hooks = useMemo(
+        () => ({
+            ...(createAuthHooks(authClient) as Partial<AuthHooks>),
+            useIsRestoring
+        }),
+        [authClient]
+    )
+
+    const mutators = useMemo(
+        () =>
+            ({
+                updateUser: async (params) => {
+                    const { error } = await updateUserAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                },
+                unlinkAccount: async (params) => {
+                    const { error } = await unlinkAccountAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                },
+                deletePasskey: async (params) => {
+                    const { error } = await deletePasskeyAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                },
+                revokeSession: async (params) => {
+                    const { error } = await revokeSessionAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                },
+                setActiveSession: async (params) => {
+                    const { error } = await setActiveSessionAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                },
+                revokeDeviceSession: async (params) => {
+                    const { error } = await revokeDeviceSessionAsync({
+                        ...params,
+                        fetchOptions: { throw: false }
+                    })
+                    if (error) throw error
+                }
+            }) as AuthMutators,
+        [
+            updateUserAsync,
+            deletePasskeyAsync,
+            unlinkAccountAsync,
+            revokeSessionAsync,
+            revokeDeviceSessionAsync,
+            setActiveSessionAsync
+        ]
+    )
+
+    const onSessionChange = useCallback(async () => {
+        await queryClient.refetchQueries({ queryKey: sessionKey })
+
+        queryClient.invalidateQueries({
+            predicate: (query) => query.queryKey !== sessionKey
+        })
+    }, [queryClient, sessionKey])
+
+    return {
+        hooks,
+        mutators,
+        onSessionChange,
+        optimistic: true
+    }
+}