Flutter Web集成Firebase Google登录报错，登录后无法进入主界面

问题根源 #

控制台的[GSI_LOGGER-TOKEN_CLIENT]日志是因为Web端未加载gapi.client库，但登录后无法跳转的核心原因是Web端Google登录的实现适配性不足（你用的google_sign_in插件逻辑更适配移动端），或者缺少登录状态的监听逻辑。

解决方案 #

方案1：换用Firebase Auth Web原生登录（推荐，适配性更强） #

直接用Firebase Auth提供的Web专属方法替代google_sign_in插件，代码更简洁也更适配Web环境：

修改auth_service.dart：

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  Future<UserCredential> signInWithGoogle() async {
    final GoogleAuthProvider provider = GoogleAuthProvider();
    // 弹窗式登录（Web端常用）
    return await FirebaseAuth.instance.signInWithPopup(provider);
    
    // 若需跳转式登录，替换为下面代码，同时要在main函数处理跳转结果
    // return await FirebaseAuth.instance.signInWithRedirect(provider);
  }
}

如果用跳转式登录，必须在main.dart的main函数里处理跳转结果：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 处理Google跳转登录的返回结果
  await FirebaseAuth.instance.getRedirectResult();

  runApp(const MyApp());
}

方案2：修复现有google_sign_in插件的Web配置 #

如果不想换代码，需要补充Web端的gapi库加载，同时确保监听登录状态：

1. 在web/index.html的<head>里加gapi加载脚本：

<script src="https://apis.google.com/js/api.js"></script>

2. 确保App通过监听Auth状态变化来触发页面跳转，比如在main.dart里用StreamBuilder：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          // 已登录就显示主页
          if (snapshot.hasData) {
            return const HomeScreen();
          }
          // 未登录显示登录页
          else {
            return const LoginScreen();
          }
        },
      ),
    );
  }
}

必查验证项 #

• 确认web/index.html里的Firebase配置包含正确的authDomain，和Firebase控制台一致
• 去Firebase控制台，把你的本地开发域名（比如http://localhost:5000）和生产域名加到Web应用的OAuth授权域名列表里

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