How to set Cookies in webview_flutter?

Question

How can I set Cookies in webview_flutter during initialization?

body: WebView
    initialUrl: index_url,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _controller=webViewController;
    },
    javascriptChannels: <JavascriptChannel>[
      _toasterJavascriptChannel(context),
    ].toSet(),       
    onPageFinished: (String url) {
      print('Page finished loading: $url');
    },
  ),

Solution 1

Anyone still looking for an answer, the latest version of webview_flutter (webview_flutter: ^3.0.0) includes the initialCookies param which takes a list of WebViewCookie.

eg.

sessionCookie = WebViewCookie(
      name: 'my_session_cookie',
      value: 'cookie_value',
      domain: 'www.mydomain.com',
);

WebView(
initialCookies: [sessionCookie],
...
),

Solution 2

You can set cookie using Tow methods.

Solution 1. Using webViewController.evaluateJavascript() Eg:

    final Completer<WebViewController> _controller =
    Completer<WebViewController>();
    WebViewController _webViewController;

    @override
    Widget build(BuildContext context) {
    _controller.future.then((controller) {
      _webViewController = controller;
        _webViewController.loadUrl(URL);
    });
    return Scaffold(
      body: SafeArea(
        child: Container(
          child:
               WebView(
            debuggingEnabled: true,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            onPageFinished: (String value) {
              setSession(sessionId, _webViewController);
            },
          ),
        ),
      ),
    );
  }

void setSession(String sessionId, WebViewController webViewController) async {
  if (Platform.isIOS) {
   await webViewController.evaluateJavascript("document.cookie = 'ASP.NET_SessionId=$sessionId'");
  } else {
   await webViewController.evaluateJavascript('document.cookie = "ASP.NET_SessionId=$sessionId; path=/"');
  }
 }

but using this we can set cookies after onPageFinished in WebView. This solution will work only after you reload the webview. That means on the first build this method will add cookies to the WebView and will get result after second time onwards. If you want WebView to load with preset Cookies check the next Solution

Solution 2. Using headers we can set cookies while initiating an http request. Eg:

final Completer<WebViewController> _controller =
    Completer<WebViewController>();
    WebViewController _webViewController;

    @override
    Widget build(BuildContext context) {
    _controller.future.then((controller) {
      _webViewController = controller;
      Map<String, String> header = {'Cookie': 'ASP.NET_SessionId=$sessionId'};
      _webViewController.loadUrl(URL, headers: header);
    });
    return Scaffold(
      body: SafeArea(
        child: Container(
          child:
               WebView(
            debuggingEnabled: true,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
          ),
        ),
      ),
    );
  }

This will load WebView with given Cookie.

Solution 3

With flutter 1.22.1 it works for me the following way:

WebView(
  onWebViewCreated: (controller) {
    controller.loadUrl(
      "https://mypage.de/",
      headers: {"Cookie": "mycookie=true"},
    );
  },
)

Notice that there is no colon in Cookie as other answers suggested.

Update: Works with flutter 2 as well.

Solution 4

@deepakraj I have been trying to get one of those to work with no luck. The second one is the one I am most interested in. So Here is my code. I am simulating a leading async request to my backend which needs to resolve first in order to build the webview (source of the header) which is why I use a futureBuilder. Maybe I am having a glaring issue here.

 WebViewController _webViewController;
  Future ssoRequestFuture;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.ssoRequestFuture = makeGetRequest();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<http.Response>(
        future: this.ssoRequestFuture,
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return Text('Not connected');
            case ConnectionState.active:
            case ConnectionState.waiting:
              return Text('waiting');
            case ConnectionState.done:
              var cookieStr = snapshot.data.headers['set-cookie'];
              List<String> cookies = cookieStr.split(","); // I am not interested n the first cookie
              Cookie ssoCookie = Cookie.fromSetCookieValue(cookies[1]);
              Map<String, String> header = {'Cookie': '$ssoCookie'};
              // clear cookies was a suggestion ??
              CookieManager cookieManager = CookieManager();
              cookieManager.clearCookies();

              return Scaffold(
                body: Builder(builder: (BuildContext context) {
                  _controller.future.then((controller) {
                    _webViewController = controller;
                    _webViewController.loadUrl('http://192.168.86.28:4205', headers: header);
                  });

                  return WebView(
                    debuggingEnabled: true,
                    javascriptMode: JavascriptMode.unrestricted,
                    onWebViewCreated: (WebViewController webViewController) {
                      _controller.complete(webViewController);
                    },                 
                    gestureNavigationEnabled: true,
                  );
                }),
              );
            default:
              return Text('Default');
          }
        }
    );
  }

View more solutions

Comments

[deepak raj]

You can clear cookies using CookieManager cookieManager = CookieManager(); bool hadCookies = await cookieManager.clearCookies();

[TeeJaay]

Did you ever try the second approach ? Looks like setting the cookie does not seem to work via the headers. github.com/flutter/flutter/issues/27597

[deepak raj]

Am using the second approach now to set cookie, and it is working fine. @TeeJaay Try to clear the cookie before setting new one.

[Amit]

hi can u plz tell where to get $sessionId

[deepak raj]

Simply inspect the Webpage and select Application>Storage>Cookies there you can find Session_ID

[rajeshzmoke]

@deepakraj can u post a sample code, 2nd approach does not seem to work

[deepak raj]

I think the answer has required code. Just use the same.

[Cyrus the Great]

I used second way but nothing is happen stackoverflow.com/questions/65001831/… @deepakraj

[deepak raj]

@sayreskabir can you provide the URL you are testing.?

[Cyrus the Great]

ipb.parsian-bank.ir/HDMap/… @deepakraj

[deepak raj]

@sayreskabir you can replace Map<String, String> header = {'Cookie': 'ASP.NET_SessionId=$sessionId'}; with Map<String, String> header = {'Cookie':'cookiesession1=$sessionId'};

[Cyrus the Great]

This is my complete code : paste.ubuntu.com/p/htZk4YxcQs . in onPageFinished i try to print my cookie String cookies = await wvc.evaluateJavascript('document.cookie'); but String cookies is empty?@deepakraj

[deepak raj]

_webViewController.evaluateJavascript('document.cookie') will return an empty string because you are setting cookies in the header, not in the javascript.

[Cyrus the Great]

Then how can i get cookie from header?@deepakraj