How to redirect an api (token) authenticated user (in a flutter app) to session based auth (in a flutter web view)?

Question

What I want to achieve: let's say I have an Api (token) authenticated user then once this user click a button I wanted to open a web-view and authenticate him on a session based auth.

What I did till now (many solutions and propositions):

1. use url_launcher:

   • open a browser on click launch(url)
   • send a token (GET params) to the backend server
   • authenticate the user and redirect back Working well BUT bad Ux, user needs to go between browser and the app!

2. use 1flutter_webview_plugin or 2webview_flutter:

   • open a webview on click 1

     class __WebWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return WebviewScaffold(
          url: url + "?token=${userManager.token}",
          appBar: new AppBar(
            title: Text('Space'),
          ),
          withZoom: true,
          withLocalStorage: true,
          hidden: true,
          initialChild: Container(
            color: Colors.blueAccent,
            child: const Center(
              child: Text('Loading....'),
            ),
          ),
        );
      }
     }
     

     2

     class WebWidget extends StatelessWidget {
       WebWidget({this.url});
     
       final String url;
     
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: Text('Votre Espace '),
           ),
           body: WebView(
             initialUrl: url + "?token=${userManager.token}",
             javascriptMode: JavascriptMode.unrestricted,
           ),
         );
       }
     }
     ```
     

   • send a token (GET params) to the backend server

   • authenticate the user and redirect back Not Working !

I suspected that the webview does not support the cookies !

In the backend, i'm using laravel (php7) and Apache server.

thanks in advance

Answer 1

Since you're using flutter, I'd recommend the Flutter Web Auth plugin for authenticating a user with a web service. It can be used for any web flow that can redirect to a custom scheme.

It automatically redirects you to your app with authenticated tokens (If your app is Android then remember to edit the AndroidManifest.xml as per the instructions given in the README.md file)