Authentication Workflow in vue.js apps using Firebase 2021

Sushil Kamble

3 min readFeb 6, 2021

Here we will develop an authentication workflow for vue.js apps using firebase and vuetify from scratch

Demo

It's always better to have a look at what we are building. So here is the demo for you.

Visit: https://vueauthfire.web.app/

Github Repository: https://github.com/sushil-kamble/vue-auth-fire

Check with the following credentials

Email Address: test@gmail.com
Password: test@12345

Let's get started

Requirements

The latest version of node
vue-cli (recommended as here we are going to use it)

Configurations

Create a project using vue-cli (vue-router and vuex)

Add vue-router and vuex compulsorily. You can use vue 3 but keep in mind that vuetify was no support for it as of now. Here I am using vue 2 along with vuetify.

Go to the root directory and enter the following commands.

vue add vuetify
npm i firebase

Go to Firebase console. Add Project. In Project Overview, click on the web icon and register the app. Copy firebaseConfig object. Click on Authetication, then on Set up sign-in method . Enable Email/password authentication.

The firebase config object that you have just copied onto your clipboard contains important data about your project. You will finally push this project code to Github,so you don’t want that data to be exposed. So it is recommended to create a .env.local file.

Create a .env.local file in your project's root.
I have created a small project that will speed up this process. Visit env-firebase. Select vue and paste your firebase config there, then click on the green copy button and paste it into .env.local.
Open src/firebase/init.js in your project file.

Firebase handles all the authentication for us. It also handles sessions for users, So that when users refresh the page they will be still logged in. But there is a small problem, it requires some time to fetch the session details and initialize the app, and the vue app loads quickly before that initialization is done which results in some problems. The solution to this problem is to load the vue app after the firebase app gets initialized.

Open src/main.js in your project file.

Setup store. Open store/index.js

Now Finally set up the router. Open router/index.js

If you are using vue 3. This snippets of code will not work. If you want this to work with vue 3. Then have a look at the offical guide of vue 3, vue-router and vuex. Try to replicate above snippets.

You are all set up

Now remaining part is UI design which you can do with ease with the help of vuetify.

If you want to replicate what I have shown you in the above demo.

After following all the above steps.
Go to this repository. Download and extract it.
Copy components & views folder from the extracted folder and replace it with your projects components & views folder.

Just follow the steps in the readme from the repository.