Better Auth UI

Triplit is a simple and powerful database solution that works well with Better Auth UI.

Prerequisites

Set up your project with the @daveyplate/better-auth-triplit package.

Integration with Auth UI Providers

You can pass the Triplit hooks to both the AuthUIProvider and AuthUIProviderTanstack components:

import { useTriplitHooks } from "@daveyplate/better-auth-ui/triplit"
import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { useSession } from "@/lib/auth-client"
import { triplit } from "@/lib/triplit"
 
function Providers({ children }) {
    const { data: sessionData, isPending } = useSession()
    const { hooks } = useTriplitHooks({ 
        triplit, 
        sessionData, 
        isPending, 
        usePlural: true 
    })
    
    return (
        <AuthUIProvider
            // ...other props
            hooks={hooks}
        >
            {children}
        </AuthUIProvider>
    )
}

The same pattern works for AuthUIProviderTanstack as well. This is recommended for use with a Persist Client for offline authentication.

Triplit

Prerequisites

Integration with Auth UI Providers

On this page