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

msal-vue

v1.1.0

Published

Vue plugin for MSAL 2 and up (supports both Vue2 and Vue3)

Downloads

235

Readme

msal-vue

MSAL Layer for Vue2 and Vue3

By Braedon Wooding

Because the alternatives are pretty mediocre... this is a very simple layer that has;

  • Typescript support
  • Error handling (i.e. if popup fails you can spawn a button to trigger popup, which is more likely to work if you are in some browsers)
  • Amongst just a cleaner implementation with less heavy dependencies (no lodash/axios dependency, only msal-browser)

It however, is very lite in terms of extensive features, and doesn't explicitly support things like MSGraph.

Installation

Add the msal-vue dependency to your project using yarn or npm. We require a peer dependency of Vue3.

npm install msal-vue

or

yarn add msal-vue

We support both Vue2 & Vue3 through the library vue-demi, so there is no code changes required to support either.

Usage

Vue2

import { MsalPlugin } from 'msal-vue'

Vue.use(MsalPlugin, {
    auth: {
        clientId: '<client id>',
        authority: '<url>',
        redirectUri: '<url>'
    },
    cache: {
        cacheLocation: 'localStorage', // Options are localStorage, sessionStorage, memoryStorage
    },
});

new Vue({
  // ... vue options as usual
})

Vue3

import App from "./App.vue";
import { createApp } from "vue";
import { MsalPlugin } from 'msal-vue'

const app = createApp(App);
// ...

app.use(MsalPlugin, {
    auth: {
        clientId: '<client id>',
        authority: '<url>',
        redirectUri: '<url>'
    },
    cache: {
        cacheLocation: 'localStorage', // Options are localStorage, sessionStorage, memoryStorage
    },
});

app.mount("#app");

Configuration is as follows here: Browser Configuration.

To authenticate it's as simple as follows.

// Optional scope set can be passed
// default is new ScopeSet(['user.read', 'openid', 'profile', 'email']\
await this.$msal.loginPopup();
// returns an AuthenticationResult which is a standard type in MSAL
// details here: https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_common.html#authenticationresult
// but most likely you'll just want to access the `account`

// at any time you can request for it to acquire a new token (in case of 401's)
// as follows... takes in an optional scope set
// default is just new ScopeSet(['user.read']) though
await this.$msal.acquireToken();
// (just returns the access token)

// you can access the user at any time through `.user()`
const user = this.$msal.user();

// are we authenticated?
if (this.$msal.isAuthenticated()) {
  // we can finally also forcefully logout
  this.$msal.logout();
}

That covers every bit of functionality in this. The code itself is also quite readable and overall is just a light layer ontop of msal.

Advanced Usage

You can access the underlying MSAL library through the .instance getter. This gives you full access to MSAL.

Nuxt Usage

No clue, I don't use Nuxt; happy for someone to come along and add information here, I doubt it's very complicated (just don't have time to test).

Contributions

I don't want to maintain a massive library here, so I will be cautious about accepting massive PRs that add extra features such as MS Graph support and so on.