User session management in Firebase - Mini Project: Build & Apply

User Session Management with Firebase

📖 Scenario: You are building a simple web app that needs to keep track of user sessions. Using Firebase Authentication, you will manage user login state to show personalized content.

🎯 Goal: Create a Firebase user session management setup that initializes Firebase, sets up a user state listener, and updates the UI based on whether the user is logged in or not.

📋 What You'll Learn

Initialize Firebase with a given config object

Create a function to listen for user authentication state changes

Update a variable userSession to hold the current user or null

Add a function to sign out the user

💡 Why This Matters

🌍 Real World

Managing user sessions is essential for any app that requires login. Firebase Authentication simplifies this by providing easy-to-use methods to track user state.

💼 Career

Understanding user session management with Firebase is valuable for frontend and backend developers working on web and mobile apps that require secure user authentication.

1

Initialize Firebase App

Create a constant called firebaseConfig with the exact keys and values: apiKey: 'AIzaSyA-1234567890abcdef', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'. Then initialize Firebase app by calling initializeApp(firebaseConfig) and assign it to a constant called app.

Firebase

# Create firebaseConfig object and initialize app
# Your code here

Need a hint?

Use const to create firebaseConfig object with the exact keys and values. Then call initializeApp(firebaseConfig) and assign it to app.

2

Set Up Authentication and User Session Variable

Import getAuth from Firebase and create a constant called auth by calling getAuth(app). Then create a variable called userSession and set it to null.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

// Import getAuth and create auth and userSession
# Your code here

Need a hint?

Import getAuth from Firebase Auth module. Then create auth by calling getAuth(app). Initialize userSession as null.

3

Listen for User Authentication State Changes

Use auth.onAuthStateChanged with a callback function that takes a parameter user. Inside the callback, set userSession to user if it exists, otherwise set it to null.

Firebase

import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
let userSession = null;

// Add auth state listener
# Your code here

Need a hint?

Use auth.onAuthStateChanged with a function that sets userSession to user if logged in, or null if not.

4

Add Sign Out Function

Create an async function called signOutUser that calls auth.signOut() to sign out the current user.

Firebase

import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'AIzaSyA-1234567890abcdef',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
let userSession = null;

auth.onAuthStateChanged((user) => {
  if (user) {
    userSession = user;
  } else {
    userSession = null;
  }
});

// Add signOutUser function
# Your code here

Need a hint?

Create an async function signOutUser that calls auth.signOut() to log out the user.