Flutter Riverpod StreamProvider firing on Consumer widgets after Firebase Signout and prevents Main.dart redirect to AuthScreen

[dooziiinc]

m using Riverpod, Firebase and Flutter in a mobile app (iOS and Android) and ran into a weird behavior today. I'm flummoxed.

Background

1. My main.dart has a ref.watch for authStateChanges from Firebase and redirects to an Auth Screen if there is no user in the authStateChanges stream.
   

2. I consume data from a Riverpod StreamProvider on my ThingListScreen.dart ConsumerStatefulWidgets. I have tried both with .autoDispose and without and see the same behavior below.
   

3. I provide the user a way to sign out from within an AppDrawer and on a ProfileScreen using a call to the global_provider firebaseAuthProvider.signout() method. This works and the user gets signed out of Firebase.

Problem
The problem comes starts once I'm successfully signed in and visit my ThingListScreen that accesses the StreamProvider. If I open the app_drawer and click "Sign Out," once the ThingListScreen has already started watching the StreamProvider, main.dart doesn't redirect to the AuthScreen on signout. Main.dart hits the call to redirect but the screen doesn't switch over. Instead, the ThingListScreen runs its build() method again, AFTER main.dart has called return const AuthScreen().

I have confirmed that this doesnt happen on pages where Im not watching a StreamProvider from Riverpod.

It makes sense based on my code that the StreamProvider, which having also watched for authStateChanges, no longer has a user so it just calls return const Stream.empty().

It is puzzling to me that the thingListScreen is running it's build() method AFTER main.dart has already called for the transfer to AuthScreen(). I realize the user is still on the ThingListScreen() when the signout is triggered, but I would expect main.dart to immediately transfer over to the AuthScreen(), especially since that line of code is being executed first.

I have run the debugger and can verify the main.dart redirect to AuthScreen() is being called. Instead of transferring, however, the next thing that happens in the debugger is the ThingListScreen build() starts to run, which locks me into a ThingListScreen with an empty stream and no AuthScreen transfer.

Since this pattern seems to be pretty common (i.e. watching for authStateChanges in main.dart and immediately redirecting to an AuthScreen when the user is logged out from anywhere in the app), Im struggling to understand why its not happening in my case. Is there any way to prevent the rebuild from happening and instead just transfer over to AuthScreen()?

Any insights would be greatly appreciated!

global_providers.dart

final firebaseAuthProvider = Provider<FirebaseAuth>((ref) => FirebaseAuth.instance);

final authStateChangesProvider = StreamProvider<User?>((ref) => ref.watch(firebaseAuthProvider).authStateChanges());


final thingProvider = StreamProvider.autoDispose<List<Thing>?>((ref) {
  final authState = ref.watch(authStateChangesProvider);

  if (authState.value?.uid != null) {
    var collStream = _databaseRef.collection('users').doc(authState.value?.uid).collection('things').snapshots();

    return collStream.map((snapShot) {
      return snapShot.docs.map((doc) {
        return Thing.fromFirestore(doc, null);
      }).toList();
    });
  } else {
    return const Stream.empty();
  }
});

main.dart

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final user = ref.watch(authStateChangesProvider); // watcher for Firebase authStateChanges

    return MaterialApp(
      title: 'MyApp',
      
      home: user.when(
        data: (user) {
          if (user != null) {
            return const HomeScreen();
          } else {
            return const AuthScreen();
            // ******************** 
            // when the Firebase authStateChanges is fired, the app should immediately load the AuthScreen() since there is no user. This line IS being executed before the ThingListScreen build() starts its rebuild. The question is why the ThingListScreen is rebuilding in the first place.
            // *****************
          }
        },
        error: (e, s) => Center(child: Text('Error $e')),
        loading: () => const Center(child: CircularProgressIndicator()),
      ),
      routes: {
        AuthScreen.routeName: (ctx) => const AuthScreen(),
        HomeScreen.routeName: (ctx) => const HomeScreen(),

        ThingListScreen.routeName: (ctx) => const ThingListScreen(),
        
        //Settings
        SettingsScreen.routeName: (ctx) => const SettingsScreen(),
        ProfileScreen.routeName: (ctx) => const ProfileScreen(),
      },
    );
  }
}

thing_list_screen.dart

class ThingListScreen extends ConsumerStatefulWidget {
  static const routeName = '/thing-list';
  const ThingListScreen({super.key});
  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _ThingListScreenState();
}

class _ThingListScreenState extends ConsumerState<ThingListScreen> {

  @override
  Widget build(BuildContext context) {
    final thingProvider = ref.watch(thingProvider); // thingStreamProvider watcher

    return Scaffold(
      drawer: const AppDrawer(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              floating: false,
              pinned: true,
              snap: false,
              centerTitle: false,
              title: Row(
                children: const [
                  Icon(Constants.someIcon),
                  Expanded(
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Text(
                        'Things',
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ],
              ),
              
              bottom: AppBar(
                automaticallyImplyLeading: false,
                title: SizedBox(
                  width: double.infinity,
                  // height: 50,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [],
                  ), // Row
                ), // SizedBox
              ), // SliverAppBar
            ),
            // This is where I inject my Things from the stream provider
            thingsProvider.when(
                data: (data) {
                  return const SliverToBoxAdapter();
                },
                error: (e, s) => SliverToBoxAdapter(child: Center(child: Text('Error $e'))),
                loading: () => const SliverToBoxAdapter(child: Center(child: CircularProgressIndicator())))
          ],
        ),
      ),
    );
  }
}

app_drawer.dart

class AppDrawer extends ConsumerWidget {
  const AppDrawer({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userDetails = ref.watch(userDetailsProvider);
    final auth = ref.watch(firebaseAuthProvider); // This is the access to FirebaseAuth.instance in global_providers

    return Drawer(
      child: ListView(
        children: <Widget>[
          SizedBox(
            height: 130,
            child: DrawerHeader(
              child: userDetails.when(
                data: (user) {
                  ...
                },
                error: (e, s) => Center(child: Text('Error $e')),
                loading: () => const Center(
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
          ),
          ...
          const Divider(),
          ListTile(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Icon(Constants.iconLogout),
                Text('Sign out'),
              ],
            ),
            onTap: () async {
              await auth.signOut(); // Here I call the Firebase signout
              if (context.mounted) {
                Navigator.of(context).pop();
              }
            },
          ),
        ],
      ),
    );
  }
}

I expected that when the authStateChanges in main.dart, the user would immediately be redirected to the AuthScreen().

I tried to short circuit the build method in ThingListScreen by doing a forced manual redirection before the streamProvider has started being watched, like this:

@override
  Widget build(BuildContext context) {
    
    final authState = ref.watch(authStateChangesProvider);
    if (authState.value?.uid == null) return const AuthScreen();
    final thingsProvider = ref.watch(thingsProvider);

and that does force the redirect. However, when I log in again, the app doesn't redirect to the HomeScreen and instead transfers back to the page that was up when I logged out. This feels like a poor solution since I would have to put this conditional check on every single page from which I could logout. It also seems to defeat the purpose of having main.dart manage the redirect on authStateChanges.

[dooziiinc]

After a LONG night, I was able to work-around this behavior by manually transferring the page to the Home Screen prior to calling signout. This appears to work and the app now redirects back to the auth screen.

onTap: () async {
  Navigator.of(context).pushReplacementNamed(HomeScreen.routeName);
   await auth.signOut(); // Here I call the Firebase signout
   if (context.mounted) {
      Navigator.of(context).pop();
    }
 },