zitadel-sdk-react SKILL.md skillA
zitadel-sdk-react from zitadel/nextgen is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add zitadel/nextgen/zitadel-sdk-react@git:20261018.decabadPins git:20261018.decabad in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- zitadel/nextgen
- Path
packages/sdk-react/skills/zitadel-sdk-react/SKILL.md- Versions recorded
- 5
- Latest version
- git:20261018.decabad, committed Oct 18, 2026
- First version recorded
- Oct 5, 2026
- Size
- 8,469 bytes
- Repository stars
- 27
- License
- AGPL-3.0
Integrate Zitadel authentication into an existing React app with `@zitadel/sdk-react`. Use when adding Zitadel login, registration, logout, or session handling to a client-side React / Vite SPA or a TanStack (Router/Start) app — wiring the `ZitadelLogin`, `ZitadelLogout`, and `ZitadelSession` auth-UI components into pages you already have.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# @zitadel/sdk-react
React wrappers around the Zitadel auth-UI web components, for client-side SPAs.
## When to use
Use this skill to drop the Zitadel auth UI into an **existing or custom** React
app — your own routes, your own bundler (Vite, TanStack Start, etc.) — by
rendering the SDK's components on your login/profile pages.
If the user instead wants a **fresh** app scaffolded, the CLI does that:
`npx @zitadel/cli@alpha setup --framework react` generates a wired React project. Reach for
this skill when there is already an app to integrate into and the CLI's
scaffolding would overwrite or not fit it.
## Install
```sh
npm install @zitadel/sdk-react@alpha
```
Peer dependencies: `react >=18` and `react-dom >=18`. Requires TypeScript ≥ 5.0 (the published types use `export type *`).
## Integrate
Call `configureZitadel(...)` once before rendering and pass the returned handle
as the `project` prop. The SPA renders after configuration, so the handle is
present when the underlying web component upgrades.
```tsx
import {
ZitadelLogin,
ZitadelLogout,
ZitadelSession,
configureZitadel,
} from "@zitadel/sdk-react";
// Configure once, module scope, before rendering.
…Read the whole file at its exact version.
How to install
mdr add zitadel/nextgen/zitadel-sdk-react@sha256:9057bdcb9b0c3f24The line at the top of this page pins the label git:20261018.decabad, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_2phkolr4f4pgwcgo)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 5 versions of this file, between Oct 5, 2026 and Oct 18, 2026, about one every 3 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261018.decabad latest | 2026-10-18 | decabad | 8,469 B | A | view · diff |
| git:20261018.40470cc | 2026-10-18 | 40470cc | 4,898 B | A | view · diff |
| git:20261018.2f2b873 | 2026-10-18 | 2f2b873 | 4,087 B | A | view · diff |
| git:20261018.bdfca75 | 2026-10-18 | bdfca75 | 4,091 B | A | view · diff |
| git:20261005.46a366f | 2026-10-05 | 46a366f | 4,085 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (8469 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
zitadel/nextgen · 27 stars · license AGPL-3.0 · pushed 2026-10-22 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_2phkolr4f4pgwcgo GET https://markdownregistry.com/api/v1/resolve?ref=zitadel/nextgen/zitadel-sdk-react GET https://markdownregistry.com/api/v1/blob/9057bdcb9b0c3f24a33290d35be2097bf365ec212af22c0f222b08a17eed79e6
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.