@joaomelo/vuetify-fireauth NPM

DON'T USE THIS PACKAGE. VUETIFY DON'T PROVIDE A DOCUMENTED WAY TO CREATE AND PUBLISH COMPONENTS BASED ON THEIR LIBRARY. I COULD NOT RESEARCH ANY WAY TO MAKE THIS WORK AS A NPM PACKAGE. I AM KEEPING THIS ONLY FOR HISTORICAL REASONS.

when the package is imported and run in another app the erro "Cannot read property 'rtl' of undefined" occurs.

in searching for solutions i found these links bellow inspiring. but even so, none offered a clear path.

https://stackoverflow.com/questions/59107674component-mounted-but-template-tags-not-rendered-in-production-environment-but/59123646#59123646 https://github.com/vuetifyjs/vuetify/issues/10198 https://github.com/vuetifyjs/vuetify-loader/issues/70 https://stackoverflow.com/questions/55787921/vuetify-errors-when-loading-a-vue-generated-web-component-into-a-host-parent-tha

my current try is based on using all vuetify components in as dynamic components

Vuetify-fireauth

This package 📦 is a Vue plugin composed of authentication UI components and event management built upon Firebase and Vuetify. It aims to encapsulate auth features providing a more ergonomic experience for developers 🤓.

Important to note that the library is in early development 👶 and misses features that can be considered indispensable to some apps.

Motivation

Firebase and Vue are amazing. The power they give to developers to focus on business needs 🧑‍💼 instead of repeating infrastructure code is liberating. Even so, while building apps with these technologies, I saw myself repeating code for basic apps features. Sign up, log in, logout and auth event control (like protecting and redirecting routes in web apps) are probably the most ubiquitous features on that argument.

If you are already familiar with Firebase auth service you are probably wondering why to use Vuetify-fireauth instead of Firebase UI library. Well, Firebase UI has a very mature code and a lot of capabilities. It is probably the right tool 🧰 for you. But some stuff pulled me to another approach. Mainly:

Reactivity capabilities to leverage Vue strong points.
Encapsulation of the auth system as a whole.
Consistent design across the whole app (if you are using Vuetify).
Ability to disable sign up.

Let's see this in practice in the next sections.

Usage

The library is used as Vue a plugin providing UI components and exposing an auth object with event management capabilities.

Getting Started

As said, the library depends on Firebase and Vuetify. You can find instructions to install both here and here, respectively.

After that is taken care of, you can install the library with npm.

npm install @joaomelo/vuetify-fireauth

To initialize it, you need to import Auth from @joaomelo\vuetify-auth. Then you pass Auth as the first parameter of a Vue.use call, also providing the firebase auth object as the second parameter. Let's follow in real the code:

import * as firebase from 'firebase/app';
import 'firebase/auth';
import Vue from 'vue';
import Auth from '@joaomelo/vuetify-fireauth';

const fireApp = firebase.initializeApp({
    //your firebase project config data
});
const fireauth = fireApp.auth();

Vue.use(Auth, { fireauth });

After Vuetify-fireauth is installed you will have access to three globally available Vue components and an auth object injected in the Vue object and also component instances.

Let's carry on by learning how to use the PageAuth component.

Sign up and Log in

You can use the PageAuth component for a full sign up and login page with a reasonable Vuetify layout. The component will properly register and log in users based on Firebase auth rules.

You can optionally pass it a title string as a prop.

I will show you a working example using the official Vue router library. Let's start by importing our pages and setting all routes.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

// some homepage you made
import PageHome from './page-home'; 
// a loading page or start screen
import PageLoad from './page-load';
// the package login page is already registered
const PageAuth = Vue.component('PageAuth');

const routes = [
    { path: '/', component: PageLoad },
    { path: '/login', component: PageAuth, props: { title: 'Demo' } },
    { path: '/home', component: PageHome }
];

Vue.use(VueRouter);
const router = new VueRouter({ routes });

export default router;

But this code will present the PageLoad component and stay there. To properly react to auth status changes we need to use the auth object.

Vuetify-fireauth plugin injects this auth object in the Vue object and also in vue components instances. The auth object provides the functionality from @joaomelo\fireauth-machine. More about that in the next section.

Changing Routes in a Central Place

Fireauth-machine is a simple package that wraps firebase auth with state machine logic and reactivity capabilities. You can read more at the library GitHub readme page, but I will cover here what is relevant so you don't need to.

The auth object has tree properties. One is the firebase auth object (auth.service), so you can easily access it everywhere in the app. The other two are the current user (auth.user) and the auth status (auth.status). The auth status has three possible values: 'UNSOLVED', 'SIGNIN' or 'SIGNOUT'. Both user and status are reactive and can be leveraged inside Vue components in computed properties, for example.

The auth object also provides a subscribe method so you attach callbacks to be activated every time the user status changes. When called these functions will receive both the current user and status as properties of a payload parameter.

So going back to our router.js file, we can add the route management logic based on auth status using the subscribe method. Let's see.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

// some homepage you made
import PageHome from './page-home'; 
// a loading page or start screen
import PageLoad from './page-load';
// the package login page is already registered
const PageAuth = Vue.component('PageAuth');

const routes = [
    { path: '/', component: PageLoad },
    { path: '/login', component: PageAuth },
    { path: '/home', component: PageHome }
];

Vue.use(VueRouter);
const router = new VueRouter({ routes });

Vue.auth.subscribe(({ status }) => {
    const statusRoutes = {
        UNSOLVED: '/loading',
        SIGNOUT: '/login',
        SIGNIN: '/home'
    };

    const newRoute = statusRoutes[status];
    const oldRoute = router.currentRoute.path;
    if (newRoute !== oldRoute) {
        router.push(newRoute);
    }
});

export default router;

Don't forget to initialize Vuetify-fireauth before setting vue-router. Now our app will behave like this:

Guarding Routes

What you did in the last section will change routes after login and logout, but the user still will be able to reach for all pages typing URLs directly in the browser address bar.

To protect your app, you can count again on the auth object. If you are using vue-router, there is beaforeEach method called every time a route is about to change. Let's extend our previous code with route protection.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

// some homepage you made
import PageHome from './page-home'; 
// a loading page or start screen
import PageLoad from './page-load';
// the package login page is already registered
const PageAuth = Vue.component('PageAuth');

const routes = [
    { path: '/', component: PageLoad },
    { path: '/login', component: PageAuth },
    { path: '/home', component: PageHome }
];

Vue.use(VueRouter);
const router = new VueRouter({ routes });

Vue.auth.subscribe(({ status }) => {
    const statusRoutes = {
        UNSOLVED: '/loading',
        SIGNOUT: '/login',
        SIGNIN: '/home'
    };

    const newRoute = statusRoutes[status];
    const oldRoute = router.currentRoute.path;
    if (newRoute !== oldRoute) {
        router.push(newRoute);
    }
});

router.beforeEach((to, from, next) => {
    const openRoutes = ['/login'];
    const isViolation = !openRoutes.includes(to.path) && Vue.auth.status !== 'SIGNIN';

    if (isViolation) {
        next(false);
    } else {
        next();
    }
});

export default router;

`DialogAuth` Provides a More Personalized Alternative

The DialogAuth contains the same functionality as PageAuth but without any layout. You can embed it in another component to create a personalized login UI for your app.

Here we have a code using DialogAuth to build a page with a Vuetify app bar.

<template>
<div>
    <v-app-bar dense>
        <v-toolbar-title>
            My App Name
        </v-toolbar-title>
    </v-app-bar>
    <v-container>
        <v-row>
            <v-col cols="12" align="center">
                <DialogAuth />
            </v-col>
        </v-row>
    </v-container>
</div>
</template>

<script>
export default {
    name: 'PageLogin'
};
</script>

More Power With PageAuth and DialogAuth Props

Both PageAuth and DialogAuth share two props. The first is the title prop which defaults to an empty string. If a string is passed, it's value will appear above the login/signup region.

The second prop is the boolean disableSignup. The default value is false. If set to true the dialog will only show the login option.

This is useful in scenarios where your app does not accept new users or you want to build your own sing up page.

Just a Simple Logout Button

The last and simplest of the components is the ButtonLogout. Its function is obvious, it will logout the user from the app.

The component has only one prop called showUser. Its default value is false. If set to true the button text will change from Logout to Logout from <username>. Where \<username> will be replaced by the tag extracted from the current user email address.

Keep in mind that ButtonLogout is just a Vuetify v-btn with some functionality. Any canonical v-btn prop passed to ButtonLogout will be applied to the button just as it would happen with a normal v-btn.

Wrapping Up Usage

Recapitulating, vuetify-fireauth is installed as a Vue plugin passing the Firebase auth object as the only parameter.

After that, PageAuth, DialogAuth, and ButtonLogout can be used to provide the auth UI.

The auth object is injected in the Vue object and also Vue component instances can be used to react to auth status changes.

Installing and Running the Demo App

There is a demo app you can play with and explore what I said here. Start by cloning the repository.

git clone https://github.com/joaomelo/vuetify-fireauth.git

Create a demo.env file inside the demo/config folder with the variables assignments bellow. Replace the values with the real ones for your firebase project.

FIREBASE_API_KEY=foobar
FIREBASE_AUTH_DOMAIN=foobar.firebaseapp.com
FIREBASE_DATABASE_URL=https://foobar.firebaseio.com
FIREBASE_PROJECT_ID=foobar
FIREBASE_STORAGE_BUCKET=foobar.appspot.com
FIREBASE_MSG_SENDER_ID=foobar
FIREBASE_APP_ID=1:foobar

Then, install the dependencies and run the start script:

npm install
npm start

Thank you and have fun 🎉.

Backlog and Future Development

I would love to have internationalization, reset password functionality and third-party providers login (Google, Facebook, etc) bring to the package.

Unfortunately, I can't make a commitment to implement those in the near future. I have a daytime job and tree beautiful children to take care of. So...

The good news is this package is completely open-source. Be my guest, do with it anything you like.