Auth state observer in Firebase - Mini Project: Build & Apply

Firebase Auth State Observer

📖 Scenario: You are building a simple web app that needs to know when a user signs in or out. This helps the app show the right content based on whether the user is logged in.

🎯 Goal: Create a Firebase authentication state observer that listens for changes in the user's sign-in status and updates a variable accordingly.

📋 What You'll Learn

Initialize Firebase authentication

Create a variable to hold the current user state

Set up an auth state observer using onAuthStateChanged

Update the user state variable inside the observer

💡 Why This Matters

🌍 Real World

Web apps often need to know if a user is signed in to show personalized content or restrict access.

💼 Career

Understanding auth state observers is essential for frontend developers working with Firebase authentication.

1

Initialize Firebase Authentication

Create a variable called auth and set it to firebase.auth() to initialize Firebase Authentication.

Firebase

# Your code here

Need a hint?

Use firebase.auth() to get the authentication service.

2

Create a User State Variable

Create a variable called currentUser and set it to null to hold the current user's sign-in state.

Firebase

const auth = firebase.auth();
// Your code here

Need a hint?

Start with null because no user is signed in initially.

3

Set Up Auth State Observer

Use auth.onAuthStateChanged with a callback function that takes a parameter user to observe sign-in state changes.

Firebase

const auth = firebase.auth();
let currentUser = null;
// Your code here

Need a hint?

The observer runs the function whenever the user signs in or out.

4

Update User State Inside Observer

Inside the auth.onAuthStateChanged callback, set currentUser to user to update the current user state.

Firebase

const auth = firebase.auth();
let currentUser = null;
auth.onAuthStateChanged(function(user) {
    // Your code here
});

Need a hint?

Assign the user parameter to currentUser to keep track of sign-in status.