Qwik SDK

The Qwik SDK is the SPA wrapper for the shared Zitadel login and logout widgets.

SPA proxy requirement

Vite-based Qwik 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-qwik

npm install @zitadel/sdk-qwik

yarn add @zitadel/sdk-qwik

Setup

The CLI configures the Vite proxy, writes app-level auth UI, adds environment files, and installs the SDK.

src/routes/login/index.tsx

vite.config.ts

.env.local

.env.example

package.json

Configure Zitadel once, then render login and logout widgets:

import { component$ } from "@builder.io/qwik";
import { ZitadelLogin, ZitadelLogout, configureZitadel } from "@zitadel/sdk-qwik";

const project = configureZitadel({
  projectId: import.meta.env.VITE_ZITADEL_PROJECT_ID,
  proxyPath: "/__nextgen",
});

export const LoginPage = component$(() => {
  return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
});

export const ProfilePage = component$(() => {
  return <ZitadelLogout project={project} postSignOutUrl="/login" />;
});

The widget's flow events surface as optional QRL callbacks: onFlowStep$, onFlowInput$, onFlowComplete$, and onFlowError$.

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.

Qwik SDK

Install

Setup

Runtime model

Verify

See also

On this page