@zitadel/react

ZITADEL React SDK

Authenticate your ZITADEL users within your React applications.

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({
  issuer: `${myZITADELInstancesOrigin}`,
  client_id: `${myApplicationsClientID}`,
  project_resource_id: `${myApplicationsProjectResourceID}`,
});

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").