Client

The client is what your frontend uses to call the actions defined in your typebase/ directory. It's a plain TypeScript library that works in any JS/TS environment: Node, the browser, edge runtimes, and React Native.

Every call is just a function call. The types come straight from your action's .input() and .output(), so the editor knows what you can pass in and what you'll get back without any code generation step on the client side.

const todo = await client.queries.todos.getOne({ id: 1 });
//      ^? { id: number; value: string; completed: boolean }

The three client utilities

Typebase ships three client helpers, all from the typebase-io/client namespace. Pick the ones you need:

You can use them together. A common setup is createRouterClient for server-rendered pages and createTanstackQueryClient for interactive client components, both pointing at the same Typebase server.

createRouterClient

A thin wrapper around an oRPC client. Every action becomes a typed async function.

import { createRouterClient } from 'typebase-io/client';
import type { Router } from '../typebase/_generated/server';

export const client = createRouterClient<Router>({
  url: process.env.TYPEBASE_APP_URL_DEV || process.env.TYPEBASE_APP_URL || '',
});

Then call any action like a regular function:

const todos = await client.queries.todos.getMany();
await client.mutations.todos.create({ value: 'Buy milk' });

The Router type is generated from your actions/ folder by npx typebase-io-cli codegen. The shape of the client always mirrors the folder structure (client.queries.todos.getMany, client.mutations.todos.create, and so on).

createTanstackQueryClient

The same client, wrapped with TanStack Query utilities so each action exposes queryOptions, mutationOptions, and helpers like key() for cache invalidation.

import { createTanstackQueryClient } from 'typebase-io/client';
import type { Router } from '../typebase/_generated/server';

export const client = createTanstackQueryClient<Router>({
  url: process.env.NEXT_PUBLIC_TYPEBASE_APP_URL || '',
});

const { data } = useQuery(client.queries.todos.getMany.queryOptions());
const mutation = useMutation(client.mutations.todos.create.mutationOptions());

The URL must be reachable from the browser, so it needs whatever prefix your framework uses for public env vars (NEXT_PUBLIC_, PUBLIC_, EXPO_PUBLIC_, etc.).

createAuthClient

When your project has an auth.ts file, Typebase re-exports a framework-specific better-auth client so sign-in, sign-up, and session reads are wired up to your Typebase server out of the box.

import { createAuthClient } from 'typebase-io/client/auth/react';

export const authClient = createAuthClient();

The framework suffix changes depending on what you're using:

The returned authClient is the same object documented in the better-auth client docs. Typebase just configures it for you.

Auth helpers per framework

When your app's domain differs from the Typebase server's domain (the typical setup), auth cookies need to be proxied through your app so they can be set as secure, HttpOnly cookies. Typebase ships small framework-specific helpers for this:

See your framework's integration guide below for how to wire them up.

Framework-specific guides

This page is the framework-agnostic overview. For the full setup (providers, proxies, server-side session reads, route protection, environment variables), use the guide for your framework: