Skip to main content

Vue.js

vue

Vue.js is a JavaScript framework for building user interfaces that is simple, flexible, and versatile. Integrate authentication to your Vue.js application easily by using the zitadel-vue SDK

Resources​

Vue SDK​

The zitadel-vue SDK is a wrapper around the vue-oidc-client and abstracts the handling of specific configurations for ZITADEL.

The following features are covered by the SDK:

  • Authenticate your user with ZITADEL using OIDC
  • Requesting ZITADEL userinfo endpoint to get user data
  • Refresh Token
  • Requesting User Roles from userinfo
  • Check if user has specified role
  • Logout

The goal is to extend the SDK over the time with the following features:

  • Integrate ZITADEL APIs to read and manage resources
  • Build your own login UI using our Session API

Example Application​

The zitadel-vue repository also includes an Example Application ready to start and show how a Vue application looks like with integrated ZITADEL Login.

What does the Example include:

  • Home Page with Login Button
  • Authenticating user with OIDC PKCE Flow
  • Public Page: Accessible without authentication
  • Private Page: Shows user information of authenticated user, only accessible after login
  • Administrator Page: Only accessible after login and with specific administrator role for the application
  • Logout

Step-By-Step Guide​

The Step-By-Step Guide leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.

After completing the Step-By-Step Guide you will have:

  1. Example Web Application with integrated ZITADEL Login
  2. Example page accessible by authenticated user showing retrieved user information
  3. Example administrator page accessible by user with administrator role
  4. Logout
  5. Correct setup for your application in ZITADEL

View Example App