Solid SDK

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

SPA proxy requirement

Solid apps 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-solid

npm install @zitadel/sdk-solid

yarn add @zitadel/sdk-solid

Setup

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

src/App.tsx

vite.config.ts

.env.local

.env.example

package.json

Configure Zitadel once, then render login and logout widgets:

import { ZitadelLogin, ZitadelLogout, configureZitadel } from "@zitadel/sdk-solid";

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

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

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

The widget's flow events surface as optional 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.

Solid SDK

Install

Setup

Runtime model

Verify

See also

On this page