Pass JWT token as header in Xamarin WebView

Question

I'm using Xamarin forms WebView control to display a page that uses Authentication JWT token. I could not find any samples that does this either in Microsoft site or any blogs.

Most closest answer I found is to create a renderer for the control in each platform (iOS and Droid). But I'm not sure on which event I should override the request and the format in which the auth header can be passed. Appreciate any help.

Answer 1

You could try the method below:

For Android:

public class FormsWebViewRenderer : ViewRenderer<Xamarin.Forms.WebView, Android.Webkit.WebView>
{
    Android.Content.Context _localContext;

    public FormsWebViewRenderer(Context context) : base(context)
    {
        _localContext = context;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
    {
        base.OnElementChanged(e);

        Dictionary<string, string> headers = new Dictionary<string, string>
        {
            ["A-custom-header"] = "a custom value"
        };

        Android.Webkit.WebView webView = Control as Android.Webkit.WebView;

        if (Control == null) {
            webView = new Android.Webkit.WebView(_localContext);
            SetNativeControl(webView);
        }

        webView.Settings.JavaScriptEnabled = true;

        webView.Settings.BuiltInZoomControls = true;
        webView.Settings.SetSupportZoom(true);

        webView.ScrollBarStyle = ScrollbarStyles.OutsideOverlay;
        webView.ScrollbarFadingEnabled = false;

        webView.SetWebViewClient(new FormsWebViewClient(headers));
        UrlWebViewSource source = Element.Source as UrlWebViewSource;
        webView.LoadUrl(source.Url, headers);
    }
}

public class FormsWebViewClient : Android.Webkit.WebViewClient
{
    public Dictionary<string, string> headers { get; set; }

    public FormsWebViewClient(Dictionary<string, string> requestHeaders)
    {
        headers = requestHeaders;
    }

    public override void OnPageStarted(Android.Webkit.WebView view, string url, Android.Graphics.Bitmap favicon)
    {
        base.OnPageStarted(view, url, favicon);
        System.Diagnostics.Debug.WriteLine("Loading website...");
    }

    public override void OnPageFinished(Android.Webkit.WebView view, string url)
    {
        base.OnPageFinished(view, url);
        System.Diagnostics.Debug.WriteLine("Load finished.");
    }

    public override void OnReceivedError(Android.Webkit.WebView view, IWebResourceRequest request, WebResourceError error)
    {
        base.OnReceivedError(view, request, error);
    }
}

For ios:

public class FormsWebViewRenderer : ViewRenderer<WebView, UIWebView>
{
    protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);

        var webView = Control as UIWebView;

        if (webView == null) {
            webView = new UIWebView();
            SetNativeControl(webView);
        }

        webView.ScalesPageToFit = true;

        webView.LoadStarted += (object sender, System.EventArgs evtArgs) => {
            System.Diagnostics.Debug.WriteLine("Loading...");
        };

        webView.LoadFinished += (object sender, System.EventArgs evtArgs) => {
            System.Diagnostics.Debug.WriteLine("Load finished.");
        };

        if (e.NewElement != null) {
            UrlWebViewSource source = (Xamarin.Forms.UrlWebViewSource)Element.Source;
            var webRequest = new NSMutableUrlRequest(new NSUrl(source.Url));
            var headerKey = new NSString("A-custom-header");
            var headerValue = new NSString("a custom value");
            var dictionary = new NSDictionary(headerKey, headerValue);

            webRequest.Headers = dictionary;

            this.Control.LoadRequest(webRequest);
        }

    }
}