Better Auth UI

In order to use @daveyplate/better-auth-ui with the @daveyplate/better-auth-tanstack package, all you need to do is change your <AuthUIProvider> into an <AuthUIProviderTanstack> component. It accepts all of the same props and configuration options.

The main difference is the persistClient prop which is only required if you are using a persistQueryClient for offline Authentication. This prop will tell the authentication methods to use the /auth/callback path for all authentication methods that leave the site, which will clear your query cache for you automatically.

app/providers.tsx

"use client"

import { AuthUIProviderTanstack } from "@daveyplate/better-auth-ui/tanstack"
import { AuthQueryProvider } from "@daveyplate/better-auth-tanstack"
import Link from "next/link"
import { useRouter } from "next/navigation"

import { authClient } from "@/lib/auth-client"

export function Providers({ children }: { children: React.ReactNode }) {
    const router = useRouter()

    return (
        <AuthQueryProvider>
            <AuthUIProviderTanstack
                authClient={authClient}
                navigate={router.push}
                persistClient={false}
                replace={router.replace}
                onSessionChange={() => router.refresh()}
                Link={Link}
            >
                {children}
            </AuthUIProviderTanstack>
        </AuthQueryProvider>
    )
}

TanStack Query