Firebase + Vue.js Role Based Authentication & Authorization
Tags: javascript, firebase, vue, webdev
Published: 2021-03-01 17:03:07

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](https://softauthor.com/wp-content/uploads/2019/11/vuejs-firebase-role-based-authentication-authorization-1-677x1024.png)


Sounds interesting…let’s get learning!

• [Up and Running Vue Project](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#up-and-running-vue-project)
• [Create A Firebase User Account](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#create-a-firebase-user-account)
• [Add Admin Auth Custom Claims](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#add-admin-auth-custom-claims)
• [Login User](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#login-user)
• [Auth Guard for Authorization](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#vue-auth-guard-for-authorization)
• [Customer / Driver View](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#customer-driver-view)
• [Change User Roles](https://www.softauthor.com/firebase-vuejs-role-based-authentication-authorization/#change-user-roles)

## Up and Running Vue Project

{% youtube 3A57dcz8A8E %}

I have created a [starter project using vue cli webpack](https://www.softauthor.com/getting-started-with-vue-js/) and created five page-based components under src/views folder as well as routes for them.

![Alt text of image](https://softauthor.com/wp-content/uploads/2019/11/vue-js-project-folder-structure.png)

router/index.js

```javascript
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

```
Run the project.

```javascript
npm install
npm run dev

```

## 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...](https://softauthor.com/firebase-vuejs-role-based-authentication-authorization/)