Firebase is a real-time cloud infrastructure for client-side apps, which enables developers to turn any Front-end framework application like Vue, React, Angular, iOS or Android into a full-stack product capable of scaling infinitely in the cloud.
Firebase abstracts away most of your complex server-side features like:
- File Storage
- Data Persistence
- Machine Learning
Enabling you to focus on building an awesome experience for end users.
In the example of How to use Firebase Authentication with Vue in this post we will focus on how to register Firebase and the associated services to you Vue.JS app.
Install Firebase into Vue Project
In order to use firebase in our project we will need to install the following dependencies to our project.
Firebase has now been added to our project. We now need to add all Configuration details. I will assume you have registered and created an application using the Firebase Console and able to get your Configuration Credentials.
We are also going to make use of the concepts and practices discussed in using environment variables in Vue.JS we are going to create some environment variables to store our credentials values.
.env.development.local add the following variables, ensure you also get the values from your Firebase Console.
We can create a new folder in our src directory to store some new additonal files we will create. We will call this new folder
The first file we are going to create in the new file to access our our credential information.
Open the credentials.js and add the following code, which basically get our values we placed in the environment files.
Create a new file which will actually create an instance to the firebase dependency and use the configuration credentials we just created.
Add the following code to this file, which will initialise the firebase application with the configuration details.
We can now create a new file which we will use to create an instance of the Authentication module.
You will notice we import the app.js we just created and create a constant of Auth which will be how we reference the authentication module in our code.
Create a new file which we will use to create an instance of the Firestore database module.
Add the following code to create a constant which will be used when we want to reference the Database in our application.
and lastly we will create a new file which will be used to create an instance of the Storage Module
the code in the file follows the similar process as previous creates a constant of Storage we will use to access the storage module.
We have now completed our Firebase configuration work, now if you want to use a Firebase feature in our code you just need to import the relevant file and everything will be ready for use.
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.