Flutter Web升级后Firebase Auth页面刷新会话丢失问题求助

一、先解决Firebase初始化异常 #

刷新后出现FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created，说明Web端Firebase初始化时机或配置存在问题，按以下步骤修复：

1. 确保index.html的Firebase脚本加载顺序正确
   在web/index.html的body末尾，先加载核心的firebase-app.js，再加载firebase-auth.js，不要添加async或defer属性避免加载顺序混乱：

   <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js"></script>
   <script>
     // 替换为你的Firebase项目配置
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
     };
     firebase.initializeApp(firebaseConfig);
   </script>
   

2. main函数中等待Firebase初始化完成
   在main.dart中，确保runApp执行前完成Firebase初始化，避免Widget树构建时Firebase服务未就绪：

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions.currentPlatform,
     );
     runApp(const MyApp());
   }
   

二、修复会话丢失：正确监听用户认证状态 #

你之前的两种用户检查方法都存在逻辑问题：

• 方法1在build中直接取currentUser，此时Firebase可能还未完成浏览器会话恢复，会误判用户为未登录
• 方法2在LoginPage的initState中监听，刷新后LoginPage先加载，Firebase初始化未完成导致监听失效

正确做法是在根Widget中使用StreamBuilder监听authStateChanges()，动态切换页面：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          // 等待Firebase加载会话状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 根据用户状态跳转对应页面
          return snapshot.hasData ? const HomePage() : const LoginPage();
        },
      ),
    );
  }
}

三、正确设置会话持久化 #

setPersistence需要在登录操作之前调用，因为登录时会采用当前的持久化配置，修改登录按钮代码如下：

ElevatedButton(
  child: const Text('Login'),
  onPressed: () async {
    try {
      // 先设置本地持久化（Web端推荐使用LOCAL，关闭浏览器后会话仍保留）
      await FirebaseAuth.instance.setPersistence(Persistence.LOCAL);
      // 执行登录操作
      final userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: emailText!.text.trim(),
        password: passwordText!.text.trim(),
      );
      if (userCredential.user != null) {
        // 使用pushReplacement避免返回登录页
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => const HomePage()),
        );
      }
    } on FirebaseAuthException catch (e) {
      print(e.message.toString());
    } catch (e) {
      print(e.toString());
    }
  },
)

四、额外注意事项 #

• 热重载会话恢复：使用StreamBuilder后，热重载会重新监听Firebase会话状态，自动恢复已登录用户的页面
• 插件版本兼容：升级Flutter SDK后，同步升级firebase_core和firebase_auth插件到最新稳定版，避免版本不兼容问题

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