@daveyplate/better-auth-tanstack

Tanstack Query hooks for Better Auth session & JWT token.

More to come soon... (e.g. useListAccounts, SWR port)

Prerequisites

First, you need to install and integrate Better Auth & Tanstack Query.

Installation

npm install @daveyplate/better-auth-tanstack

For the useSession hook to refresh on sign in, you must use the callbackURL parameter in your signIn, signUp & signOut functions, or manually call refetch or invalidateQueries for ["session"] in the onSuccess callback.

If you are using Next.js protected middleware routes, callbackURL is recommended because it will perform a hard navigation which will clear the router cache.

@daveyplate/better-auth-ui will handle this for you, it defaults callbackURL to "/", and the AuthCard also accepts a callbackURL prop.

Setting up the AuthQueryProvider

First, you need to set up the AuthQueryProvider in your application. This provider will supply the necessary context for the hooks to function.

import { AuthQueryProvider } from "@daveyplate/better-auth-tanstack"

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
    return (
        <AuthQueryProvider>
            {children}
        </AuthQueryProvider>
    )
}

AuthQueryProvider Props

The AuthQueryProvider component accepts the following props. The default staleTime for sessions is 30 seconds and for JWT tokens is 10 minutes.

Creating use-auth-hooks.ts

Create a file named use-auth-hooks.ts and set up the hooks using createAuthHooks function. This function takes the authClient instance and returns the hooks with full type safety and inference from your authClient.

import { createAuthClient } from "better-auth/react"
import { createAuthHooks } from "@daveyplate/better-auth-tanstack"
import { authClient } from "@/lib/auth-client"

export const { useSession, useToken } = createAuthHooks(authClient)

Using the Hooks

useSession

The useSession hook is used to fetch the session.

Props

Example

import { useSession } from "@/hooks/use-auth-hooks"

function MyComponent() {
    const { data: sessionData, session, user, isPending, refetch } = useSession()

    if (isPending) return <div>Loading...</div>

    return <div>Welcome, {user?.email}</div>
}

useToken

The useToken hook is used to fetch the JWT token if better-auth JWT plugin is enabled.

Props

Example

import { useToken } from "@/hooks/use-auth-hooks"

function MyComponent() {
    const { token, isPending } = useToken()

    if (isPending) return <div>Loading...</div>

    return <div>JWT: {token}</div>
}

Prefetch - Advanced Usage

If you want to use a hybrid prefetching strategy, this is totally supported.

Tanstack Query - Advanced Server Rendering

prefetchSession

The prefetchSession function is used to prefetch session data and store it in the query client.

Props

RSC Example

import { prefetchSession } from "@daveyplate/better-auth-tanstack/prefetch"
import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query"
import { headers } from "next/headers"

import { betterAuth } from "better-auth"
import { auth } from "@/lib/auth"

export default async function Page() {
    const queryClient = new QueryClient()

    const { data, session, user } = await prefetchSession(
        auth, queryClient, await headers()
    )

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <ClientPage />
        </HydrationBoundary>
    )
}

License

This project is licensed under the MIT License. See the LICENSE file for details.