To implement navigation guards using autoroute flutter

Question

I'm trying to learn to auto_route and its features. Now I'm stuck in navigation guards, I'm using Riverpod for state management. Here I wanted to implement an authGuard for navigating users to different screens if user is not logged in.

class AppRouter extends _$AppRouter {
 @override
 List<AutoRoute> get routes => [
    AutoRoute(
      page: SplashRoute.page,
      initial: true,
    ),
    AutoRoute(page: StarredRepoRoute.page, guards: [AuthGuard]),
    AutoRoute(page: SignInRoute.page),
    AutoRoute(page: AuthorizationRoute.page),
  ];

bool isInitialRoute() {
return false;
}
}

The above-pasted code is the AppRouter and you can see that I have mentioned guards for StarredRepoRoute and the guard is AuthGuard.

class AuthGuard extends AutoRouteGuard {
 final Ref _ref;
 AuthGuard(this._ref);
 @override
 void onNavigation(NavigationResolver resolver, StackRouter router) async {
   final authState = _ref.watch(authNotifierProvider);
   authState.maybeMap(
    orElse: () => false,
    authenticated: (_) => true,
  );
 }
}

If the onNavigation return true it will navigate to StarredRepoRoute. I also settled up an authGuardProvider for it.

final authGuardProvider = Provider<AuthGuard>((ref) {
  return AuthGuard(ref);
});

But the issue is that when I refer to guard as AuthGuard as appRouter it says

Is there anything I miss or is there any other way to implement it?

Answer 1

RiverPod already serves as replacement for dependency injection I think you don't need to add another one. Have you tried passing the WidgetRef through AppRoute constructor?

class MainApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
        routerConfig: AppRouter(ref).config(),
    ...

on the AppRoute file do:

@AutoRouterConfig()
class AppRouter extends $AppRouter {
  WidgetRef ref;

  AppRouter(this.ref) : super();

  @override
  List<AutoRoute> get routes => [
        AutoRoute(path: '/', page: LoginRoute.page),
        AutoRoute(
          path: '/main-nav',
          page: MainNav.page,
          guards: [AuthGuard(ref)],
        ),
      ];
}

and finally on the GuardRoute do:

class AuthGuard extends AutoRouteGuard {
  final WidgetRef ref;

  AuthGuard(this.ref);

  @override
  void onNavigation(NavigationResolver resolver, StackRouter router) async {
    UserDTO? user = ref.watch(userServiceProvider.notifier).getLoggedUser();

    if (user != null) {
      resolver.next(true);
    } else {
      router.push(const LoginRoute());
    }
  }
}