SDKs
Framework packages and shared client surfaces for the Zitadel preview.
The preview publishes framework SDKs, shared UI components, and the generated API client in one alpha package train. Pick an SDK by how your app renders: server frameworks proxy and verify sessions in middleware, SPA frameworks render the same auth widgets behind a same-origin proxy.
Start with the CLI
Prefer npx @zitadel/cli@alpha setup for app setup — it scaffolds the right package and proxy for your framework. Use these SDK pages when reviewing generated files, customizing routes, or integrating manually.
Server frameworks
Auth runs in framework middleware: it proxies /__nextgen/*, verifies the session, and guards protected routes server-side.
Next.js
Middleware, same-origin proxying, server auth, and App Router helpers.
Nuxt
Nitro middleware, runtime config, plugins, and server-side session access.
SPA frameworks
The same shared auth widgets, rendered client-side. They need a same-origin proxy for /__nextgen/* — the CLI wires one for local dev; production deployments supply their own.
React
Client-side login/logout widgets for Vite and other SPA deployments.
Vue
Vue 3 wrappers around the shared login/logout components.
Angular
Standalone Angular components for the shared Zitadel auth UI.
Building blocks
Lower-level packages the framework SDKs are built on. Reach for these to embed the widgets directly or call the API with a typed client.
Components
Lit web components and the login orchestrator used by every framework SDK.
API client
Generated TypeScript endpoint functions, models, Zod schemas, and MSW helpers.
Choosing an SDK
All packages ship on the @alpha dist-tag and move together as one train.
| Framework | Package | Rendering | Same-origin /__nextgen/* proxy | CLI scaffolds |
|---|---|---|---|---|
| Next.js | @zitadel/sdk-next | Server (App Router) | Built into the SDK middleware | routes + middleware.ts |
| Nuxt | @zitadel/sdk-nuxt | Server (Nitro) | Nitro server middleware | pages + server middleware |
| React | @zitadel/sdk-react | SPA | Vite dev proxy / your deploy proxy | Vite proxy + auth UI |
| Vue | @zitadel/sdk-vue | SPA | Vite dev proxy / your deploy proxy | Vite proxy + auth UI |
| Angular | @zitadel/sdk-angular | SPA | dev-server proxy / your deploy proxy | proxy config + components |
| Components | @zitadel/components | Web components | n/a (wrapped by an SDK) | — |
| API client | @zitadel/api | n/a | n/a | typed client |
The same-origin proxy is the one concept shared by every SDK. See SDK proxy for why /__nextgen/* must be same-origin and how the project service key is attached.