使用Provider管理Firebase Auth登录状态，成功登录未跳转首页，重启才生效

成功登录后已弹出成功提示，但页面未自动跳转到Home页；仅当重启应用时，才能自动导航到Home页。控制台已打印“Logged in State”，但页面未触发跳转。手动用Navigator跳转可行，但希望通过Provider状态管理自动触发页面重建，而非手动导航。

使用的Firebase登录函数 #

登录逻辑为先完成登录再检查邮箱验证状态，登录成功提示弹出后，依赖Provider状态管理的组件未重建：

class FirebaseUserAuthentication {
  final FirebaseAuth _auth;

  FirebaseUserAuthentication(this._auth);

  // State Management
  Stream<User?> get authState => _auth.authStateChanges();
  User get user => _auth.currentUser!;

  Future<void> signIn({
    required String email,
    required String password,
    required BuildContext context
  }) async {
    try {
      await _auth.signInWithEmailAndPassword(
        email: email.toString().trim(), 
        password: password.toString().trim()
      );
      if (_auth.currentUser!.emailVerified == false) {
        await sendEmailVerificaiton(context);
      }
      showSnackBar(context, "Logged in Successfully");
    } on FirebaseAuthException catch (e) {
      if (e.code != null) {
        showSnackBar(context, e.message!);
      }
    }
  }
}

使用Provider的main.dart包装类 #

AuthWrapper通过Provider检查用户状态，登录状态下应跳转到Home页，但实际未触发页面重建：

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider<FirebaseUserAuthentication>(
          create: (_) => FirebaseUserAuthentication(FirebaseAuth.instance)
        ),
        StreamProvider(
          create: (context) => context.read<FirebaseUserAuthentication>().authState, 
          initialData: null, 
        ),
      ],
      child: MaterialApp(
        title: "My App",
        home: AuthWrapper(),
        routes: {
          '/splash': (context) => SplashScreen(),
          '/welcome': (context) => WelcomePage(),
          '/login': (context) => LoginPage(),
          '/register': (context) => RegisterPage(),
          '/home' : (context) => HomePage(),
          '/marketplace' : (context) => MarketPlacePage(),
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final firebaseUser = context.watch<User?>();
    if(firebaseUser!=null)
    {
      print("Logged in State");
      return HomePage();
    }
    print("Logged out State");
    return WelcomePage();
  }
}

问题原因及解决方案 #

核心原因 #

authStateChanges()流在登录成功后未及时发出新的用户状态事件，导致StreamProvider未更新，AuthWrapper也就不会触发重建。

解决方案1：手动管理状态流（推荐） #

通过自定义StreamController强制触发状态更新，确保Provider能捕获到登录后的用户状态变化：

class FirebaseUserAuthentication {
  final FirebaseAuth _auth;
  final StreamController<User?> _userController = StreamController<User?>.broadcast();

  FirebaseUserAuthentication(this._auth) {
    // 监听原生Auth状态变化并同步到自定义流
    _auth.authStateChanges().listen((user) {
      _userController.add(user);
    });
  }

  // 替换原authState为自定义流
  Stream<User?> get authState => _userController.stream;
  User? get user => _auth.currentUser;

  Future<void> signIn({
    required String email,
    required String password,
    required BuildContext context
  }) async {
    try {
      await _auth.signInWithEmailAndPassword(
        email: email.trim(), 
        password: password.trim()
      );
      // 登录成功后手动推送最新用户状态到流中
      _userController.add(_auth.currentUser);
      
      if (_auth.currentUser?.emailVerified == false) {
        await sendEmailVerificaiton(context);
      }
      showSnackBar(context, "Logged in Successfully");
    } on FirebaseAuthException catch (e) {
      if (e.message != null) {
        showSnackBar(context, e.message!);
      }
    }
  }

  // 页面销毁时关闭控制器，避免内存泄漏
  void dispose() {
    _userController.close();
  }
}

解决方案2：替换为Consumer监听 #

将AuthWrapper中的context.watch替换为Consumer，确保状态变化能触发组件重建：

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

  @override
  Widget build(BuildContext context) {
    return Consumer<User?>(
      builder: (context, firebaseUser, child) {
        if(firebaseUser!=null)
        {
          print("Logged in State");
          return HomePage();
        }
        print("Logged out State");
        return WelcomePage();
      },
    );
  }
}

额外注意事项 #

• 确保sendEmailVerificaiton方法不阻塞主流程，可将其放在登录成功后的异步任务中，避免延迟状态更新。
• 检查Firebase Auth依赖版本，旧版本可能存在authStateChanges()不触发的已知bug，建议升级到最新稳定版。

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