Firebase Authentication跨同服务器子域名网站与PWA的认证状态共享问询

Absolutely! You can absolutely share authentication state between your public website and PWA (hosted on subdomains of the same server) when they’re tied to the same Firebase project. Let’s break down exactly how to make this work for your React/Redux/Node stack:

1. Configure Firebase Auth for Cross-Subdomain Cookies #

The first critical step is to tell Firebase Auth to use a cookie domain that covers all your subdomains. This lets the authentication cookie be shared across yourdomain.com and app.yourdomain.com:

• Go to your Firebase Console → Authentication → Settings → Session management
• Find the "Domain for session cookies" field and enter your parent domain prefixed with a dot (e.g., .yourdomain.com). This ensures the cookie is accessible to all subdomains under your parent domain.

2. Sync Firebase Config Across Both Apps #

Make sure both your public website and PWA use exactly the same Firebase configuration object. This includes apiKey, authDomain, projectId, and other keys. If they differ, Firebase won’t recognize them as part of the same project, and state sharing will fail.

Here’s a standard Firebase initialization snippet you can reuse in both apps:

import { initializeApp } from 'firebase/app';
import { getAuth, setPersistence, localPersistence } from 'firebase/auth';

// Same config for both apps!
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Set persistent auth state (keeps user logged in across browser sessions)
setPersistence(auth, localPersistence)
  .catch(err => console.error("Failed to set auth persistence:", err));

export { auth };

3. Sync Auth State to Redux in Both Apps #

Since you’re using Redux, you’ll want to mirror Firebase’s auth state in your Redux store for both apps. This ensures your UI and business logic have access to the current user without relying solely on Firebase’s callbacks.

Add this logic to the root component of each app:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { auth } from './firebase';
import { setAuthenticatedUser, clearAuthenticatedUser } from './redux/slices/authSlice';

function AppRoot() {
  const dispatch = useDispatch();

  useEffect(() => {
    // Listen for auth state changes (fires automatically on app load)
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        // Get the ID token if you need it for API requests
        const idToken = await user.getIdToken();
        dispatch(setAuthenticatedUser({ user, idToken }));
      } else {
        dispatch(clearAuthenticatedUser());
      }
    });

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

  // Render your app routes/components here
}

When you redirect the user from your public site to the PWA, this listener will automatically detect the existing auth cookie from Firebase and populate the Redux store with the user’s data—no login required.

4. Handle Node Backend Authentication (If Applicable) #

If your Node backend serves API requests for both apps, you’ll need to validate the user’s auth state there too. Use the firebase-admin SDK to verify ID tokens or session cookies:

const admin = require('firebase-admin');

// Initialize admin SDK (do this once at app startup)
admin.initializeApp({
  credential: admin.credential.applicationDefault()
});

// Middleware to verify ID tokens
async function verifyAuth(req, res, next) {
  const idToken = req.headers.authorization?.split('Bearer ')[1];
  if (!idToken) return res.status(401).send('Unauthorized');

  try {
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    req.user = decodedToken;
    next();
  } catch (err) {
    res.status(401).send('Invalid token');
  }
}

// Use the middleware in your routes
app.get('/api/protected', verifyAuth, (req, res) => {
  res.send(`Hello, ${req.user.email}!`);
});

Since the ID token is generated on the client (and shared via Redux), both apps can send it in API requests to authenticate with your Node backend.

Key Notes to Avoid Pitfalls #

• Browser Cookie Policies: Most modern browsers allow same-site subdomain cookies by default, but test in Safari (which has stricter third-party cookie rules) to ensure compatibility. Since your apps are under the same parent domain, they’re considered "same-site," so this shouldn’t be an issue.
• Sign-Out Behavior: When a user signs out from either app, call auth.signOut()—this will clear the shared auth cookie, logging them out of both apps automatically.
• Persistent State: Using localPersistence ensures the user stays logged in even if they close and reopen the browser. If you want sessions to end when the browser closes, use browserSessionPersistence instead.

内容的提问来源于stack exchange，提问作者Luke Smetham