Firebase + Vue.js Role Based Authentication & Authorization

#javascript #firebase #vue #webdev

In this article, you’re going to learn how to set user roles using Auth Custom Claims and store user data to the Cloud Firestore when a new Firebase user account is created.

Then, I will be showing you how to guard vue routes based on user role when signing in.

Finally, I will teach you how to get all the user accounts at once when the signed-in user has admin privileges and change user roles using Firebase callable function.

Here are the 3 roles:

The admin role will have access to all the users stored on the database and will be given permission to change user roles using Security Rules.
The Driver role will have access to Driver View.
The customer role will have access to Customer View and it will be set as the default role as most of the users will be under this role.

Sounds interesting…let’s get learning!

• Up and Running Vue Project
• Create A Firebase User Account
• Add Admin Auth Custom Claims
• Login User
• Auth Guard for Authorization
• Customer / Driver View
• Change User Roles

Up and Running Vue Project

I have created a starter project using vue cli webpack and created five page-based components under src/views folder as well as routes for them.

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Admin from '@/views/Admin'
import Driver from '@/views/Driver'
import Customer from '@/views/Customer'

Vue.use(Router)

let router = new Router({
   routes: [{
         path: '/register',
         name: 'register',
         component: Register,
         meta: {
            guest: true
         }
      },
      {
         path: '/login',
         name: 'login',
         component: Login,
         meta: {
            guest: true
         }
      },
      {
         path: '/admin',
         name: 'admin',
         component: Admin,
         meta: {
            auth: true
         }
      },
      {
         path: '/driver',
         name: 'driver',
         component: Driver,
         meta: {
            auth: true
         }
      },
      {
         path: '/customer',
         name: 'customer',
         component: Customer,
         meta: {
            auth: true
         }
      },
   ],
})
export default router