Registry / auth-security / vue-oidc-client

vue-oidc-client

library1.0.0-alpha.5jsnpmunverified

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.

auth-security web-framework

npm install vue-oidc-client

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-OIDC-CLIENT

vue-oidc-client

auth-securityjavascriptv1.0.0-alpha.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import VueOidcClient from 'vue-oidc-client'

✗ 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

✓ import { OidcCallback } from 'vue-oidc-client'

✗ import OidcCallback from 'vue-oidc-client/OidcCallback'

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

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

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

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

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');

Debug

Known issues

breakingImport 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').

affects: >=1.0.0-alpha.1

breakingEvent 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.

affects: >=1.0.0-alpha.1

deprecatedVue 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.

affects: >=1.0.0-alpha.1

gotchaoidc-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

affects: >=1.0.0-alpha.1

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

affects: >=0.0.0

Errors

Common errors & fixes

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

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'.

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

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.

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

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

Uncaught (in promise) Error: no response_type set

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

fix

Explicitly set response_type: 'code' in plugin configuration.

Upgrade

Version history

1.0.0-alpha.5latest on npm

Audit

Dependencies

oidc-client-tsrequiredCore OIDC/OAuth2 client implementation; vue-oidc-client wraps this library.

vue-routerrequiredRequired for route-based authentication flow (e.g., redirect and callback handling).

Agent activity

29 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/soukoku/vue-oidc-client ↗

packagehttps://www.npmjs.com/package/vue-oidc-client ↗