FE - 1.5: Firebase Auth Session Management

[Ron-Madan]

Objective: Replace the use of firebaseUID stored in local storage with Firebase Auth's built-in session management for verifying user authentication. This ensures more secure and reliable handling of user authentication across the app.

App Initialization:

• Implement Firebase Auth's onAuthStateChanged listener to detect the current authentication state and retrieve the authenticated user object.
• Redirect unauthenticated users to the home/location selection page, ensuring only authenticated users can access /active-view.

**Implementation Plan:

1. Centralized Auth Listener

• Set up a centralized listener using onAuthStateChanged.
• Store the authenticated user's state in a React Context (AuthContext) for global access.

// src/context/AuthContext.js
import React, { createContext, useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user || null);  // Set user or null if signed out
    });

    return () => unsubscribe(); // Clean up the listener
  }, []);

  return (
    <AuthContext.Provider value={currentUser}>
      {children}
    </AuthContext.Provider>
  );
};

2. Update App.tsx with AuthContext provider (Note: navigation links section has been removed)

import { Routes, Route, Link } from 'react-router-dom';
import './App.css';
import LocationSelection from './pages/LocationSelection/LocationSelection';
import UserInfo from './pages/UserInfo/UserInfoForm';
import SignIn from './pages/SignIn/SignIn';
import ActiveView from './pages/ActiveView/ActiveView';

// Import contexts
import { AuthProvider } from './context/AuthContext';
import { LocalStorageProvider } from './context/LocalStorageContext';

function App() {
  return (
    <LocalStorageProvider>
      <AuthProvider>
        {/* Define Routes */}
        <Routes>
          <Route path="*" element={<LocationSelection />} />
          <Route path="/" element={<LocationSelection />} />
          <Route path="/user-info" element={<UserInfo />} />
          <Route path="/sign-in" element={<SignIn />} />
          <Route path="/active-view" element={<ActiveView />} />
        </Routes>
      </AuthProvider>
    </LocalStorageProvider>
  );
}

export default App;

3. Create ProtectedRoute component to safeguard important pages

import React, { useContext } from 'react';
import { AuthContext } from './App';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const currentUser = useContext(AuthContext);

  return currentUser ? children : <Navigate to="/" />;
}

export default ProtectedRoute;

4. Update App.tsx with ProtectedRoute for Active View

...
<ProtectedRoute>
    <ActiveView />
</ProtectedRoute>
...

5. Update ALL Components that Reference FirebaseUID

• Replace all direct local storage calls with access to AuthContext.
• Use the currentUser object from context to retrieve firebaseUID.

import React, { useContext } from 'react';
import { AuthContext } from '......../context/AuthContext';

const currentUser = useContext(AuthContext);
const firebaseUID = currentUser.uid;

Important Notes:

• When the user signs in or out, the onAuthStateChanged listener will automatically update the context state. Manual updates to the context are not required.

Testing:

• Thoroughly test the authentication flow on localhost.
• Verify the app redirects unauthenticated users to the home page.
• Test across scenarios:
• • Fresh page reload.
• • Switching routes without signing out.
• • User sign-in and immediate access to protected routes.
• • Local storage values should update for everything else as usual: nickname, etc.
• Include detailed screenshots of the entire flow to validate the changes.

Summary:

• Removed: firebaseUID from local storage.
• Added: Global state management for authenticated users using AuthContext.
• Secured: /active-view with ProtectedRoute.