Announcing the Appwrite React library

Every React developer who has wired Appwrite into a project knows the drill. You install the Web SDK, write a small appwrite.ts file with a Client and an Account, and then build the same useUser hook and sign-in form you have built for every other project. For client-only apps that is fine, but the moment SSR enters the picture (cookies() in Next.js, server functions in TanStack Start) you also start hand-rolling session cookies, server helpers, and the setSession plumbing that hydrates the client from the request.

Today, we are releasing the Appwrite React library, an official package that gives you that whole layer out of the box.

The provider and hooks

The library exposes a single AppwriteProvider and five auth hooks:

• useAuth for the combined user, sign-in, sign-up, and sign-out surface
• useUser for the current authenticated user
• useSignIn for email/password and OAuth sign-in
• useSignUp for account creation
• useSignOut for ending the current session

It is built on top of the existing Appwrite Web SDK and uses TanStack Query underneath, so cached user state stays in sync across components automatically.

What makes it different from a hand-rolled useUser is what happens on the server. The library ships dedicated entrypoints for Next.js App Router and TanStack Start that handle the cookie, hydration, and admin-client wiring for you, so the hooks behave the same in a Vite SPA as they do in a server-rendered page.

Client-side setup

For a Vite app, setup is two imports. Wrap the tree with the provider, then call useAuth wherever you need it.

// main.tsx
import { AppwriteProvider } from "@appwrite.io/react";

<AppwriteProvider
  endpoint={import.meta.env.VITE_APPWRITE_ENDPOINT}
  projectId={import.meta.env.VITE_APPWRITE_PROJECT_ID}
>
  <App />
</AppwriteProvider>;

With the provider in place, every component can pull the current user, sign-in, sign-up, and sign-out methods from a single hook.

// App.tsx
import { useAuth } from "@appwrite.io/react";

function App() {
  const { user, signIn, signOut } = useAuth();
  // render auth UI
}

That is the entire client setup. The library handles the service file, the initial account fetching on mount, and the auth context that you would otherwise write by hand. The full walkthrough lives in the Vite React quickstart.

Server-side rendering

For server-rendered React, the package adds three pieces:

• A handler route that processes sign-in, sign-up, sign-out, and OAuth callback requests on your server.
• Server helpers that resolve the current user, session, or session-scoped client from the request cookie.
• An SSR mode on the provider that hydrates the client with the server-side session, so the first paint already knows the user.

Concretely, in a Next.js layout, you read the cookie server-side, pass the value through the provider, and the client hooks pick it up.

// app/layout.tsx
const helpers = createNextServerHelpers(appwrite);
const session = await helpers.readSessionCookie();

return <Providers session={session}>{children}</Providers>;

The same helpers can be called inside any server component to fetch the user before the page is sent to the browser.

// app/page.tsx
const user = await helpers.getLoggedInUser();

The same flow on TanStack Start runs through createServerFn and Route.useLoaderData(). The hooks themselves do not change.

Session client

For per-request operations on behalf of the signed-in user, the framework helpers expose createSessionClient. It returns a node-appwrite client already authenticated with the request cookie, so server components and loaders can act as the user without re-implementing session handling.

const helpers = createNextServerHelpers(appwrite);
const session = await helpers.createSessionClient();

if (session) {
  const user = await session.account.get();
}

Admin client

For privileged operations, pass an apiKey into the framework helper and call createAdminClient() on it. The returned object exposes every node-appwrite service (users, tablesDB, storage, teams, functions, and so on), so the rest of your server code keeps using the official Node SDK.

const helpers = createNextServerHelpers({
  endpoint: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!,
  projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!,
  apiKey: process.env.APPWRITE_API_KEY!,
});

const admin = helpers.createAdminClient();
const users = await admin.users.list();

Where to start

Three quickstarts ship alongside the library:

• Vite React for client-rendered apps
• Next.js App Router for server-rendered React on Next.js
• TanStack Start for server-rendered React on TanStack Start

Each one ends with a working sign-up, sign-in, and sign-out flow. From there, the React library docs cover the hooks, the server helpers, OAuth, and the handler configuration in depth.

We would love to hear what you build with it. Drop into the Appwrite Discord and tell us how the SSR story feels in your framework of choice.