vue-oidc-client

1.0.0-alpha.5 verified Sat Apr 25 auth: no javascript

Vue.js wrapper around oidc-client (or oidc-client-ts) for integrating OpenID Connect authentication with Vue Router. Current version is 1.0.0-alpha.5 (pre-release), with earlier stable v0.4.x for Vue 2. Supports Vue 2 and Vue 3 via separate builds. Provides Vue components like OidcCallback and OidcSilentCallback, composables/inject functions for user state, and event hooks. Key differentiator: seamless Vue Router integration vs using oidc-client directly. Note that 1.0.0-alpha.x has breaking changes from v0.4.x, especially in imports and event handling.

Common errors

error Cannot find module 'vue-oidc-client' or its corresponding type declarations. ↓

cause Missing or outdated type definitions; npm package may not include types for v1.0.0-alpha.x builds.

fix

Install the latest alpha: npm install vue-oidc-client@1.0.0-alpha.5 . Also ensure tsconfig includes 'moduleResolution': 'node'.

error Property '$oidc' does not exist on type 'ComponentCustomProperties'. ↓

cause TypeScript not aware of the injected $oidc property; global augmentation missing or not imported.

fix

Add 'import 'vue-oidc-client/dist/types/vue-shim'' in your main.ts or create a declaration file for Vue.$oidc.

error Failed to mount component: template or render function not defined. ↓

cause Using wrong import for OidcCallback or OidcSilentCallback; importing from subpath instead of main package in v1.0.0-alpha.x.

fix

Use import { OidcCallback } from 'vue-oidc-client' (not from a subpath).

error Uncaught (in promise) Error: no response_type set ↓

cause Missing or incorrect 'response_type' in OIDC configuration; defaults may not be set.

fix

Explicitly set response_type: 'code' in plugin configuration.

Warnings

breaking Import paths changed in v1.0.0-alpha.x: components and composables now exported from main package instead of subpaths. ↓

fix Use named imports from 'vue-oidc-client' directly (e.g., import { OidcCallback } from 'vue-oidc-client').

breaking Event handling API changed in v1.0.0-alpha.x: events are now emitted via Vue's event system instead of oidc-client's UserManager events. ↓

fix Listen for events using Vue's $on or composables; refer to the new event names in the documentation.

deprecated Vue 2 support is deprecated in v1.0.0-alpha.x; the package is primarily aimed at Vue 3. ↓

fix For Vue 2, use v0.4.x (stable) or consider migrating to Vue 3.

gotcha oidc-client-ts (not oidc-client-js) is now the peer dependency for v1.0.0-alpha.x; oidc-client-js is deprecated. ↓

fix Install oidc-client-ts as a dependency: npm install oidc-client-ts

gotcha The plugin must be installed before router is used; otherwise, navigation guards may not work. ↓

fix Ensure app.use(VueOidcClient) is called before app.use(router).

Install

npm install vue-oidc-client

yarn add vue-oidc-client

pnpm add vue-oidc-client

Imports

default
wrong
```
import { VueOidcClient } from 'vue-oidc-client'
```
correct
```
import VueOidcClient from 'vue-oidc-client'
```
Default import for the main plugin object. In v1.0.0-alpha.x, the plugin is exported as default; named import works only if you import specific submodules.
OidcCallback
wrong
```
import OidcCallback from 'vue-oidc-client/OidcCallback'
```
correct
```
import { OidcCallback } from 'vue-oidc-client'
```
Named export for the callback component. In v1.0.0-alpha.x, these components are exported from the main package; direct subpath imports may not work.

OidcSilentCallback

wrong

import OidcSilentCallback from 'vue-oidc-client/dist/OidcSilentCallback'

correct

import { OidcSilentCallback } from 'vue-oidc-client'

Named export for the silent callback component. Avoid deep imports from dist folder.

Quickstart

Shows Vue 3 setup with router and OIDC client plugin, including callback route and minimal configuration.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import VueOidcClient, { OidcCallback } from 'vue-oidc-client';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/callback', component: OidcCallback },
  ],
});

const app = createApp({});
app.use(VueOidcClient, {
  authority: 'https://your-identity-server',
  client_id: 'your-client-id',
  redirect_uri: window.location.origin + '/callback',
  response_type: 'code',
  scope: 'openid profile',
});
app.use(router);
app.mount('#app');