How to use Firebase Authentication with Vue

In two previous tutorials, How to install Firebase in Vue.JS Project and Using Vuex and Vue-Router in a Vue Project and Using Environment Variables in Vue.js we started to develop a typical Vue PWA SPA App and I discussed some of the important components and features that help simplify building Vue Apps.

In this post will implement Firebase Authentication features in to our project.

With this all set we can now edit our store.js file to start to make use of the Firebase authentication. If you have following on and continuing to developing on from the code presented in Using Vuex and Vue-Router in a Vue Project and how to split Vuex store into Modules

We are also going to take this opportunity to implement a User Signup Functionality to provide and example of just how easy this is to do so using Firebase.

Import the two firebase references required then define three new actions : login, logout and signUp

The new actions will implement the various methods that are made available via the Firebase API. You will notice that we have wrapped these functions using promises so we can return any errors back to our components to handle. In later tutorial we will implement logging functionality to log any errors to assist with trouble shooting later.

JS

We can also update our router.js to make use of functionality made available via firebase to help protect our routes. We will also need to import the references to Firebase and then make a slight change to our routes guard to make use of the Firebase to check if we have a current user defined before we proceed to the route.

JS

Register page markup

We will add a new view to our application SignUp.vue which we will use to enable the user to create an account. Let’s create a new directory in our views folder which we will call user , which will contain all the user related views in our application.

Shell

I usually make use of MDB Vue Pro Material Design Component Framework to make it easier to Material Design concepts, so if the Mark up looks a little different to what you’re used to check out MDB Vue Pro Material Design Component Framework

HTML

The JavaScript portion of file we import the required MDB Vue Pro Material Design Component Framework we are going to use. We also import our validation module which we will discuss shortly.

The submit method basically performs some validation and if all conditions pass then will dispatch our values to the Vuex-store to be processed. If the process is successful we will redirect the user to Dashboard page.

If there is an error we will display a login unsuccessful error message.

JS

You’ll notice we going to make use of some simple client side validation to ensure that user provides and email address in a valid format.

We also try to enforce some kind of minimum strength on the password. These two functions are provided by a module we are now going to create.

Shell

We going to place our client side validation functions in this module so we have a central repository for reusable validation functions. We are going to make use Regular expressions to validate our strings.

Lets add the following code to our validation-module.js

JS

Modify Login in screen

If you’re following on from a previous tutorial we are going to refactor our login page slightly to incorporate some additional validation and error handling along with enable making use of the promises returned.

We are also simply going to add a link to the Register page to enable the users who do not have an account to be able to navigate to the register page.

HTML

We have refactored our login code to follow a similar process to the signup process.

JS

Summary

If you run the application now you will now be able to easily navigate to the Login page and register page and make use of the functionality.

We have improved our little application. However, there are still a couple of issue and we should ideally refactor our application a little because even though it is still a small application both the router.js and the store.js file appear to be becoming rather large files with a number of lines of code. This could become a unmaintainable mess as our application begins to grow.

The other issue is if you have logged into to the application, then try to navigate by directly into the address bar of the browser to https://localhost:8080/dashboard you will be redirected to the login page. Which is the desirable if the user is not logged in but we should allow if the user is logged in.

Addressing these issues will be the focus of the next tutorials.

if you enjoyed this article and would like to be notified when the follow up this is published or even would like to know when I publish more tutorials why not subscribe to my newsletter.

Alternatively use the comments below to let me know of any omissions or queries or even just to send me some hate mail!

Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Latest posts by Gary Woodfine (see all)