In go_router update StatefulShellRoute.indexedStack() user's custom claims after signing in

Question

Been trying out the go_router StatefulShellRoute.indexedStack() together with FirebaseAuth custom claims. Essentially, I want to customize the StatefulShellBranch depending on their custom claim as is its recommended use. But after going through the /loader route which sets the user's role using riverpod the StatefulShellRoute still uses the same branch list before they signed up.

I tried using routes.refresh() after signing in but nothing happens.

Routes

@riverpod
GoRouter routes(RoutesRef ref) {

  ...

  Role role = 'guest';
  ref.listen(roleProvider, (previous, next) {
    ...
    // Once user signs in the role changes according to their FirebaseAuth custom claims
    // I'm using "admin" as an example
    role = 'admin';
  });

  ...

  return GoRouter(
    initialLocation: '/signin',
    redirect: (context, state) {
      ...
      // Successful signin redirects user to '/loading'
      if(signinSuccess) return '/loader';
      ...
    },
    routes: [
      GoRoute(
        path: '/signin', name: 'signin',
        builder: (_, state) => const SigninView(),
      ),

      // After signing in I access Firestore before starting the app
      // Redirect to '/' after I've loaded everything
      GoRoute(
        path: '/loader', name: 'loader',
        builder: (_, state) => const LoaderView(),
      ),

      StatefulShellRoute.indexedStack(
        builder: (context, state, navigationShell) {
          // No problem here. Navbar text changes according to the role
          return ScaffoldWithNavBar(navigationShell: navigationShell, role: role);
        },
        branches: [
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: '/',
                name: 'home',
                builder: (_, state) => const HomeView(),
              ),
            ],
          ),

          if (role == 'admin')
            StatefulShellBranch(
              routes: [
                GoRoute(
                  path: '/admin', name: 'admin',
                  builder: (_, state) => AdminView(),
                ),
              ],
            ),

          // This still shows instead of the one above for 'admin'
          if (role == 'guest')
            StatefulShellBranch(
              routes: [
                GoRoute(
                  path: '/foo',
                  name: 'foo',
                  builder: (_, state) => FooView(),
                ),
              ],
            ),
        ],
      ),
    ],
  );
}

LoaderView.dart

The view the user gets directed to after signing in successfully. I use this to load any data I might need from Firestore before starting the app.

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

  // User is already signed in at this point and
  // I query any Firestore data I might need before starting the app
  ...

  ref.listen(loaderProvider, (previous, loadingDone) {
    if(loadingDone.valueOrNull == true) {
      // Tried to refresh it here but won't work
      ref.watch(routesProvider).refresh();
      context.goNamed('home');
    }
  });

  return Scaffold(
      body: SizedBox(...);
}