# 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](https://firebase.google.com/docs/auth/web/manage-users#update_a_users_profile)

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:

{% code title="updateProfile method" lineNumbers="true" %}

```jsx
 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);
      });
```

{% endcode %}

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](https://github.com/rocketacademy/firebase-examples-3.2/tree/advanced-firebase). 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.&#x20;

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

## [User forgotten password](https://firebase.google.com/docs/auth/web/manage-users#send_a_password_reset_email)

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.&#x20;

```jsx
      <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.](https://github.com/rocketacademy/firebase-examples-3.2/tree/advanced-firebase-II)&#x20;

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.&#x20;

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