Package Exports

@zitadel/vue
@zitadel/vue/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/vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ZITADEL Vue SDK

Authenticate your ZITADEL users within your Vue applications.

NPM Version NPM License

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.