Hey there! I’ve run into this exact head-scratcher before building auth flows with Firebase using local static files—let’s break down why this is happening and how to fix it.

Why You’re Losing the Session After Redirect #

The core problem here is the file:// protocol you’re using to open your local HTML files. Browsers enforce strict security rules for pages loaded via file://, which messes with how Firebase Auth stores session data (usually through cookies or localStorage). When you redirect from ../login/index.html to your homepage, the browser can’t carry over the auth session because the file:// context breaks persistence entirely.

Step-by-Step Fixes #

1. Switch to a Local HTTP Server (Most Critical Fix) #

Stop opening files directly in your browser. Instead, serve them through a local HTTP server—this uses the http:// protocol, which bypasses file:// security limitations. Here are super quick ways to set this up:

• Python: Run python -m http.server in your project root (uses port 8000 by default)
• Node.js: Install serve via npm install -g serve, then run serve in your project root
• VS Code: Use the Live Server extension to launch a server with one click

Once your server is running, access your login page at http://localhost:xxxx/login/index.html (replace xxxx with your server’s port). This lets Firebase Auth properly store and retrieve session data across pages.

2. Explicitly Set Auth Persistence #

Even with a local server, explicitly defining the persistence type ensures Firebase prioritizes keeping the session active. Add this code before your login logic:

// Initialize Firebase first (make sure this is already in your code)
const firebaseConfig = {
  // Your Firebase config details here
};
firebase.initializeApp(firebaseConfig);

// Set persistence BEFORE running login logic
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
  .then(() => {
    // Execute your login flow
    return firebase.auth().signInWithEmailAndPassword(emailInput.value, passwordInput.value);
  })
  .then((userCredential) => {
    // Redirect to homepage on success
    window.location.href = '../home/index.html'; // Adjust path to match your server folder structure
  })
  .catch((error) => {
    console.error('Login error:', error);
    // Handle error (show user-friendly message, etc.)
  });

• Persistence.LOCAL stores the session indefinitely (even after browser restarts)
• Skip Persistence.SESSION if you want long-term persistence—it only lasts until the browser tab closes

3. Verify Redirect Path Consistency #

Make sure your redirect path uses the same origin as your login page. When using a local server:

• Use relative paths like ../home/index.html (if your folder structure is project/login/index.html and project/home/index.html)
• Or root-relative paths like /home/index.html (tied to your server’s project root)

Avoid absolute file paths (like file:///C:/...)—they’ll yank you back into the restricted file:// protocol.

Quick Check to Confirm It’s Working #

After logging in and redirecting, open your browser’s DevTools (F12):

1. Go to the Application tab
2. Under Storage, check Local Storage or Cookies—you should see Firebase-related entries (like firebase:authUser:...)
3. If these entries exist, your session is being persisted correctly

内容的提问来源于stack exchange，提问作者Eslam Mamdouh