Firebase Vuetify Auth

Firebase Vuetify Auth is a package providing user authentication against Firebase auth API for VUE application using Vuetify Material Design layout.

Functionality:

• User authentication - app Sign In
• User registration - app Register
• Email verification for new accounts (required to gain access to the app)
• 3rd party authentication provider integration (Google, Facebook, Phone text message)

Requirements

Current master branch supports Vue 3 application. For Vue 2 please see vue2 branch.

This package assumes your VUE project is already integrated with Firebase & Vuetify. Example integration:

The Firebase config file, example: ./src/middleware/firebase is created to initiate Firebase Modular v9 SDK

example:

import { initializeApp } from "firebase/app"

const config = {
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
  apiKey: process.env.VUE_APP_FIREBASE_APIKEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING,
  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
}

const app = initializeApp(config)

export default app

Additionally, please ensure that you have installed the mdi/fonts package.

example of integration:

import "@mdi/font/css/materialdesignicons.css"

add this into your vuetify.js

Install

npm i @nerd305/firebase-vuetify-auth

Setup

STEP 1: Update your main.js app file

This example assumes that you're using vue-router and pinia packages with your app, so we initialize VUE class by passing in router, store & vuetify objects.

import { createApp } from "vue"
import { createPinia } from "pinia"

import App from "@/App"
import router from "@/router"
import vuetify from "@/plugins/vuetify"
import AuthGuard from "@nerd305/firebase-vuetify-auth"

import firebase from "@/middleware/firebase"
import { getAuth } from "firebase/auth"

const authGuardSettings = {
  debug: true, // enable debug messages in console log
  session: "local", // session persistance

  router, // routes
  firebase, // pass on firebase middleware app init

  saml: false, // allow authentication with SAML
  saml_text: "Login with OKTA", // text for large login button
  saml_provider_id: "saml.okta", // firebase provider ID for SAML

  email: true, // allow authentication with email
  phone: false, // allow authentication with phone
  google: true, // allow authentication with gmail account
  facebook: false, // allow authentication with facebook account

  verification: false, // require user email to be verified before granting access
  registration: true, // allow new user registrations
}

// reload VUE app on Firebase auth state change
const app = createApp(App)

app.config.productionTip = false

app.use(createPinia())
app.use(router)
app.use(vuetify)
app.use(AuthGuard, authGuardSettings)
app.mount("#app")

STEP 2: Add AuthenticationGuard to your App.vue template

Update your App.vue to include global AuthGuard component.

This component will monitor Firebase user auth state and open a fullscreen modal dialog with login screen if user is not autthenticated.

    [ ... ]
    <AuthenticationGuard />
  </v-app>
</template>

STEP 3: Update vue router to protect desired routes

Example of router.js implementation.

import { createWebHistory, createRouter } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: "Home",
      path: "/",
      component: () => import("@/views/HomePage.vue"),
      meta: { requiresAuth: true },
    },
    {
      name: "Public",
      path: "/public",
      component: () => import("@/views/PublicRoute.vue"),
    },
    {
      name: "Protected",
      path: "/protected",
      meta: { requiresAuth: true },
      component: () => import("@/views/ProtectedRoute.vue"),
    },
  ],
})

router.beforeEach(guard)

export default router

add meta: { requiresAuth: true } for any route that would require authentication.

That's it!

After following implementation instruction requests to protected views, should render a login / registration view, unless user is already logged into the application.

For more usage examples (how to log in/sign out and so on) please check the package source code

Available settings

Prop	Type	Default	Description
router	Object	null	VUE router
firebase	Object	null	Firebase middleware - initialized app
session	String	"local"	Firebase auth state session persistence, see: https://firebase.google.com/docs/auth/web/auth-state-persistence
verification	Boolean or array	true	require email verification to sign in for all accounts or for specific domains in array
registration	Boolean	true	allow new user registrations
phone	Boolean	true	allow users to singin using phone number
google	Boolean	true	allow users to singin using gmail
facebook	Boolean	true	allow users to singin using facebook
title	String	"Authenticate"	authentication prompt title
subtitle	String	"Firebase Vuetify Authentication NPM package"	authentication prompt subtitle
icon	String	"mdi-brightness-7"	authentication prompt icon
iconColor	String	"orange"	authentication prompt icon