React应用中Firebase signInWithRedirect登录后重定向异常，需跳转至首页/原URL

1. 提前存储目标跳转URL #

触发登录前，把需要跳转的目标地址（可以是当前页面路径，也可以直接指定首页）存在本地存储中，比如在登录按钮的点击事件里处理：

const handleGoogleLogin = () => {
  // 若要回到登录前的原页面，用window.location.pathname；固定跳首页就直接存"/"
  localStorage.setItem('redirectAfterLogin', window.location.pathname || '/');
  signInWithRedirect(auth, provider);
};

2. 在Auth状态监听中直接处理重定向 #

不要在登录组件里用getRedirectResult，而是在根组件（比如App.js）里监听用户认证状态，一旦检测到登录成功，直接读取存储的地址跳转，避免组件加载延迟：

import { useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        const redirectUrl = localStorage.getItem('redirectAfterLogin') || '/';
        localStorage.removeItem('redirectAfterLogin');
        navigate(redirectUrl);
      }
    });

    return unsubscribe;
  }, [auth, navigate]);

  // 其他组件渲染逻辑
}

3. 配置Firebase授权重定向URI #

登录Firebase控制台，进入认证 > 登录方法 > 谷歌，把你的域名（包括登录页和目标跳转页，比如https://xyz.com/login、https://xyz.com）添加到「授权的重定向URI」列表中，避免重定向被拦截。

问题原因说明 #

• 直接调用signInWithRedirect时，Firebase默认会跳转到发起登录请求的页面（也就是/login），因为这是调用该方法的上下文页面。
• getRedirectResult需要等待组件挂载后才执行，所以会先加载登录页组件再触发跳转，导致视觉上的延迟感。

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