How can i use refreshListenable with a BlocConsumer ?

[tc]

I have a BlocConsumer<AuthCubit, AuthState> which listens to loaded: (s) where s.token contains a new user token when the user logs in or out:

            return BlocConsumer<AuthCubit, AuthState>(
              builder: (context, state) {
                return state.map(
                  loaded: (s) {
                    // handle new user token value: s.token

I saw https://github.com/csells/go_router/blob/main/go_router/example/lib/router_stream_refresh.dart

but unsure how to adopt

      // changes on the listenable will cause the router to refresh it's route
      refreshListenable: GoRouterRefreshStream(loggedInState.stream),

to listen to bloc states after being emitted: emit(AuthState.loaded(token: _tokenController.value));

[csells]

Check out the docs: https://gorouter.dev/redirection

[csells]

we're way out of my depth wrt how bloc works. @jopmiddelkamp do you have some advice here?

[tc]

Asking in a different way, is there a way to get access to the GoRouter in context before MaterialApp.router is created?

          return BlocConsumer<AuthCubit, AuthState>(
              listenWhen: (context, state) {
            return state is AuthStateLoaded;
          }, listener: (context, state) {
            if (state is AuthStateLoaded) {
              // "No GoRouter found in context"
              context.go('/');
            }
          }, builder: (context, state) {
            return BlocBuilder<AppSettingsCubit, AppSettingsState>(
              builder: (context, state) {
                return state.map(
                  loaded: (appSettingsStateLoaded) {
                    return MaterialApp.router(
                      routeInformationParser: _router.routeInformationParser,
                      routerDelegate: _router.routerDelegate,
                      debugShowCheckedModeBanner: false,

[jopmiddelkamp]

Please don't copy-paste this as I've stripped a lot of error handling and modified it a little so it matches your example. But what I personally did was the following.

FYI: You can execute your magic in the top_level_guard.dart in my example below.

main.cs

    BlocOverrides.runZoned(
      () async {
        final authCubit = AuthCubit()..init();
        
        // Make auth cubit initialize when the splash screen is active
        await authCubit.onReady;

        runApp(App(
          appCubit: appCubit,
        ));
      },
    ),

auth_cubit.dart

class AuthCubit extends CubitBase<AuthState> with ReadyMixin {
  AuthCubit({})  : super(const AuthState.initializing());

  Stream<bool> get routeRefreshStream => stream
      .where((state) => state is AuthLoaded)
      .map((state) => (state as AuthLoaded).hasSignedIn)
      .distinct();

  Future<void> init() async {
    emit(AuthState.loaded( ... ));
    readyCompleter.completeIfNotCompleted();
  }
}

ready_mixin.dart

@optionalTypeArgs
mixin ReadyMixin<TResult> {
  @protected
  Completer<TResult> readyCompleter = Completer<TResult>();

  bool get isReady => readyCompleter.isCompleted;
  bool get isNotReady => !isReady;

  Future<TResult> get onReady => readyCompleter.future;
}

app.dart

class App extends StatefulWidget {
  const App({
    required this.authCubit,
    Key? key,
  }) : super(key: key);

  final AuthCubit authCubit;

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  late GoRouter router;

  @override
  void initState() {
    super.initState();
    router = GoRouter(
      routes: kRoutes,
      urlPathStrategy: UrlPathStrategy.path,
      debugLogDiagnostics: kDebugMode,
      redirect: (state) => topLevelGuard(
        widget.authCubit,
        state,
      ),
      refreshListenable: GoRouterRefreshStream(
        widget.authCubit.routeRefreshStream,
      ),
    );
  }

  BlocProvider<AuthCubit> _blocProvider(
    WidgetBuilder builder,
  ) {
    return BlocProvider.value(
      value: widget.authCubit,
      child: Builder(builder: builder),
    );
  }

  @override
  Widget build(
    BuildContext context,
  ) {
    return _blocProvider((context) {
      return MaterialApp.router(
        title: '...',

        // Routing
        routerDelegate: router.routerDelegate,
        routeInformationParser: router.routeInformationParser,
      );
    });
  }
}

top_level_guard.dart

String? topLevelGuard(
  AuthCubit authCubit,
  GoRouterState state,
) {
  final authState = authCubit.state;
  if (authState is! AuthLoaded) {
    return null;
  }

  // Do your magic here
 
  return null;
}

Please let me know if this helped you.

[jopmiddelkamp]

It's a extension method with an if statement if it's not completed complete it.

[tc]

I'm having trouble getting the routeRefreshStream to call the redirect on the signout action:

auth_cubit.dart

class AuthCubit extends Cubit<AuthState> with ReadyMixin {
  AuthCubit() : super(AuthState.initial());

  Stream<bool> get routeRefreshStream => stream.map((state) => (state is AuthStateLoaded)).distinct();

  void signOut() {
    emit(AuthState.loading());
    _sdk.authRepository.signOut().then((_) {
      print('emit loaded');
      emit(AuthState.loaded(token: ''));
    })

main.dart

class _MyAppState extends State<MyApp> {
  late String oldToken;
  late String currentToken;
  late GoRouter _router;

  @override
  void initState() {
     oldToken = '';
     currentToken = '';

     _router = GoRouter(
      refreshListenable: GoRouterRefreshStream( widget.authCubit.routeRefreshStream,),

      redirect: (state) {
        final authState = widget.authCubit.state;

        print('state subloc: ${state.subloc} ${authState}');
        if (authState is AuthStateLoaded) {
          currentToken = authState.token;
        }

        print('oldToken $oldToken currentToken $currentToken');

app loads and calls the redirect

state subloc: / AuthState.loaded(token: )
oldToken  currentToken 
state subloc: /app/home AuthState.loaded(token: )

When I call the BlocProvider.of<AuthCubit>(context).signOut();, i see emit loaded from the signout() print logging stmt but it doesn't call the redirect in the GoRouter?

[log] AuthCubit: Change { currentState: AuthState.loading(), nextState: AuthState.loaded(token: ) }
[log] AuthCubit: Change { currentState: AuthState.loaded(token: ), nextState: AuthState.loading() }
[log] AuthCubit: Change { currentState: AuthState.loading(), nextState: AuthState.loaded(token: ) }
emit loaded

it's missing the print statement in redirect like when the app loaded above with state subloc: /app/home AuthState.loaded(token: )

Is there wrong something with refreshListenable: GoRouterRefreshStream( widget.authCubit.routeRefreshStream,), such that it doesn't call `redirect??

I tried it with and without the distinct :

  Stream<bool> get routeRefreshStream => stream.map((state) => (state is AuthStateLoaded)).distinct();

[jopmiddelkamp]

Strange.. on first sight, it seems like it should be working as you switch between loaded and loading state.. This is a bit strange as you are not loading when pressing the sign-out button..

Can you maybe create two different states?

AuthState.authenticated(token: '<token_placeholder>')
AuthState.unauthenticated()

auth_cubit.dart

class AuthCubit extends Cubit<AuthState> with ReadyMixin {
  AuthCubit() : super(AuthState.loading());

  Stream<AuthState> get routeRefreshStream => stream.where((state) => state is AuthStateAuthenticated || state is AuthStateUnauthenticated).distinct();

  void init() {
    final token = _sdk.authRepository.user.token;
    if (token?.isNotEmpty ?? false) {
      log('### AuthCubit.init(): AuthState.authenticated()');
      emit(AuthState.authenticated(token: token));
    } else 
      log('### AuthCubit.init(): AuthState.unauthenticated()');
      emit(AuthState.unauthenticated());
    }
    readyCompleter.completeIfNotCompleted();
  }

  void signIn() {
    _sdk.authRepository.signIn().then((user) {
      log('### _sdk.authRepository.signIn()');
      emit(AuthState.authenticated(token: user.token));
    });
  }

  void signOut() {
    _sdk.authRepository.signOut().then((_) {
      log('### _sdk.authRepository.signOut()');
      emit(AuthState.unauthenticated());
    });
  }
}

[jopmiddelkamp]

And btw if you put dart above your code block it gets styled with different colors. Example:

dart
```
```

Makes it a bit easier to read.

[tc]

thanks @jopmiddelkamp ; i was able to fix without adding a new state.

I did better checking of the oldToken and currentToken:

    _router = GoRouter(
      refreshListenable: GoRouterRefreshStream(
        widget.authCubit.routeRefreshStream,
      ),
      redirect: (state) {
        final authState = widget.authCubit.state;

        if (authState is AuthStateLoaded) {
          currentToken = authState.token;
        }

        //handle redirect to main page  after user logs in or out
        if (oldToken != currentToken) {
          print('oldToken=$oldToken currentToken=$currentToken');

          oldToken = currentToken;
          var redirectRoute = '/app/home';
          // Prevent redirect loop
          if (redirectRoute != state.subloc) {
            print('new redirect ${redirectRoute}');
            return redirectRoute;
          }
        }
        return null;
      },