Question: best approach to protect screens behind auth about auto_route_library

[Milad-Akarie]

Hey @edwardaux You can go about achieving that using route guards.
Here are two approaches you could use
1- Let your loginScreen route return true if users successfully login.
then inside of your AuthGuard check if user is already logged in, continue to route /b otherwise navigate to the login page, your login page should return true if the auth process is a success.

class AuthGuard extends RouteGuard {
  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {
    if (isLoggedin) {
      return true;
    }
    return await navigator.pushNamed<bool>(Routes.loginScreen);
  }
}

inside of your login page you can pop with a result using

ExtendedNavigator.of(context).pop(true|false)

2- Pass your guarded route name and args to the loginScreen so you can later redirect to the desired destination in case of a successful login.

class AuthGuard extends RouteGuard {
  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {
    if (isLoggedin) {
      return true;
    }else{
     navigator.pushNamed<bool>(Routes.loginScreen, arguments:
        LoginScreenArguments(
           redirectRouteName: routeName,
           redirectRouteArgs : arguments),
        );
    return false;
  }
}

Then inside your loginScreen you can redirect users to any guarded route after a successful login process

ExtendedNavigator.of(context).pushNamed(redirectRouteName, arguments: redirectRouteArgs);

Let me know if you have more questions.

[Milad-Akarie]

Hey, @rahulnakre well you could directly check your SharedPreferences for a token or if you're using an auth service or something you could inject it in the AuthGuard constructor

class AuthGuard extends RouteGuard {
  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {
    final prefs = await SharedPrefrences.instance();
   final isLoggedIn = prefs.getString('token') != null
    if (isLoggedIn) {
      return true;
    }
    return await navigator.pushNamed<bool>(Routes.loginScreen);
  }
}

or

class AuthGuard extends RouteGuard {
 final MyAuthService authService;
  AuthGuard(this.authService);

  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {
    if (authService.isLoggedIn()) {
      return true;
    }
    return await navigator.pushNamed<bool>(Routes.loginScreen);
  }
}

then inside in ExtendedNavigator

ExtendedNavigator(
router:Router(),
guards:[ AuthGuard(MyAuthService()),]
),

[edwardaux]

In case anyone is playing along at home, I tried both approaches above.

I initially used the second one because my LoginScreen already had some logic in to do the redirect. However, there are two downsides to this approach:

1. It relies on LoginScreen to call navigator.pushNamed() - which is problematic if the original caller wanted to use pushReplacementNamed() to transition
2. It pushes redirection logic and state into the LoginScreen

Going with the first option works better (in my opinion) because now the caller’s preference for pushing is maintained, and the redirection logic is purely contained in the guard.

Note that the last check in the guard needs to be null-aware (because the LoginScreen returns with a null if it was presented modally and dismissed with by tapping in the X button)

[edwardaux]

Ah, thank you so much. I didn't realise I could also change the destination of the route inside the guard... perfect 💯

[rahulnakre]

class AuthGuard extends RouteGuard {
  Future<bool> canNavigate(ExtendedNavigatorState navigator, String routeName,
      Object arguments) async {
    if (isLoggedin) {
      return true;
    }
    return await navigator.pushNamed<bool>(Routes.loginScreen);
  }
}

Where does isLoggedIn come from? How do I pass that variable from my widget to my AuthGuard ? Thanks!

[rahulnakre]

Thanks for the help!

[akshaybhange]

how can I set a splash screen while I check for authentication in AuthGuard?