React Web中FirebaseUI Auth自定义登录成功重定向含UID问题求助

我完全懂你遇到的困扰——想在登录成功后跳转到带用户UID的专属页面，但修改redirectUrl参数根本没效果，这是因为FirebaseUI的signInSuccess回调里，这个参数是只读的，而且当你返回false时，FirebaseUI只会停止默认跳转逻辑，不会自动用你修改后的地址。

正确的处理思路 #

你需要在signInSuccess回调里手动执行跳转操作，而不是试图修改传入的redirectUrl。下面分两种常用场景给出解决方案：

1. 普通浏览器跳转（适合未使用React Router的项目）

直接用window.location.href完成跳转：

const uiConfig = { 
  signInFlow: 'popup', 
  signInSuccessUrl: '/', // 仅作为 fallback，实际会被手动跳转覆盖
  signInOptions: [ 
    firebase.auth.GoogleAuthProvider.PROVIDER_ID, 
    firebase.auth.FacebookAuthProvider.PROVIDER_ID, 
    { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: true }, 
  ], 
  callbacks: { 
    signInSuccess: function(currentUser, credential, redirectUrl) { 
      const userId = currentUser.uid;
      // 手动跳转到用户专属页面
      window.location.href = `/users/${userId}`;
      // 返回false阻止FirebaseUI的默认跳转行为
      return false; 
    }, 
  } 
};

2. React Router单页跳转（React项目推荐用法）

如果你的项目使用React Router，建议用它的导航API实现无刷新跳转，体验更流畅：

// React Router v6+ 示例
import { useNavigate } from 'react-router-dom';

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

  const uiConfig = { 
    signInFlow: 'popup', 
    signInSuccessUrl: '/', 
    signInOptions: [ 
      firebase.auth.GoogleAuthProvider.PROVIDER_ID, 
      firebase.auth.FacebookAuthProvider.PROVIDER_ID, 
      { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: true }, 
    ], 
    callbacks: { 
      signInSuccess: function(currentUser, credential, redirectUrl) { 
        const userId = currentUser.uid;
        // 使用React Router的导航方法跳转
        navigate(`/users/${userId}`);
        return false; 
      }, 
    } 
  };

  // 渲染FirebaseUI的逻辑...
}

为什么之前的写法不生效？ #

• redirectUrl是FirebaseUI传入的原始配置值（也就是你设置的signInSuccessUrl），修改它不会影响FirebaseUI的内部逻辑；
• 返回false的作用是告诉FirebaseUI：“跳转我自己来处理，不用你管”，但它不会主动读取你修改后的redirectUrl，所以必须手动执行跳转代码。

这样修改后，登录成功就会正确跳转到/users/${userId}页面了！

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