Flutter autoroute with firebase authentication

Question

I recently tried the flutter auto_route package for navigations in my projects because handling the navigations with user authentications is always challenging for me, I always tried to find a way that my path is easy. So in my current projects, I decide to use auto_route because it provides a route guard that protects the screen and for authentication, I use firebase auth but the issue is that no resource shows how we can handle firebase authentication with auto_route even the officiation documentation doesn't mention route guard in details.

And since I'm new with auto_route and weak in navigations so it's hard to create my solutions. So if there is anyone who uses auto_route with firebase authentication so can you please share some code snippets or if you know any article that explains the process step-wise step. Thanks

Alexandrine

Answer 1

Currently I used the auto_route package for my latest project for navigation.

1. When your authentication is successful, store user data in hive and check if hive contains that key, then navigate to the next page (see code below)

2. I have done lot's of research to find this method and I created a single call for managing navigation

   import 'package:auto_route/auto_route.dart';
   import 'package:sspl_admin/src/global/user_data_util.dart';
   import 'package:sspl_admin/src/model/user_modal.dart';
   import 'package:sspl_admin/src/utils/hive/hive_utils.dart';
   import 'routes.gr.dart';
   
   @AutoRouterConfig(replaceInRouteName: 'Page,Route')
   class AppRouter extends $AppRouter {
     @override
     RouteType get defaultRouteType => const RouteType.material();
   
     @override
     final List<AutoRoute> routes = [
       AutoRoute(
         path: '/',
         page: MenuBarRoute.page,
         initial: true,
         guards: [AuthGuard()],
         children: [
           AutoRoute(
             path: 'dashboard',
             page: Dashboard.page,
             initial: true,
           ),
           AutoRoute(
             path: 'category',
             page: CategoryRoute.page,
           ),
         ],
       ),
       AutoRoute(
         path: '/login-page',
         page: LoginRoute.page,
       ),
     ];
   }
   
   class AuthGuard extends AutoRouteGuard {
     @override
     void onNavigation(NavigationResolver resolver, StackRouter router) 
     async {
       // Check if the user is logged in.
       bool isLoggedIn = HiveUtils.isContainKey(HiveKeys.userData);
   
       // If the user is logged in, allow the navigation to proceed.
       if (isLoggedIn) {
       final UserDataUtils userDataUtils = UserDataUtils();
       final Map<String, dynamic> data = HiveUtils.get(HiveKeys.userData);
       final UserData loginModel = UserData.fromJson(data);
       userDataUtils.setUserData(loginModel);
       resolver.next(true);
     } else {
       // If the user is not logged in, redirect the user to the login page 
       page.router.navigate(const LoginRoute());
     }
   }
   

Sixfooter