How to auto redirect to login page with guards?

[milad-akarie]

How to auto redirect to login page with guards?

[Milad-Akarie]

Hey @frank06, yes. You're not supposed to use the canNavigate func manually,
Just let your guard do the redirecting for you like follows

class AuthGuard extends RouteGuard {
  @override
  Future<bool> canNavigate(
      BuildContext context, String routeName, Object arguments) async {
    if (!isAuthenticated) {
        Router.navigator.pushNamed(Router.loginScreen)
        return false;
    }
    return true;
  }
}

You could have the guard await for the LoginRoute results and return true if user logs in successfully so you still navigate to your secure route after

Future<bool> canNavigate(
      BuildContext context, String routeName, Object arguments) async {
    if (!isAuthenticated) {
       var authenticated await Router.navigator.pushNamed(Router.loginScreen);
        // if authenticated is true you still navigate to your secure route
        return authenticated;
    }
    return true;
  }

Next annotate your secure routes with GuardedBy([AuthGuard]) and pass in your guards as types.

class $Router {
  @initial
  HomeScreen homeScreen;

  @GuardedBy([AuthGuard])
  SecureScreen secureScreen;

  @GuardedBy([AuthGuard])
  SecondScreen2 secondScreen2;

  LoginScreen loginScreen;
}

now any route annotated with @GuardedBy will go through the assigned guards before it can navigate to its destination.
Hope this helps.

[frank06]

Great, thanks @Milad-Akarie !

I am not able to make this work with my screen design (slightly different than yours):

In my app there are NO public screens (i.e. all screens, except LoginScreen should be guarded by AuthGuard). My users have to be logged in to see the home page.

My issue is that canNavigate is never called with the following setup.

Why?

import 'package:auto_route/auto_route.dart';
import 'package:auto_route/auto_route_annotations.dart';

import 'main.dart';

@MaterialAutoRouter()
class $Router {
  @initial
  @GuardedBy([AuthGuard])
  HomeScreen homeScreen;

  // @CustomRoute(returnType: bool)
  LoginScreen loginScreen;
}

class AuthGuard extends RouteGuard {
  @override
  Future<bool> canNavigate(context, routeName, arguments) async {
    throw UnsupportedError('never reaches this');
    return true;
  }
}

import 'package:auto/router.dart';
import 'package:flutter/material.dart';

import 'router.gr.dart';

void main() {
  Router.navigator.addGuards([AuthGuard()]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Auto example',
        theme: ThemeData(primarySwatch: Colors.amber),
        onGenerateRoute: Router.onGenerateRoute,
        navigatorKey: Router.navigator.key,
        initialRoute: Router.homeScreen,
      );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('login page'));
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('secure area'));
  }
}

[Milad-Akarie]

Unfortunately, the navigator widget within the MaterialApp is the one pushing the initial route, so there's no way to intercept and guard it with the current approach.

You could always have a public initial route that shows a loading indicator or something until the real distention is decided.

then in the initial route push and replace the current route with your secureScreen

 void initState() {
    Router.navigator.pushReplacementNamed(Router.secureScreen);
    super.initState();
  }

[frank06]

Thanks!

I ended up calling this stateful widget RedirectRoute, and using it like so:

MaterialApp(
        title: 'Auto example',
        theme: ThemeData(primarySwatch: Colors.amber),
        onGenerateRoute: Router.onGenerateRoute,
        navigatorKey: Router.navigator.key,
        home: RedirectRoute(Router.homeScreen),
      ),

@MaterialAutoRouter()
class $Router {
  @GuardedBy([AuthGuard])
  HomeScreen homeScreen;

  @CustomRoute(returnType: bool)
  LoginScreen loginScreen;
}

class AuthGuard extends RouteGuard {
  @override
  Future<bool> canNavigate(context, routeName, arguments) async {
    var auth = Provider.of<AuthState>(context);
    if (!auth.value) {
      auth.value = await Router.navigator.pushNamed(Router.loginScreen);
    }
    return auth.value;
  }
}

It does work fine (successfully triggers canNavigate), with a caveat.

There can't be a route decorated with @initial, as it seems the home route must be treated like / somewhere and that ends up in an infinite loop.

Also, since the login page communicates success/failure via pop<bool>, the login page always shows a back button in Material. When opening the app the first time and seeing the login screen, clicking on the back button throws an exception.

_AssertionError (Failed assertion: boolean expression must not be null) (https://github.com/Milad-Akarie/auto_route_library/blob/master/auto_route/lib/src/extended_navigator.dart#L101)

That said I'd LOVE an API like:

class $Router {
  @initial
  @GuardedBy([AuthGuard])
  HomeScreen homeScreen;

  @CustomRoute(returnType: bool)
  LoginScreen loginScreen;
}

with an initialization like:

MaterialApp(
        title: 'Auto example',
        theme: ThemeData(primarySwatch: Colors.amber),
        onGenerateRoute: Router.onGenerateRoute,
        navigatorKey: Router.navigator.key,
        home: Router.initialRoute,
      ),

(initialRoute redirect widget provided by the library?)

And no back button issues with the login screen.

Loving the library so far. Thanks.

[Milad-Akarie]

Hey @frank06, I don't think it's a good idea to work with widgets and named routes at the same time, why can't the initial route (The Redirect Widget) be named?
Navigator will automatically push the initial route you pass to material App which defaults to "/" if you don't pass anything. then inside of the initial route push your guarded route as a REPLACEMENT so the initial route is poped first.

[frank06]

why can't the initial route (The Redirect Widget) be named?

Because a widget accepts a parameter (the redirect "to" route name). Afaik this is not possible with a named route? So I would have to make a specific stateful widget just for redirecting (with a hardcoded route), and add it to the routing configuration. My intention was to make this easier and more generic.

My app doesn't show the Material back button anymore – so not a problem for me. But I think there's still an issue there.

[frank06]

Thank you for your help @Milad-Akarie

[Milad-Akarie]

Hey, @frank06 what did you end up doing?

[frank06]

I ended up doing this, works great so far!

        onGenerateRoute: Router.onGenerateRoute,
        navigatorKey: Router.navigator.key,
        home: RedirectTo(Router.dashboardScreen),

[Milad-Akarie]

How does the RedirectTo Widget look like?

[frank06]

class RedirectTo extends StatefulWidget {
  final String redirectTo;
  const RedirectTo(this.redirectTo, {Key key}) : super(key: key);
  @override
  _RedirectToState createState() => _RedirectToState();
}

class _RedirectToState extends State<RedirectTo> {
  @override
  void initState() {
    Router.navigator.pushReplacementNamed(widget.redirectTo);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Loading ${widget.redirectTo}...'),
      ),
    );
  }
}

[Milad-Akarie]

I believe that the navigator will still automatically navigate to '/' even if you specify a home widget. This will cause your dashboard to be called twice! right?

[frank06]

I just put a breakpoint on DashboardScreen#build and it stops only once.

As far as I understand, MaterialApp will use either home OR initialRoute