2.3.5: Firebase Techniques

Learning Objectives

1. Learn how to update a User's stored information on Firebase for greater user interaction

2. Learn how to setup email verification if your users forget their passwords

Introduction

When developing React Firebase Applications with Authentication systems you unlock a plethora of utilities that allow developers to create intricate and complex applications. In this section, we will look at a few techniques that facilitate greater user interaction as well as helping your users feel more supported during their experience. It should be noted that when applications are launched, features while vital are just as important as user experience.

Updating User information

To update a users information that is tied to the Firebase user object is a few lines of code, but it can be difficult to align state with the updated information. To update the current user information we utilise the updateProfile method where we pass in the current user from the auth object and any information that we wish to update. Here is a sample implementation of the updateProfile method:

updateProfile method

 updateProfile(auth.currentUser, {
      displayName: displayName,
      photoURL: photoUrl,
    })
      .then(() => {
        auth.currentUser.reload().then(() => {
          const user = auth.currentUser;
          props.setUser(user);
          props.setShowUpdateUserForm(false);
        });
      })
      .catch((e) => {
        console.log(e);
      });

In order to update the users information you will first need to capture it using form inputs and the like, then you can send the captured information to Firebase for storage, in the example above, we capture a users displayName and photoURL. The updateProfile method will set the new information passed as the second argument, onto the Firebase server, but this will not reflect within your application. To align the updated profile online to your React state, we can view the latter half of the code above.

To refresh the current user within the browser window, we invoke the auth.currentUser.reload() method, we can then utilise a .then callback function that will run after the user had been updated. This will allow us to get the most current user object, as we can see on line 8. Following this, the setUser function is utilised to update the application to the current updated user on Firebase. To see how this code works checkout the code here. Make sure that you are on the advanced-firebase branch if you want to clone this repo onto your machine, after cloning, cd into the directory and run the commands: npm install followed by npm run dev, then open a browser and navigate to "http://localhost:5173" to see the application.

Note you will need to setup your own firebase credentials and apps online to run it correctly.

User forgotten password

There are often times where users forget passwords and in these moments its vital that Applications can support them in their time of need. To set this up with Firebase is relatively straightforward, the method required for this is called sendPasswordResetEmail and is passed the auth object that is setup in firebase.jsx and email of the user who is recovering their email. Make sure you capture the users email as it is required for this to work, moreover the users will need access to this email to click on the click and alter their password.

      <button onClick={() => sendPasswordResetEmail(auth, email)}>
        Forgotten Password?
      </button>

This is a basic implementation of of the code required to help a user to set a new password provided they have access to the email provided. To see how this code works checkout the code here.

Make sure that you are on the advanced-firebase-II branch if you want to clone this repo onto your machine, after cloning, cd into the directory and run the commands: npm install followed by npm run dev, then open a browser and navigate to "http://localhost:5173" to see the application.

Note you will need to setup your own firebase credentials and apps online to run it correctly.