Flutter Web调试时Firebase认证状态重置问题

问题本质 #

这不是Firebase Web端的预期设计，核心原因是持久化设置时机错误或调试阶段Firebase Auth未完成本地缓存加载就获取用户状态，导致启动时拿到null。

解决方案 #

1. 提前设置持久化（关键步骤）

setPersistence必须在任何Auth操作（登录、获取用户状态）之前调用，最稳妥的时机是Firebase初始化完成后立刻执行：

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化Firebase
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  
  // Web端专属：提前设置本地持久化
  if (kIsWeb) {
    await FirebaseAuth.instance.setPersistence(Persistence.LOCAL);
  }
  
  runApp(const MyApp());
}

2. 正确获取初始用户状态

authStateChanges().first会在Auth初始化完成前返回null，改用带等待逻辑的监听来获取真实初始状态：

// 替代原有的直接取first的逻辑
Future<User?> getInitialUser() async {
  final completer = Completer<User?>();
  final subscription = FirebaseAuth.instance.authStateChanges().listen((user) {
    if (!completer.isCompleted) {
      completer.complete(user);
      subscription.cancel(); // 拿到初始值后取消监听
    }
  });
  return completer.future;
}

// 使用示例
final firebaseUser = await getInitialUser();

或者直接依赖authStateChanges的持续监听来更新UI，而非启动时一次性获取。

3. 调试时保留浏览器缓存

Flutter Web默认启动Chrome时会使用临时用户数据目录，停止运行后缓存会被清除。启动时指定固定用户数据目录，就能保留认证状态：

flutter run -d chrome --user-data-dir=./chrome_debug_profile

后续重启调试时，Chrome会复用这个目录的缓存，认证状态不会丢失。

4. 无需单独存储到Shared Preferences

Firebase Auth Web已将认证会话存储在浏览器的localStorage中，只要持久化设置正确，无需手动存入Shared Preferences，否则可能导致状态不一致。

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