How to create an Authentication system in Vue.

13 min readDec 22, 2019

Hey guys, today we are gonna look at how I created an authentication system using Vue and Firebase. Authentication is simply identifying an individual, usually based on a username or password before they can have access to a the data on your application.

Why use Vue

With over 154k stars on GitHub, Vue.js is currently the trendiest JavaScript front-end framework, beating Angular and React in GitHub star count by a fair margin. When it comes to overall popularity, React is still the king and Angular, thanks to its specificity, holds a solid place. But here in Nigeria, I don’t see much community behind Vue for a while now, and the developer community worldwide, too, seems to be following suit. So what is it about Vue that makes it gain more traction every month?

Vue might have started as a small project driven by developer needs of its creator, Evan You, but it has matured considerably over the years — becoming a full-fledged framework with a grownup ecosystem and developer tooling. Along the way, Vue attracted a decent number of contributors, sponsors, and evangelists.

What is Firebase?

In short terms, Firebase is a set of tools that allows you to develop an application without server-side programming. It has real-time database, authentication system, crash reporting, analytics and other services ready to use in your mobile/web app. That way, you can focus on your app and users.

For application with minimal back-end needs such as authentication or database storage, no need to re-invent the wheel, Firebase does it for you, and gives you much more tools. Also, you don’t need to bother about scaling, server performance and database size, Firebase scales everything automatically.

Shall we begin?

First, we are going to initialize a new Vue project by using the great tool Vue Cli 3 (https://github.com/vuejs/vue-cli).

If you don’t already have vue cli installed, let’s install it (This is done on your terminal — windows + R, then type CMD and press enter):

$ npm install -g @vue/cli

Now that you have vue cli installed, let’s create a new project. In vue cli documentation, it say’s:

Usage
$ vue create <project-name>

One of the cool features of Vue CLI 3, is that you can initialize your project with zero configuration required, so that you can start to code as fast as possible.

Let’s create our new Vue project and call it ‘vue-firebase-auth’.
N/B: inside your CMD, go the folder you want to save your project. if you want your project to live on your documents folder. type cd/documents to enter the documents folder. Then type the command below.

$ vue create auth-system

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select “Manually select features” to pick the features you need.

For our case, we are going to select “Manually select features” and choose vue-router option since we will be using it during this tutorial. For the other features, do as you want, as it won’t really matter for the rest of the tutorial.

At the end, you will be asked if you want to save this preset for future projects and after that, and a couple of other questions, type n to reject, then press Enter. your project will be initialized.

Then, enter the new vue-firebase-tutorial directory, and run npm run serve

$ cd vue-firebase-tutorial
$ npm run serve

Now, if you open the url ‘http://localhost:8080’, you should have the default view of our Vue project!

The App Structure

Let’s have a quick look of the app structure.

The files we are gonna be working with are in the src folder

The other files are mostly configuration files generated by Vue Cli 3. If you want to have a complete overview of the structure, you can check the Vue Cli 3 documentation. Also, before going further in this tutorial, if you don’t already know the structure of a Vue file (like src/components/HelloWorld.vue), i advise you to take a look to this: https://vuejs.org/v2/guide/single-file-components.html

Now, lets get dirty…

Our app will consist of three views, two (Login view and Sign Up view) that we can access only without authentication, and one (Home view) that we can access only with authentication.

After login successfully or after a new account creation, we will be redirected to the part the needs authentication, the Home view.

Step One: Login and SignUp

1–1 The Login View

Let’s create the Login view. To do so, we will create a new Vue component called Login under src/views

For the moment, the component will simply consist of a title, two input fields, a button and a small sentence in the html.

Our component is now created! But how to display this new component in our app? Well, for that, we are going to use vue-router. Remember? We already installed it when we initialized the app with vue-cli.

What is vue-router ?

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.from vue-router documentation: https://github.com/vuejs/vue-route

So, let’s add our new Login component that we just created to our app router. Open the src/router.js file and add the Login component to the router like that:

Then, if you change your browser url to localhost:8080/#/login you should see the new Login component that we just created displayed in your browser:

You will notice that the default menu is still there despite the fact that we didn’t put it in the html template of the Login component? Well, if you open the App.vue file, the template of the App component is as follow:

The App component is the main component of the app and will be the first to be rendered. It contains a div with two router-link elements and a html component called router-view.

We will soon talk about the router-link element, but first, let’s see what is the router-view element.

Router-view is a component of vue-router:

The <router-view> component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain its own <router-view>, which will render components for nested paths.from vue-router documentation https://router.vuejs.org/en/api/router-view.html

So, when reaching http://localhost:8080/#/login vue-router will render the attached component of the path/login we defined in src/router.js inside the router-view component. And since the App component also contain the nav div with the two router-link elements in his template, we also have them display in our view.

To avoid confusion with the navigation of the app we are creating, let’s remove this nav div from the App component and replace it with the vue logo. We already have the Vue logo inside the src/assets/ directory, so let’s use it!

Also, Since we are not going to use the About view, we can remove the file from our directory (src/views/About.vue) and also remove i t from our routes configuration in src/router.js

Now, let’s get back to our Login view add some style to our Login component.Inside the <style> element of your Login.vue file, add those styles.

After adding this style, you will notice the changes below:

The Sign Up View

The same way we created the Login view, we are going to create the Sign Up view. For that, create a new vue component called SignUp under src/views/.

As for the Login component, the SignUp component will consist, for now, of a simple form and some style attached to it.

Then, add the new component in our routes inside src/router.js

Then, if you open your browser to http://localhost:8080/#/sign-up, you should have the following view:

Navigation between views

If we look back to the schema of the app architecture we defined, we can navigate from the Login view to the Signup view, and from those two views to the Home view. How to do so?

Well, we will use another component of vue-router that we quickly saw before, called router-link.

<router-link> is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an <a> tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.from vue-router documentation: https://router.vuejs.org/en/api/router-link.html

So, in the Login and SignUp component, let’s implement router-link so we can navigate between those two views.

Now, you should be able to navigate between the two pages by using the links we just created.

The last part of navigation will consist to go from Login/SignUp views to the Home view. For now, since we don’t have any code implemented, we will do a simple redirection to the Home view when clicking on the Connection button, without any authentication checking.

With router-link, the navigation take places in the html part of the component, but now, we want to navigate between routes programmatically. To do so, we need to attach an event when clicking on the Connection button, and with Vue, we can do that with the v-on directive or with the @ alias for v-on directive.

The event we want to listen to is click. So, on the click event of the Connection button, we want to navigate to the Hello view.

To navigate programmatically between views, vue-router has a set of function we can use in our app. To know more about those functions, you take a look in their documentation https://router.vuejs.org/en/essentials/navigation.html.

In our example, we are going to use the replace function, because once the user is logged in, we want the Hello view as our starting route.

Let’s change our Login component to put this in place.

You can see inside the login function that we have this.$router.replace('home')

Why do we access the router with this? If you take a look into the main.js file, you’ll see that the router object is injected to the Vue app. That way, we can easily access it in every components of the app.

Also, we change the navigation to home, but we don’t have any hello path yet.

The default path of the Home component was / on the app initialization, but now that we know that the Home view will be only accessible when user is authenticated, let’s change the route so that the Home view is accessible when reaching /home path.

Now, back to our Login view, if you click on the Connection button, you’ll be redirect to the Home view ! You’ll see two Vue logo display. That’s normal ! Check the content of the Hello-world component in src/components/HelloWorld.vue ;). Remove the image from the template of the Hello-world component to avoid duplication of the Vue logo.

Firebase Integration

Now that we have our front-end app ready, let’s implement Firebase so we can use it’s authentication system !

3.1 Create a new project on Firebase

To use Firebase, you first need to create a new project on the firebase console. If you don’t have any account created, create one, then go to console.firebase.google.com.

Click on Add project . Them you should have a popup to create a new project. Choose the name you want. I choose to call it vue-firebase-tutorial,

Follow the prompts and finish the other steps until you reach your dashboard

Congrats ! Your Firebase project is created. Now, to integrate it in our app, click on the code icon above Add an app to get started.

Setup you app nickname and register the app.

A popup with a code snippet should appear. Copy the code inside the second script balise. It should look like:

// Initialize Firebaselet config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};firebase.initializeApp(config);

Now, let’s back to our vue project. We need to add the Firebase module to our project. To do so:

$ npm install ——save firebase

Once the installation is done, let’s import Firebase module to our app. Open the main.js file, and initialize Firebase with the configuration code we copied earlier.

For the simplicity of the tutorial, we put the Firebase configuration in main.js file, but on real production system, avoid to do that and put it in a specific configuration file. Also, you may see appear in the console some Firebase warnings about only importing the part of the SDK we actually use. In production, you should definitely do that! But again, to keep the simplicity of this tutorial, I skip this part.

We have everything ready now to create new users on Firebase !

3.2 Create User on Firebase with the SignUp component

Let’s go back to our SignUp component and implement what we need to create users on Firebase.

To create a new user, we will need to get back the email and the password typed in our form inside our component controller. To do so, we are going to use the v-model directive of Vue.

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.from Vue 2 documentation: https://vuejs.org/v2/guide/forms.html

Once we retrieved the email and the password of the new user we want to create, we are going to use the Firebase function called createUserWithEmailAndPassword.

This Firebase function does exactly what the name says, it create a new user with an email and a password. You can know more about this function in the official Firebase documentation here: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createUserWithEmailAndPassword

Let’s add all that in our SignUp component:

The createUserWithEmailAndPassword function return a Firebase promise, with an onResolve and onReject callback. You can know more about the different type of Firebase promises here: (https://firebase.google.com/docs/reference/js/firebase.Promise).

For the moment, we just display an alert to see the result of the function.

Let’s try to create a new user in the interface.

It’s not working ! Why ?

The error message says:

The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section.

To have the possibility to create new user, we should enable the sign-in provider of Firebase. Let’s go back to the Firebase console, on the project we created earlier

On the Authentication part, we have a tab named SIGN-IN METHOD

You just need to enable the Email/Password provider. Then let’s retry creating a new user again

N/B: Trying to add a user from the signup page returns an error that says Email address is badly formatted

To add a user for now, navigate to the users section on your firebase dashboard and add a new email and password.

Login with the new user

Now that we have a new user created, let’s try to login with this user ! (When you successfully create a new user on Firebase, it automatically sign in the user in to the application, but for this example, we are going to sign in again from the Login view)

Let’s go back to our Login component. We need to get back the email and the password of the user who try to login, and sign in this user into Firebase. This component will look like the SignUp component, but the change will be the function we will call. To sign in a user in Firebase, we are going to use the signInWithEmailAndPassword function provided by Firebase. It takes the email and password as parameters and return a Firebase promise.