@zitadel/vue

ZITADEL Vue SDK

Authenticate your ZITADEL users within your Vue applications.

Getting Started

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

Features

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

The following features are added to vue-oidc-client

• @zitadel/vue defaults as much configuration as possible.
• @zitadel/vue 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}`,
   organization_id: `${myApplicationsOrganizationID}`, // optional
})

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

Optional:

• add an organization_id to register and login users directly in the organization scope.