In a previous tutorial, How to use Firebase Authentication in Vue we explored how to use the basic Authentication features provided by the Google Firebase a web and mobile app development platform.
In this post, we are going to dive a little deeper into the Authentication and how to inter-operate with Firebase Storage to store profile images of our users and the Firestore database to store some additional user information.
Objective
We are going to develop a simple web page to enable a user to update their User Account information within an application. The user account makes use of Firebase Authentication, making use of standard Email & Password Authentication.
We are going to provide the user with the ability to add a Profile Image which we are going to store in Firebase Storage and append to our Firebase Authentication Profile.
We are also going to enable the user to Add their Firstname and Lastname, which we are going to store in a document we'll create in the Firestore Database. We will also concatenate the two fields and save them as the displayName property to the Firebase Authentication profile.
The source code for this tutorial is available below and the Branch is Firestore
Building the View
We are going to create a new view in our application which we are going to cunningly name Profile.vue , we are going to try keep the form quite simple for this tutorial, so we are going to make use of File Upload control to retrieve and display Images and a simple form that will enable the user to update their Firstname, Lastname, Phone number and email address.
Implementing the code
We are going to making use of 3 Firebase services within our completed code for this tutorial so we will need to import the references to these services. I have previously explained how I have configured these services in How to install Firebase in a VueJS project so if you are unfamiliar with this step check out that tutorial.
Let's begin our implementation of the code by importing our services
We will also create two properties which you may have noticed we have bound to our form. The profile property will be used to store information retrieved from our Firestore database table.
The errors array is what we will use to display any validation errors in our application.
When the page loads we want to retrieve the existing data from the database and display it. We'll use the vue created method to retrieve and bind the data to the profile property
The created hook allows you to add code which is run if the Vue instance is created. The steps in a Vue Lifecycle. are:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed.
In the code above we effectively query our Users collection to retrieve documents that have been created with the Authenticated Users Unique Identifier.
If the document is found we simply bind it to our profile property using the ES6 Spread Operator. In Eloquent JavaScript, Marijn Haverbeke, introduces the great language features that are now available in JavaScript ES6.
In previous tutorial, How to use Google Cloud Functions in Firebase we explored how to create this collection in Firestore when a user initially registers in our application.
Eloquent JavaScript, 3rd Edition
A Modern Introduction to Programming
Marijn Haverbeke
Reflects the current state of JavaScript
Buy Now Read ReviewIf we run our application and navigate to the Profile page, you'll notice that page loads and the email address is displayed.
Saving an Image to Firebase Storage
We will now write the code to enable the user to save a Profile image to their Firebase Authentication profile. However before that is possible we need to save the image to our Firebase storage, get the Download Url then save it to our Current Users Profile property.
As an additional step, we will also update our our Users Profile document with the link.
In the code sample, because I am making use of the MDB Vue Pro File Input control there is just a little work that needs to done to retrieve some information. I also want to remove any identifying information file name and replace the file name with the users uid and the date the image was uploaded.
I have commented the code to help you to identify the steps I take to saving the information.
Save Profile Information
Our next step is implement the logic to save our profile information. To this we are going to create a saveProfile method.
I won't copy the entire code from this method, at this stage, because it also contains some validation logic which I feel with confuse the issues and for the purpose of this article I just want to focus on the Firebase Implementation. You can always check out the full code sample .
In building this application, I am also taking a leaf out of Eric Ries book, The Lean StartUp, and developing in Minimum Viable Product (MVP) fashion. So at this stage of process I am just implementing the bare essentials, with the intention of making updates based on Build - Measure - Learn loop
You'll notice that we follow a similar pattern as the previous code sample.
Summary
In this post we explored how to make use of various Firebase services to preform a series of complex update and retrieve functionality and how the Firebase API helps to simplify this process.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023