Bloc: Handling application logout and/or API authentication

[mflesh1]

I am new to Flutter development and using Flutter Bloc, but one thing I don't understand real well is how to handle application Logout and API Authentication failure. There are two situations:

1. The user can be within the app in various locations and at any point choose to logout.
2. The application communicates with a secure API using a token it was issued after successful login, this token may expire and the API responds with the appropriate status code, the user then needs to be logged out of the application.

I was following the Flutter Login tutorial but I am not clear on how this would be best implemented in a larger application.

I have an auth Bloc like the tutorial but it seems that in order to trigger the state change you need to pop navigation off the stack each time, seems a bit cumbersome.

[theDarkBoffin]

Hello @mflesh1,
Giving a few code examples as to what you're trying to achieve, and why you think it isn't helping you will enable the community to help better.
I don't understand what you mean by

in order to trigger the state change you need to pop navigation off the stack

Because you need not pop navigation off the stack to trigger a state change.

If this could help, you need to add an event to the Bloc once a Data Provider/Repository detects authentication failure, which triggers a state change in the Bloc. Use a BlocListener to listen for this state change somewhere at a higher level of the widget tree, and in listener function use Navigator.pushNamed or Navigator.popUntil to get to your desired screen.

[felangel]

Hi @mflesh1 👋
Thanks for opening an issue!

As @theDarkBoffin mentioned, it would help if you could provide a link to a sample app which illustrates the problem you're having. Additionally, if you haven't already I'd recommend joining the discord and we can also do a live coding session 👍

[mflesh1]

I have checked in project go github.

https://github.com/mflesh1/flutter_bloc_security

The initial code in question is in the listener in the login_form.dart file.

listener: (context, state) {
        if (state is LoginFailure) {
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('${state.message}'),
              backgroundColor: Colors.red,
            ),
          );
        } else if (state is LoginLoaded) {
          Navigator.of(context).pop(context);
          BlocProvider.of<AuthBloc>(context).add(new AuthorizedEvent(state.user));
        }
      }

The Navigator.pop is required to remove the login page from the view, but what happens if the navigation is deeper into the application after the user logs in, is it still required to pop the stack?

[theDarkBoffin]

@mflesh1, thanks for the snippet! Now that I can clearly understand what you mean to say,
you can do either of these things:

• If you are planning to preserve the current location of the user in your navigation stack and send him back to that location on re-login, the simplest thing you can do is to use an overlay login dialog. Just use this overlay login dialog, and you needn't pop the navigation stack at all!
• Now, if you aren't planning to preserve the user's current location in the navigation stack, you can use Navigator.pushReplacementNamed, or Navigator.popUntil(context, ModalRoute.withName('/login')) to reach the login(or desired) route.

I hope that helps.

[mflesh1]

@theDarkBoffin thanks for the reply. Is there any way to clear the stack and just load a screen?

I come from Android where I can just call an Activity and wipe the stack, anything similar in Flutter?

[theDarkBoffin]

@mflesh1 Navigator.pushNamedAndRemoveUntil(context, '/login', (_) => false); might be what you're looking for.

[mflesh1]

@theDarkBoffin will this still work even if the '/login' is not in the current stack?

[theDarkBoffin]

@mflesh1, yes.

[felangel]

@mflesh1 can we close this issue?
@theDarkBoffin thanks for taking the time to provide answers, I really appreciate it 👍

[felangel]

Closing for now 👍