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 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 (
    <AuthUIProviderTanstack
      authClient={authClient}
      navigate={router.push}
      persistClient={false}
      replace={router.replace}
      onSessionChange={() => router.refresh()}
      LinkComponent={Link}
    >
      {children}
    </AuthUIProviderTanstack>
  )
}