Vue 3 OIDC (OAUTH) demo

This project demonstrates how to use OIDC in a Vue.js 3 application.

Note: Running oidc-client-ts in web browser is not the best option, better to use BFF (see this video that explains it)

Libraries / frameworks

• Quasar - UI Library (can be any UI framework)

• Pinia - State management

• oidc-client-ts - Typescript library for OIDC

• jwt-decode - View JWT content payload (optional)

Prerequisites

• Node.js - Build system

• Podman - to deploy docker images (or docker desktop)

• pnpm - Package dependencies (npm will also work)

Identity Provider

For the demo the IDP keycloak is used. Keycloak is deployed in a docker container and configured trough scripts.

Under windows:

StartKeycloakServer.bat

This will start the Keycloak server on port 8080. Open an web browser with http://localhost:8080

• Login as admin with password adminpwd

• Switch from master realm to demo realm

• Create two users:

  • User demo-user-manager with password demo-user-manager and join to group demo-group-manager

  • User demo-user-admin with password demo-user-admin and join group `demo-group-admin'

Build web application

pnpm install # Download dependencies
pnpm run dev # Start webserver on port 9000

Test application

• Open web browser on 'http://localhost:9000'

• Login with created used credentials