Firebase实现Google登录后如何配置自动跳转至首页？

核心原因是auth.signInWithPopup为异步Promise方法，你当前没有处理登录成功的回调逻辑，因此无法触发跳转动作，按以下步骤调整即可：

方案1：调用侧处理登录结果（灵活度更高，推荐） #

你现有的signInWithGoogle方法本身已经返回signInWithPopup的Promise结果，只需要在按钮绑定的点击事件中追加成功后的跳转逻辑即可。
如果是React + React Router v6 环境，代码调整如下：

import { useNavigate } from 'react-router-dom';
import { signInWithGoogle } from "../../Firebase/utils";

// 组件内部逻辑
const YourComponent = () => {
  const navigate = useNavigate();

  const handleGoogleLogin = async () => {
    try {
      // 等待登录异步操作完成
      await signInWithGoogle();
      // 登录成功后跳转到首页，路径可替换为你实际的首页路由
      navigate('/');
      // 原生JS/其他框架替换跳转逻辑为：window.location.replace('/')
    } catch (error) {
      // 可在此处添加登录失败的提示逻辑
      console.error('Google登录失败：', error);
    }
  }

  return (
    <ButtonForm onClick={handleGoogleLogin}>
      Continue with Gmail
    </ButtonForm>
  )
}

方案2：封装跳转逻辑到登录方法中 #

如果需要统一处理登录后的跳转逻辑，可以修改Firebase工具文件的方法：

调整../../Firebase/utils中的代码： #

const GoogleProvider = new firebase.auth.GoogleAuthProvider();
GoogleProvider.setCustomParameters({ prompt: "select_account" });
// 新增成功、失败回调入参
export const signInWithGoogle = async (onSuccess, onError) => {
  try {
    await auth.signInWithPopup(GoogleProvider);
    onSuccess?.();
  } catch (error) {
    console.error('登录失败：', error);
    onError?.(error);
  }
}

调用侧代码调整： #

import { useNavigate } from 'react-router-dom';
import { signInWithGoogle } from "../../Firebase/utils";

const YourComponent = () => {
  const navigate = useNavigate();
  return (
    <ButtonForm onClick={() => signInWithGoogle(() => navigate('/'))}>
      Continue with Gmail
    </ButtonForm>
  )
}

注意：如果不需要保留登录页的历史回退记录，可将navigate('/')替换为navigate('/', { replace: true })，原生JS对应替换为window.location.replace('/')。

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