npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jl-vue-oidc-client

v1.0.10

Published

Wrapper around oidc-client-js to to better work in a Vue application with Vue Router integration.

Downloads

239

Readme

jl-vue-oidc-client

This is a wrapper around oidc-client-js to better work in a Vue application with Vue Router integration.

Installation

NPM

npm install jl-vue-oidc-client

Yarn

yarn add jl-vue-oidc-client

Usage

See the wiki for quick docs.

Running the sample

Go into either the vue2 or vue3 folder. Run it with the typical install and run steps like below:

npm install

NOTE: this page describes v1 versions.

This lib is meant to be used in a Vue project with Vue Router. If you're not using router functionality then this lib may be of limited use. Typescript typings are included as well.

Using the lib

Both Vue 2 and Vue 3 are supported. Choose either import-from paths for the appropriate version like below.

import { createOidcAuth, SignInType } from 'vue-oidc-client/vue2-oidc';
// or
import { createOidcAuth, SignInType } from 'vue-oidc-client/vue3-oidc';

Creating an Auth Instance

Assuming your app will be hosted on the url https://mydomain.com/myapp/, then you can import the lib and create an instance of it like the example below.

import { createOidcAuth, SignInType } from 'vue-oidc-client/vue2-oidc';

// note the ending '/'
const appUrl = 'https://mydomain.com/myapp/';

// SignInType could be Window or Popup
var mainOidc = createOidcAuth('main', SignInType.Window, appUrl , {
  authority: 'https://demo.identityserver.io/',
  client_id: 'implicit',
  response_type: 'id_token token',
  scope: 'openid profile email api'
});

The last parameter is the same configuration object for oidc-client's UserManager as described in its configuration section.

Redirect Urls

The lib defines these default redirect urls if you don't define them in the config object. Use the formats below when registering your app with an openid connect provider if using the default paths.

// authName and appUrl are the values passed in createOidcAuth()

// register these as the allowed redirect urls with the provider
`${appUrl}/auth/callback`;
`${appUrl}/auth/silent-signin`;
`${appUrl}/auth/signoutpop`;

// also register these as the logout redirect url 
// (or as normal redirect urls if not separately available)
`${appUrl}`;
`${appUrl}auth/signoutpop`;

Router Integration

When there's a route that needs to be protected with an oidc instance, add its authName to the route's meta property like below (note the use of history mode)

const router = new Router({
  mode: 'history',
  routes: [
    ...
    {
      path: '/secret',
      name: 'secret-route',
      meta: {
        authName: mainOidc.authName
      },
      ...
    }
  ]
});

After you've created the router instance, call the useRouter() method to generate the callback handler routes and navigation guards.

mainOidc.useRouter(router);

App Start

Before you create your root Vue instance, you need to call the startup() method and wait until it's done. This is required to load existing user info or handle redirects on first page load. If the promise returns true then it's ok to create the Vue instance.

mainOidc.startup().then(ok => {
  if (ok) {
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app');
  }
});

Using it in Vue Components

The auth instance provides properties related to current user or initial config that you can use in various Vue components. These properties are reactive so the component will be notified if they change.

mainOidc.isAuthenticated; // if logged in
mainOidc.accessToken;     // if applicable and valid
mainOidc.userProfile;     // user claims object

mainOidc.appUrl;   // value passed in createOidcAuth()
mainOidc.authName; // value passed in createOidcAuth()

The auth instance also provides these additional methods:

  • signIn()
  • signOut()
  • startSilentRenew()
  • stopSilentRenew()

Events

This library exposes the user manager events objects from the underlying oidc-client library. See the events docs on what it supports. You can hook them like this:

mainOidc.events.addUserLoaded(function(user) {
  console.log('user loaded', user)
  // you can interact with your Vuex store if you want to save some details
})

mainOidc.events.addUserSignedOut(function() {
  console.log('user signed out');
})