Svelte SDK
Client-side Svelte 5 wrappers for the Zitadel login and logout components.
The Svelte SDK is the SPA wrapper for the shared Zitadel login and logout widgets, built for Svelte 5.
SPA proxy requirement
Vite-based Svelte SPAs do not have server middleware by default. The CLI configures a Vite dev proxy; production deployments need an equivalent same-origin proxy for /__nextgen/*. See SDK proxy.
Install
pnpm add @zitadel/sdk-svelteSetup
The CLI configures the Vite proxy, writes app-level auth UI, adds environment files, and installs the SDK.
src/App.svelte
vite.config.ts
.env.local
.env.example
package.json
Runtime model
The widgets call the configured proxy path on the same origin.
In local Vite development, the generated proxy forwards
/__nextgen/* to Zitadel and attaches the project service key only on the session exchange.In production, the same-origin path comes from a platform rewrite or minimal worker (see SDK proxy) — or intentionally configure a backend URL for local-only experiments.
Verify
- Run the Vite app with generated environment variables.
- Register or sign in through the rendered widget.
- Confirm logout returns to the configured login path.
- In browser automation, use shadow-DOM-aware locators because the native inputs live inside shared web components.
See also
- SDK proxy — why SPAs need a same-origin
/__nextgen/*proxy and how to run one in production. - Components — the shared web components these wrappers render.
@zitadel/sdk-sveltesource and the CLI Svelte patcher.