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

vue-firebase-auth-plugins

v2.2.1

Published

Used for protecting routes requiring authentication

Downloads

13

Readme

vue-firebase-auth-plugins

Plugins that can be installed in your Vue project for authentication to help with routing and waiting for user authentication to complete before rendering a view.

AuthGuard Vue Router Middleware

To be used with Firebase Authentication, this helps protect certain views that require authentication. AuthGuard will intercept every routing request, check for authentication, and redirect the request if the user is not authenticated for views requiring authentication. Setup is straightforward:

// Install the AuthGuard on the router you want protected
import {AuthGuard} from "vue-firebase-auth-plugins";
AuthGuard.install(routerInstance, Firebase.auth(), { postAuthPath: "/dashboard" });

Because this hooks into Firebase.Auth directly, no additional wiring is needed to make it work. It will monitor Firebase.Auth for changes to authentication and will automatically apply the routing logic to respond.

Once installed, AuthGuard will look for meta.requiresAuth on your routes to determine whether the route is protected or not.

var routes = [
    { path: '/login', component: LoginView, name: "Login"},
    { path: '/dashboard', component: DashboardView, name: "Dashboard", meta: { requiresAuth: true } },
]

By default, AuthGuard will assume a route requires auth. This can be changed by specifying assumeIfUndefined on the options object passed into AuthGuard.install

// In this example routes will be presumed public and only require auth if specified
AuthGuard.install(routerInstance, Firebase.auth(), { postAuthPath: "/dashboard", assumeIfUndefined: "public" });

Installation

If you are using ES6+, you can simply use import "vue-firebase-auth-plugins". But if you need to use it in an ES5 environment, or Node.js, you'll want to use /dist/index.es5.js when importing/requiring.

// If you are using require/ES5
const { AuthGuard } = require("vue-firebase-auth-plugins/dist/index.es5.js");

// Or in ES6+
import Vue from "vue";
import VueRouter from "vue-router";
import { AuthGuard } from "vue-firebase-auth-plugins";
import firebase from "firebase/app";
import "firebase/auth";

var myRouter = new VueRouter(...);

Vue.use(AuthGuard, { auth: firebase.auth(), router: myRouter });

Usage

You can specify whether or not a specific route requires authentication on the meta object on the route data object.

var myRouter = new VueRouter({
    { path: '/login', component: LoginView, name: "Login", meta: { requiresAuth: false } },
});

IMPORATNT: Ensure that this is the first plugin or middleware to touch Vue Router to make sure it prevents unwanted navigation

How it Works

Because there's a variable delay in waiting to know if we are actually authenticated (or have a session we can re-use), the AuthGuard starts by suspending routing until know.

Changing the default assumption

If most of your app requires authentication, the plugin works out of the box for your setup. If most of your app does not require authentication, you'll want to flip the default from "auth" to "public". You can just do this before you call Vue.use.

AuthGuard.config.assumeIfUndefined = "public";

You only need to specify whether a route requires authentication, or is public, if that route differs from the default assumption. E.g. if the default is public, only specify which routes require authentication, and vice-versa.

VueUserPlugin

The Vue User Plugin makes it easier to check for authenitcation, to react to auth change events, and helps you to wrap behavior which depends on authentication.

// Install VueUserPLugin using the normal Vue plugin installation API
import {VueUserPlugin} from "vue-firebase-auth-plugins";
Vue.use(VueUserPlugin, { auth: Firebase.auth() });

Usage

// All Vue instances created after installation will have user available
{
    data() { return {...} },
    userLoaded() {
        console.log("UID:", this.user.auth.uid);
    }
}

postAuthPath

You can set the postAuthPath to a string, or you can use a function that resolves to the path, in case it needs to be dynamically resolved. The function will be called with the router as the first argument and the resolved user as the second.

It supports asynchronous functions in case you need to a do a lookup or fetch some additional data first.

Changes in 2.x

User Transformation

In previous versions of the vue-firebase-auth-guard library, there was a pattern to transform or wrap the return Firebase auth object. This created a confusing pattern for developers unfamiliar with what the tool was doing, and created ambiguity between what Firebase Auth provided and what was available on our model.

We no longer transform or "wrap" the underlying firebase auth object. It is exposed directly and separately. We also move away from efforts to replicate, simplify, or wrap any features or data offered by Firebase Auth.

// Before
console.log("UID:", this.user.uid);

// After
console.log("UID:", this.user.authData.uid);

Instead of wrapping or transforming the user auth, we now affix a "model" to the "user" object returned by VueUserPlugin, like so:

// Before
Vue.use(VueUserPlugin, { auth: Firebase.auth(), transformer: (auth) => userAuthPlusModel });

// After
Vue.use(VueUserPlugin, { auth: Firebase.auth(), modelBuilder: (userAuth) => userModel });

To add more specificty and clarity, userLoaded has been changed to userModelChanged. So inside of calling components, you'll write your function like this now:

userModelChanged( user ) {
    // Do something with the user
}

Likewise, this also means that when the user is logged out the model will be cleared and userModelChanged will be called to indicate the model is gone.

onCheckedForSession

You can call onCheckedForSession with a callback that will execute right after the router has resolved to a new route based on the status of the user. This will usually mean the login is visible or the screen the user had initially typed into their browser will load if they're logged in.