How To Create an Update Email/Password Page Using React and Firebase

12 min readFeb 18, 2021

Before beginning my journey into learning how to code, I never thought deeply about the importance of having a personalized user experience while interacting with different websites and applications. I never gave being able to access a saved playlist or see the previous scores of games a second thought. After creating several apps, I truly see how having an easy, intuitive, user-friendly app enhances the user experience.

Recently my colleagues and I created a fitness app called DSLD (Don’t Skip Leg Day). Using computer vision and machine learning, DSLD can track the user’s body position to ensure they are correctly executing a squat and store that data (their complete workout) in their DSLD profile. Users can sign up for an account, build their profile (username, age and height, to name a few) and save their workouts.

Based on our needs for this project, we agreed that it would be best to use Firebase. Firebase had everything we needed for DSLD; Cloud Firestore (database), hosting to deploy our app and authentication to enable our users to sign up, log in and log out of our app.

One of my main focuses for this project was creating the authentication process for users who sign up to use our app. I wanted the user to be able to do the following:

Sign up for a DSLD account using an email and password
Log in to the DSLD app using their set email and password
Reset their password should they forget it
Update their email and/or password

As someone who is new to coding and Firebase, I was prepared for a long, grueling process. Luckily, it wasn’t too difficult to implement this functionality. I began this journey by researching Firebase’s authentication process, including Firebase’s documentation, medium articles and youtube tutorials. I found plenty of resources to guide me through creating the sign up, log in and reset password components, however, there were very few resources that clearly laid out how to create the update email and/or password process. As a result, I created this article to hopefully guide another beginner on how to create an update profile page to enable the user to update their email and password using Firebase authentication.

Implementing the functionality for changing a user’s password and/or email is fairly easy. If the user has recently logged in, they can simply migrate to the update email/password page and update their information. If a certain length of time has passed since the user first logged in, an attempt to update their email or password will be unsuccessful. To alleviate this problem, Firebase created a method called reauthenticateWithCredential. With reauthenticateWithCredential, the user can verify that they have permission to make changes to the logged in account without leaving the page.

In this article, I will walk you through how to build an update profile component. Before continuing on with this article, please note the following details:

1. I will only cover how to implement the update email and password page. This article assumes that your user has already logged in to your app. I will not cover the process for signing up and logging in a user. To learn these processes, check out the following tutorial by Web Dev Simplified. https://www.youtube.com/watch?v=PKwu15ldZ7k.

2. You will need to have some knowledge about Firebase, React and Bootstrap. I will only provide a brief description of these technologies and how we’ll use them in our update profile page.

3. I used Visual Studio Code as my code editor which means the code snippets you’ll see throughout this article were created using VSCode.

Update Profile Page

We want to create a component that will allow the user to change their email and password without navigating away from the update profile page. We will use Firebase, React, Styled Components and Bootstrap, to build and style this component. Below is an example of how the page will look once we are finished.

Dependencies

Below is a list of dependencies you will need to install in order to build the update profile page pictured above. Make sure you npm install these packages so you that you have the tools necessary to build the account profile page.

If you have the aforementioned dependencies installed in your project folder, you’re ready to start building the component. First we’ll import the components, hooks, etc., needed to build the update profile page.

Import Statements

React

React is a front-end library used for building interactive user interfaces or UI components. Our app will take advantage of two react hooks, useRef and useState.

useRef — We will access the DOM (document object model) using useRef. useRef’s .current property will give us access to the value our user enters into our form component. The returned value will persist for the full lifetime of the component.
useState — useState will set and update state for our component.

React-Bootstrap

React-Bootstrap is a front-end stylesheet library that re-implements bootstrap components using React. We will use the following items from the react-bootstrap library to build and style our components:

Card — Our button and form groups will be stored inside of a bootstrap card container. Cards have built-in styling but we will adjust those styles in order to achieve the look we want.
Button — Once the user enters the required information needed to update their profile, our button component will initiate the process to update the email and/or password.
Form — We’ll use form components, like labels and controls, to get information from our user, like their current or new password.
Alert — The alerts will inform our user about the success or failure of an action. For example, if the user successfully changes their password, an alert will appear stating their account was successfully updated.

Styled-Components

Styled-Components allows us to write plain CSS in javascript, using tagged template literals, that’s scoped to a single component and does not leak to any other element in the page.

React-Router-Dom

React-Router-Dom is a npm package that allows us to build single-page web applications that simulates “Multiple Page Applications.” For our update profile page, we’ll use:

Link — Our link will be set up to send the user to their dashboard if they want to cancel updating their email and password.
History — History.push() is how we will send our user to their dashboard once they have successfully changed their email and/or password.

Firebase

Firebase is a Backend-as-a-Service (Baas). For me, firebase is relatively easy to use. Firebase has tools that enables you to set up an authentication process, store data using their realtime database or cloud firestore, and deploy your app. For our purposes, we will utilize their authentication process to update our user’s account settings. We will use the following methods to update the user’s email or password:

reauthenticateWithCredentials — We will call the reauthenticate method to verify that the user has permission to update the current profile. We will pass this method the user’s credentials. The credentials include the current user’s email address and password. The user will need to enter the current password in order to update their profile.
updateEmail — The updateEmail is a method that allows us to update the user’s email address.
updatePassword — To update the password, we will take advantage of the updatePassword method.

React Component

First we need to create our component. I named this component UpdateProfile.js but feel free to give it whatever name that pleases you. My UpdateProfile.js file is saved in my components folder which is located inside of my project folder. Next, we’ll need to create the component itself. I used the React snippet, rfc, to create a React Functional Component. If you want to use this snippet, you can install VS Code ES7 React/Redux/React-Native/JS snippets. Click on the extension icon in VSCode, enter VS Code ES7 React/Redux/React-Native/JS in the search bar and press the install button.

Don’t forget to add this component to your routes.

Variables

First, we’ll need to set up some variables to store the data we’ll use throughout our component.

emailRef — The default value for this variable will be the user’s current email address. We will also use this variable to store the user’s new email address should they wish to change it.
currentPasswordRef — The user’s current password.
newPasswordRef — The user’s new password.
newPasswordConfirmRef — The confirmation for the new password. We’ll check this variable against the newPasswordRef to verify that the new password is what the user intended.
currentUser — The user that is currently logged in to our app.
updateEmail — A method that enables us to update the user’s email.
updatePassword — A method that we’ll use to update the user’s password.
error — Stores the error message we want to display if an error occurs.
setError — Updates the error state based on the type of error.
success — The message we’ll display when the user successfully updates their account.
setSuccess — Updates the message state if the user changes their email address or password.
loading — Disables the submit button to prevent the user from pressing the update button before entering data into the input fields.
setLoading — Toggles the loading state from true to false which enables or disables the submit button.
history — Sends the user to their profile page after the account has been updated.

Functions

We’ll need a few functions to make our update profile component function properly. The first function will be the reauthenticate function.

The reauthenticate function takes one argument which is the currentPassword. Firebase’s EmailAuthProvider mechanism allows us to use the email and password credentials to reauthenticate the user.

The handleSubmit function runs after the user presses the submit button. We call the event.preventDefault() method to keep the page from refreshing after the user presses the submit button. Next, we call the reauthenticate function to reauthenticate the user.

We chain a then statement to the reauthentication function to ensure we don’t receive a promise before continuing on with changing the user’s password. In the callback function for the then statement, we first check that the new password and the confirmation password matches. If they don’t, we display an error message informing the user that the passwords do not match.

If the values match, we create a promises array in which to store the new email address and passwords. At a later step, we’ll run the Promise.all on this array to fulfill all of the promises before we display any messages. The error state is set to an empty string to prevent an error message from being displayed before an actual error occurs. We set loading to true to disable to submit button during the update process.

Next, we verify that the new email address is not equal to the user’s current email address. If the email address is different, we run our updateEmail method using the new email as an argument and push the returned promise to the promises array.

If the user enters a new password, we’ll run the updateEmail method with the new password as an argument and push that promise to the promises array.

We use Promise.all to resolve the email and password promises we added to the promises array. After the promises are fulfilled, we display a success message in the browser. We use setTimeout to cause a 3 second delay before sending the user to their dashboard.

If the account was not updated for any reason, we chain a .catch statement that will set the error message to display ‘account was not updated.’ We set loading to false to enable to the submit button again. If the user’s current password is incorrect, we display an error message stating the current password is incorrect.

The selectText function allows the user to select all of the text in an input field with one click. This makes it easier and faster to change or delete the text in the input field.

Styled Components

The components that will be rendered on the page will be wrapped in styled components. The GradientContainer sets the background color to an orange and white gradient.

The ContentContainer styled component positions our react-bootstrap card component in the middle of the page.

The CancelUpdate styled component styles the cancel link located underneath the Form component.

The cardStyle object is responsible for styling the card component that contains the labels, input fields and buttons.

The button object styles the submit button the user presses to update their profile.

HTML

We start off by wrapping our card in the ContentContainer and GradientContainer components. Inside of our card body, we render the title of our page, Update Profile. We apply some bootstrap styling to style our title.

Next, we include the code for our success and error messages. Remember, the messages will only render if there’s an error or if the user successfully updates their profile.

We’ll pass the Form component an onSubmit event that runs the handleSubmit function when the user presses the submit button.

We create the input fields and their labels using Form.Control and Form.Label, respectively. The Form.Group component is a container that holds the FormLabel and Form.Control components. When the user enters their new email or password into the input field, we’ll store that value in the appropriate variable using ref (e.g. ref={emailRef}). We add required to the email address and current password components to ensure those values are not empty. The default value for our email Form.Control is set to the user’s current email address. It also has a onClick event that selects all of the text in the input field with one click.

To submit the form, we need to add a button. This button is added after the Form component. The button has a type of submit. It is styled using bootstrap as well as the buttonStyle object mentioned in the styled components section of this article.

Finally, we need to add a way for the user to cancel the process of updating their email or password. The CancelUpdate component uses the Link component to send the user back to their dashboard.