FirebaseUI网页版登录后，如何将Firebase令牌传递至重定向URL？

Great question—this is such a common gap in the FirebaseUI docs, so I’m glad you asked. Let’s break down the best approaches based on what you’re trying to do:

1. Passing to a Redirect URL (Post-Login) #

When you want to send the token to a page you’re redirecting to right after login, you have two main options:

Option A: Session Storage (Recommended for Most Cases) #

This keeps your URL clean and avoids exposing the token in browser history or server logs. Here’s how to implement it:

// After FirebaseUI login, listen for auth state changes
firebase.auth().onAuthStateChanged(async (user) => {
  if (user) {
    const idToken = await user.getIdToken();
    // Store the token temporarily in session storage
    sessionStorage.setItem('firebase_auth_token', idToken);
    // Redirect to your target page
    window.location.href = '/dashboard';
  }
});

// On your target page (e.g., /dashboard)
document.addEventListener('DOMContentLoaded', () => {
  const token = sessionStorage.getItem('firebase_auth_token');
  if (token) {
    // Use the token for API calls or page logic
    console.log('Received token:', token);
    // Clean up the storage to avoid leftover data
    sessionStorage.removeItem('firebase_auth_token');
  }
});

Note: Session storage is tied to the browser tab and cleared when the tab closes, so it’s safe for short-lived token handoffs. Just make sure your pages are protected against XSS attacks, since malicious scripts could access session storage.

Option B: URL Query Parameter (Use Sparingly) #

If you need the token to be visible in the URL (e.g., for server-side rendering that needs it on page load), you can append it as a query parameter. Always encode the token to avoid issues with special characters:

firebase.auth().onAuthStateChanged(async (user) => {
  if (user) {
    const idToken = await user.getIdToken();
    // Encode the token to handle special characters
    const encodedToken = encodeURIComponent(idToken);
    // Redirect with token as a query param
    window.location.href = `/dashboard?token=${encodedToken}`;
  }
});

Caveats: The token will appear in browser history, server logs, and bookmarks. JWTs are signed but their payload is base64-decodable, so avoid putting sensitive data in the token’s claims if you use this method. Also, some servers have limits on URL length, though most JWTs are short enough to fit.

2. Passing to APIs or Other Pages (Post-Redirect) #

For API calls or later page navigation, the approach depends on the target:

API Requests (Best Practice: Request Headers) #

Never send tokens in URL parameters for API calls—use the Authorization header with the Bearer scheme instead. This is the industry standard for secure token transmission:

async function fetchUserData() {
  const user = firebase.auth().currentUser;
  if (user) {
    const idToken = await user.getIdToken();
    const response = await fetch('/api/user-data', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${idToken}`
      }
    });
    const data = await response.json();
    // Handle the response data
  }
}

Your backend can then validate the token using the Firebase Admin SDK to ensure it’s legitimate and hasn’t expired.

Cross-Domain Page Navigation #

If you need to send the token to a different domain, session storage won’t work (it’s domain-isolated). Your options here are:

• URL Query Parameter: Same as above, but be extra cautious about token exposure across domains.
• Backend-Mediated Handoff: Have your backend set a secure, HttpOnly cookie after validating the token, then the cross-domain page can use that cookie (you’ll need to configure CORS and SameSite cookie settings appropriately).

Critical Final Note #

No matter which method you use, always validate the token on your backend. Never trust a token just because it was sent from the frontend—use the Firebase Admin SDK to verify its signature, expiration, and intended audience.

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