Authenticate your ZITADEL users within your React applications.
- 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.
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").