How to update Firebase Authentication Profile

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.

Take Note

This tutorial builds on two other tutorials so there may be an assumption that you are already making use of some functionality previously introduced in those tutorials

The tutorials are available:
How to use Firebase Authentication in Vue
How to use Firebase Cloud Functions

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


https://github.com/threenine/sourcelink-web
0 forks.
0 stars.
0 open issues.
Recent commits:

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.

HTML

Take note

if the tags look a little strange to you, please note I make use of a Material Design Component Framework to help create great looking UI very easily.

The framework I use MDB Bootstrap Vue UI Kit Pro Version

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

JS

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.

JS

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.
JS

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 Review

If 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.

JS

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.

JS

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.

Gary Woodfine

Technical Director at Denizon
Gary is Technical Director at Denizon, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scalable in a way which helps them address and reduce their ecological impact.

Denizon's product line successfully integrate IoT, Artificial Intelligence and Blockchain technology to enable efficient, productive, secure and scalable solutions to help organisations address increasing energy demands, ecological impact and Health & Safety concerns of their staff.

Latest posts by Gary Woodfine (see all)