Nested Route Guards dont work with AutoTabsScaffold

[anthony-seventhbeam]

I'm seeing an issue where the Route Guard authGuard added to AutoRoute below isn't working with the AutoTabsScaffold's

    AutoRoute(
          path: '/',
          page: RootRoute.page,
          initial: true,
          children: [
            AutoRoute(path: 'home', page: HomeRoute.page, initial: true),
            AutoRoute(path: 'categories', page: CategoriesRoute.page),
            AutoRoute(path: 'account', page: AccountRoute.page, guards: [authGuard]),
          ],
        ),

@RoutePage()
class RootPage extends StatelessWidget {
  const RootPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
        homeIndex: 0,
        routes: const [
          HomeRoute(),
          CategoriesRoute(),
          AccountRoute(),
        ],
        bottomNavigationBuilder: (_, tabsRouter) {
          return BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.list_alt_outlined),
                label: 'Categories',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.account_circle_outlined),
                label: 'Account',
              ),
            ],
            currentIndex: tabsRouter.activeIndex,
            selectedItemColor: Colors.blue[800],
            onTap: tabsRouter.setActiveIndex,
          );
        });
  }
}

Is this a known issue? Am I doing something incorrect? Would appreciate some feedback as currently my only other idea is to swap out the AutoTabsScaffold routes whenever the authentication value changes

[anthony-seventhbeam]

I was able to resolve this by adding another AutoRoute definition inside the children of nested AutoRoute:

        AutoRoute(path: '/login', page: LoginRoute.page),
        AutoRoute(
          path: '/',
          page: RootRoute.page,
          initial: true,
          children: [
            AutoRoute(path: 'home', page: HomeRoute.page, initial: true),
            AutoRoute(path: 'categories', page: CategoriesRoute.page),
            AutoRoute(path: 'account', page: AccountRootRoute.page, children: [
              AutoRoute(
                path: '',
                page: AccountRoute.page,
                guards: [authGuard],
                initial: true,
              ),
              AutoRoute(
                path: 'login',
                page: LoginRoute.page,
              ),
            ]),
          ],
        ),

However this approach concerns me. Should a routes list have multiple definitions of the same LoginRoute?

Also, I've found that the reevaluateListenable doesnt revaluate nested AutoRoute RouteGuards. So in this example, RootePage's AutoTabsScaffold doesnt have its selected active index revaluated when the auth state changes.

My current hack is the set the AutoTabsScaffold's key uniquely to the auth state (recreating the entire widget if the state changes, therefore reevaluating the AuthGuard. I don't like this as it mostly defeats the point of the using an AuthGuard on the nested root.

[ChessMax]

I encountered the same problem, guard isn't called with AutoTabsScaffold. What's the proper way to do it?

[ChessMax]

It turns out that guards in TabsRouter are not supported 😞.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[wamynobe]

Any update on this please?