Flutter webview How to login to the website when app opens?

When you do authenticate on your website, the common thing which happens in all websites including yours is that that authentication token will be saved in the local storage or cookies of your website, this is how websites don't require you to authenticate every single time a webpage is opened in that website.

after authenticating for the first time and getting that authToken in your hands (I mean in your app), you will need to figure out how exactly the token is saved and used in other requests in your website and then use the runJavascript method to running a js code that do the simulate the same thing with javascript code.

I can't produce the exact code, since I don't know how the token is saved inside your website, but I just will assume and let you have an idea about what I'am trying to say:

as example if after the authenticattion, the website saves the authToken in the localStorage, then after getting that token for the first time, you will make some js code similar to this:

localStorage.set("authToken", yourTokenHere);

and after that, when you acces the WebViewWidget in next times, you will need to set it's controller like this:

_webviewController.runJavascript("localStorage.set("authToken", yourTokenHere)");

and now when the WebViewWidget will render, that token will be set and so tha webpage will use it like the user authenticates manually.

To Save the AuthToken I would use the Flutter Secure Storage Package (link to pub.dev).

Add in pupspec.yaml file : flutter_secure_storage: ^8.0.0

Now you can save the token when you retrieving it from the first page:

var _storage = FlutterSecureStorage();
await _storage.write(key: 'authToken', value: <yourAuthToken>);

now when openening the other page within the webview you can retrieve this token and send it in the POST like so:

import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class networkClass{
  final _storage = FlutterSecureStorage();

  Future<YourResponseObject> networkConnect() async {
    var token = await _storage.read(key: 'authToken');
    
    var response = await http.post(Uri.parse("https://englishin7boxes.com"), headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer $token',
    });
    //do something with response
    return <YourResponseObject>;
  }
}

i am not to sure with content type and accept in the headder you may have to tweak these.

For simple Flutter Webview Basic Auth, you can do this

    controller.setNavigationDelegate(
      NavigationDelegate(
        onHttpAuthRequest: (HttpAuthRequest request) => request.onProceed(
          const WebViewCredential(
            user: 'user',
            password: 'password',
          ),
        ),
        onPageFinished: (_) => pageFinished.complete(),