Package Exports

@zitadel/react
@zitadel/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zitadel/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ZITADEL React SDK

Authenticate your ZITADEL users within your React applications.

NPM Version NPM License

Getting Started

Check out the docs on how to integrate ZITADEL into your existing React application.
Create a new React application with ZITADEL integration from scratch by following the example at ZITADEL React example application.

Features

The NPM package @zitadel/react wraps the NPM package oidc-client-ts. All oidc-client-ts features are available and the whole configuration can be overridden.

The following features are added to oidc-client-ts

@zitadel/react defaults as much configuration as possible.
@zitadel/react provides a simple way to check for user roles.

The following is an example for a minimal OIDC configuration:

const zitadelAuth = createZitadelAuth({
  authority: `${myZITADELInstancesOrigin}`,
  client_id: `${myApplicationsClientID}`,
});

The following defaults apply:

The OIDC Code Flow with PKCE is used for authentication at ZITADEL.
ZITADELs user info endpoint is called to enrich the user profile.
The access token is refreshed automatically by default before it expires.
If you specify a project_resource_id, the scopes for retrieving the users roles from the user info endpoint are added automatically. You can conveniently use zitadelAuth.hasRole("someRoleKey").