Building a VueJS App with Firebase Hosting and Validation
How to deploy your VueJS app to Firebase and implement a Firebase user authentication.
Most Businesses prefer to use impressive front-end applications with responsive User Interfaces (UI). These front-end apps are nothing more than nice UIs, without a robust back-end service. With the introduction of virtualization and cloud technologies, we have access to many services like SaaS, PaaS, IaaS. Irrespective of the size of an organization, a good app can greatly enhance its business.
Firebase is one such cloud-based BaaS platform that provides database, cloud storage, cloud messaging, and remote configuration. All these aspects can easily be leveraged when building a successful mobile app, just by creating the UI and linking it to Firebase using their configuration. Firebase allows you to store data in databases and cloud storage. You can send notifications and messages using Cloud Messaging and use Remote Config to perform A/B testing.
Cloud “Backends” with Cloud Component Hubs
We are in an exciting period in the history of web development. This combination of cloud component hubs like Bit.dev (that allow you to publish and organize reusable components in the cloud) and cloud solutions like Firebase, shift our attention, as developers, from high-resolution implementations to semi-abstract compositions.
Reusable components in the cloud are used to easily compose new UIs, and UIs are “hooked” to cloud hosting, data, and computing to produce a full-on app. That’s pretty amazing and worth pausing and acknowledging 🙂
Setting up the Vue project
Let’s start by setting up a Vue project with three views: register, login, and home.
1) We will log in to the application using Firebase’s authentication feature.
2) If the authentication attempt is rejected, you can register and try to login again.
3) We’ll check if Firebase validates email and user names.
Vue Project
We’ll use Vue CLI to create a new Vue project. Install CLI by using the following command.
Next, create the Vue project,
Creating Login.vue:
First, we’ll create a simple login view to login using email and password. Currently, we’ll just have two inputs and a button to log in.
As we create our first component, we’ll now display it in our application. As you install Vue using the CLI, you will see an option to install vue-router. If you haven’t already installed the vue-router, you can do so with the following command.
Vue-router is used with Vue to create a Single Page Application. It integrates well with Vue core components by mapping routes with views. Let’s integrate this view into the router.js file.
Currently, we just have a login component without any styling. That’s what we’ll be adding next:
Changing App.vue:
The main component renders app.vue first. We modify this file to have </router-view >. A component of router “router view” renders the path to “/login”, defined in the /router.js.
Browse to http://localhost:8080/#/login, and you will get the below image.
Create Register.vue:
Let’s create a Register view to accommodate new users.
Add the following styling rules to Register.vue
Set Navigation
Since we have created two of the views, let’s setup the navigation between them. The vue-router gives us a component called “router-link” that helps us navigate between views. Add these links below the button element.
These links will allow users to navigate between the Login and Register pages.
Create Home.vue:
Once a user logs in, we’ll be displaying a Home page to users. The code given below is for a simple Home.vue page with a sign-out button.
Now let’s set up the click event for the Sign-in button so that the user is authenticated when the button is clicked.
To use the router using “this.”, ensure that the router is injected into your main.js file?.
Now that the views are created, let’s add the routes for the Register and Home views.
We have now completed the UI aspects of the Login, Register, and Home views. Users will be able to go to the Home page by clicking the Sign in button. Now let’s set up the Firebase database to store the login credentials of our users.
Setting up Firebase:
To create a Firebase project as a back-end for your apps, go to the Firebase website and create an account.
In the Firebase console, click on “add project”, give the name for your project, and click the “Web” icon to add Firebase to the web application.
Once you create the project, you will be provided with the configuration details of your Firebase account so that it can be connected with your application. Copy this code for later use.
Click “Authentication” in the main navigation menu (left) of the Firebase dashboard. In the “Sign-in method” tab, select “Email/Password”, enable it, and click “Save”.
Next, select “Database” in the main navigation menu (left) and select the “Start in test mode” option to enable read and write privileges to the database.
Now select the location in which you want the Firebase service to be hosted. Note that this setting cannot be changed once the service is setup.
Install Firebase in Vue project:
Now that the Firebase account has been created, let’s install Firebase in our project using the command line.
To connect to the firebase db, we’ll be using the configuration information provided by Firebase earlier. The configuration code will look like the following sample code:
Now, update the main.js file to authenticate users through Firebase. Below is the complete main.js file. Add the Firebase configurations here:
For production apps, the config details are added in a separate file and referred to in the main file.
Register Users through the UI:
Now let’s change the Register page so that users can easily register through the UI.
Once the user enters their username (email) and password, we can use the Firebase .auth() method “.createUserWithEmailAndPasswod()” to perform the authentication. Below is the </script> block of the Register page.
As we create users, the “.createUserWithEmailAndPassword” method validates through Firebase for the sign-in provider of the Auth section.
We can now register users as the required configurations are done in Firebase.
Logging in through the UI:
We now need to allow registered users to Login and direct them to the Home page if their credentials are valid. To perform a login, we’ll use the “.signInWithEmailAndPassword” method of Firebase auth(), as follows:
Display Home page after Authentication:
Only authenticated users should be redirected to the Home page. So we need to restrict access to the Home page through the “requireAuth” meta field of the vue-router. This is done as follows:
Validation of Email and Password:
As a user tries to register or login, Firebase validates their credentials to ensure that the username is in email format and that both the email and password are valid. For the purpose of this guide, we have simply displayed the error returned by Firebase during a failed registration and login requests.
You will now be able to register on the application and log in.
A record is created in Firebase upon successful authentication:
Conclusion
This guide is proof as to how easy it is to set up a back-end service to register and authenticate users via Firebase. These features can be used for both Web and Mobile applications, drastically reducing the effort required to build applications.
This guide only covers the fundamental aspects of this process. However, Firebase provides many more features and configurations to enhance the registration and authentication processes and make them more secure.
