DEV Community

loading...
Cover image for Firebase + Vue.js ← Role Based Authentication & Authorization

Firebase + Vue.js ← Role Based Authentication & Authorization

hirajatamil profile image Raja Tamil ・2 min read

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:

  1. 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.
  2. The Driver role will have access to Driver View.
  3. 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.

Alt text of image

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

IMAGE ALT TEXT HERE

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.

Alt text of image

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

Enter fullscreen mode Exit fullscreen mode

Run the project.

npm install
npm run dev

Enter fullscreen mode Exit fullscreen mode

Create A Firebase User Account

Go ahead and create a project on the Firebase Console and include the initialization code inside the main.js file.

Discussion (0)

pic
Editor guide