Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Updating User information
  • User forgotten password
  1. 2: Full Stack
  2. 2.3: Firebase

2.3.5: Firebase Techniques

Previous2.3.4: Firebase HostingNext2.E: Exercises

Last updated 1 year ago

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.

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.

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

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>

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.

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

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

🏭
Updating User information
code here
User forgotten password
code here.