Add Appwrite React library docs and launch post#3022
Conversation
Adds /docs/products/auth/react hub covering the provider, hooks, server helpers, handler routes, and OAuth flow. Rewrites the React, Next.js, and TanStack Start quickstarts to use @appwrite.io/react. Adds a launch blog post under blog/post/announcing-appwrite-react-library and a new "React library" entry in the Auth sidebar. Updates /docs/sdks to list the package.
Appwrite WebsiteProject ID: Website (appwrite/website)Project ID: Tip Our Discord community has grown to 24K developers, and counting |
Greptile SummaryThis PR introduces the
Confidence Score: 4/5Safe to merge after fixing the optimize-cache.json filename mismatch; all documentation content is accurate. The only active defect is in .optimize-cache.json, where the newly added cover image is registered under the wrong extension (cover.png vs the actual cover.avif). If the image optimization pipeline relies on this cache to locate or skip files, it will fail to process the real image correctly. Everything else — hook docs, server helper examples, quickstart code snippets, sidebar wiring — is consistent and correct. .optimize-cache.json has the wrong file extension for the cover image key. Important Files Changed
Reviews (7): Last reviewed commit: "Add React library launch cover, changelo..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Rewrites the AI quickstart prompts under react/, nextjs/, and tanstack-start/ to use @appwrite.io/react instead of the raw Appwrite Web SDK setup, mirroring the rewritten +page.markdoc files.
- Fix admin client example: call admin.account.list() instead of dereferencing the Account service - Add multi-route guidance to the TanStack Start quickstart so readers know to move AppwriteProvider into __root.tsx in real apps - Wrap the blog useAuth() snippet in a function component to satisfy the Rules of Hooks - Format prompt.md files per prettier
Reflects the new framework helper method that returns the full node-appwrite AdminServer (users, databases, storage, teams, and the rest). Hub keeps the standalone createAdminClient as an alternative.
| title: "Announcing the Appwrite React library" | ||
| description: A small set of React hooks and SSR adapters that take the busywork out of wiring Appwrite Auth into Vite, Next.js, and TanStack Start apps. | ||
| date: 2026-05-25 | ||
| cover: /images/blog/announcing-appwrite-react-library/cover.avif |
There was a problem hiding this comment.
The frontmatter references /images/blog/announcing-appwrite-react-library/cover.avif, but the directory static/images/blog/announcing-appwrite-react-library/ does not exist anywhere in the repo. Every other blog post in static/images/blog/ has its cover image committed alongside the post. Publishing this as-is will render a broken image on the blog listing and the post page itself.
Sets the announcement blog cover to the new React SDK artwork (date moved to 2026-06-24), adds the matching 2026-06-24 changelog entry, and tags the React library row in /docs/sdks as beta to align with the React Native SDK row.
| "static/images/blog/announcing-appwrite-pro/credits.png": "285905e1fd8b8282cb45a4f2259debd851812c23665145d865e141f5133c0be0", | ||
| "static/images/blog/announcing-appwrite-pro/header.png": "ab709ff45870607ec4472bd4dc9e4a028e320bbfb89009ec04c98ec69248a15a", | ||
| "static/images/blog/announcing-appwrite-pro/pro.png": "01427f30610de4d6d19cd9160154d8849ffa75da04d063d12bf3e9bba481b4e7", | ||
| "static/images/blog/announcing-appwrite-react-library/cover.png": "db2536faba9c82ad441662e10bf69375c8f6d1716e151324e37b0a5bbca9ee48", |
There was a problem hiding this comment.
cover.png, but the file actually committed to the repo is cover.avif. If the image optimization pipeline consults this cache to decide what to skip or where to find the processed artifact, it will look for a .png that doesn't exist and never register the real .avif file as cached. The key should match the actual filename.
| "static/images/blog/announcing-appwrite-react-library/cover.png": "db2536faba9c82ad441662e10bf69375c8f6d1716e151324e37b0a5bbca9ee48", | |
| "static/images/blog/announcing-appwrite-react-library/cover.avif": "db2536faba9c82ad441662e10bf69375c8f6d1716e151324e37b0a5bbca9ee48", |
There was a problem hiding this comment.
Fair enough — you know your codebase better than I do. If the cache entry with .png is valid (e.g., the optimizer reads the source .png before converting to .avif, or the cache is managed by a script that handles the discrepancy), I'll defer to your judgment here.
Shall I remember this as a rule: "Don't flag mismatches between .optimize-cache.json entries and committed image filenames — the cache format is intentional and managed separately from the actual static assets"?
| layout: post | ||
| title: "Announcing the Appwrite React library" | ||
| description: A small set of React hooks and SSR adapters that take the busywork out of wiring Appwrite Auth into Vite, Next.js, and TanStack Start apps. | ||
| date: 2026-06-24 |
| timeToRead: 5 | ||
| author: atharva | ||
| category: announcement, authentication | ||
| faqs: |
There was a problem hiding this comment.
Let's add a few more generic FAQs
| const { user, isLoading, error, refresh } = useUser(); | ||
| ``` | ||
|
|
||
| Returns: |
There was a problem hiding this comment.
These don't look great. Maybe we should use subheadings? And maybe even update the copy?
| | `scopes` | No | Provider-specific OAuth scopes to request. | | ||
| | `onError` | No | Callback invoked if the request fails before redirect. | | ||
|
|
||
| In SSR mode the success URL is fixed to the handler callback. The final redirect after that callback is controlled by the `redirects.success` config on the handler. |
There was a problem hiding this comment.
| In SSR mode the success URL is fixed to the handler callback. The final redirect after that callback is controlled by the `redirects.success` config on the handler. | |
| In SSR mode, the success URL is fixed to the handler callback. The final redirect after that callback is controlled by the `redirects.success` config on the handler. |
Do a general grammar check as well please?
|
|
||
| ## Session client {% #session-client %} | ||
|
|
||
| For per-request operations scoped to the current user (reading their data, calling APIs on their behalf) call `createSessionClient` from the framework helper. It returns a `node-appwrite` client already authenticated with the session cookie, ready to use in server components, loaders, and server functions. |
There was a problem hiding this comment.
| For per-request operations scoped to the current user (reading their data, calling APIs on their behalf) call `createSessionClient` from the framework helper. It returns a `node-appwrite` client already authenticated with the session cookie, ready to use in server components, loaders, and server functions. | |
| For per-request operations scoped to the current user (reading their data, calling APIs on their behalf), call `createSessionClient` from the framework helper. It returns a `node-appwrite` client already authenticated with the session cookie, ready to use in server components, loaders, and server functions. |
| ## Next.js {% #handler-next %} | ||
|
|
||
| ```ts | ||
| // app/api/appwrite/[...appwrite]/route.ts | ||
| import { createAppwriteHandlers } from "@appwrite.io/react/handlers/next"; | ||
|
|
||
| export const { GET, POST } = createAppwriteHandlers({ | ||
| endpoint: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!, | ||
| projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!, | ||
| apiKey: process.env.APPWRITE_API_KEY!, | ||
| basePath: "/api/appwrite", | ||
| }); | ||
| ``` | ||
|
|
||
| ## TanStack Start {% #handler-tanstack %} | ||
|
|
||
| ```ts | ||
| // src/routes/api/appwrite/$.ts | ||
| import { createFileRoute } from "@tanstack/react-router"; | ||
| import { createAppwriteHandlers } from "@appwrite.io/react/handlers/tanstack"; | ||
|
|
||
| export const Route = createFileRoute("/api/appwrite/$")({ | ||
| server: { | ||
| handlers: createAppwriteHandlers({ | ||
| endpoint: import.meta.env.VITE_APPWRITE_ENDPOINT, | ||
| projectId: import.meta.env.VITE_APPWRITE_PROJECT_ID, | ||
| apiKey: process.env.APPWRITE_API_KEY!, | ||
| basePath: "/api/appwrite", | ||
| }), | ||
| }, | ||
| }); | ||
| ``` |
There was a problem hiding this comment.
We should use tabs for such examples
There was a problem hiding this comment.
Also, should we add React Router and maybe even Astro (since you can use React components there)?
2 participants
Adds the /docs/products/auth/react hub, rewrites the React, Next.js, and TanStack Start quickstarts to use @appwrite.io/react, and ships an announcement post under blog/post/announcing-appwrite-react-library.
Also updates /docs/sdks and adds a "React library" entry to the Auth sidebar.