DEV Community

Cover image for Firebase + Vue.js Role Based Authentication & Authorization
Raja Tamil
Raja Tamil

Posted on • Edited on

Firebase + Vue.js Role Based Authentication & Authorization

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

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.

Continue Reading...

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay