How to Use the Auth0 oidcClient.WinForms SDK with Edge Chromium / WebView2

Knowledge Articles
, ,
1

Last Updated: Sep 27, 2024

Overview

When running WinForms application as an Administrator, our SDK uses Microsoft Internet Explorer when running the compiled executable.

Since Internet Explorer is outdated and barely supported today, this may cause errors.

Applies To

  • WinForms
  • SKD

Cause

This is a known limitation of the WebView components provided by Microsoft.

On this page (WebViewCompatible control for Windows Forms and WPF - Windows Community Toolkit | Microsoft Learn), there is a note that indicates this behavior:

  • “The Edge runtime does not at the moment work when the process is elevated as an administrator. Therefore WebViewCompatible will fall back to use the System.Windows.Controls.WebBrowser when it detects that the process is running as administrator.”

Solution

A Workaround that eliminates Internet Explorer from the equation

By adding a class to the project that wraps Webview2 in an IBrowser interface, it is possible to use Edge Chromium with the Auth0 .net SDK in desktop applications.

This requires the WebView 2 components that can be downloaded from here:

Tested with the Auth0 Winforms Quickstart:

Implementation

Add the Webview2 Nuget package: Install-Package Microsoft.Web.WebView2

  • Add the following class to the project webBrowserChromium.cs
using IdentityModel.OidcClient.Browser;
using Microsoft.Toolkit.Forms.UI.Controls;
using Microsoft.Web.WebView2.WinForms;
using System;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsSample
{
   
 /// <summary>
 /// Implements the <see cref="IBrowser"/> interface using the <see cref="WebView2"/> control.
 /// </summary>
 public class WebViewBrowserChromium : IBrowser
 {
     private readonly Func<Form> _formFactory;

     /// <summary>
     /// Creates a new instance of <see cref="WebViewBrowserChromium"/> with a specified function to create the <see cref="Form"/>
     /// used to host the <see cref="WebView2"/> control.
     /// </summary>
     /// <param name="formFactory">The function used to create the <see cref="Form"/> that will host the <see cref="WebViewCompatible"/> control.</param>
     public WebViewBrowserChromium(Func<Form> formFactory)
     {
         _formFactory = formFactory;
     }

     /// <summary>
     /// Creates a new instance of <see cref="WebViewBrowserChromium"/> allowing parts of the <see cref="Form"/> container to be set.
     /// </summary>
     /// <param name="title">Optional title for the form - defaults to 'Authenticating...'.</param>
     /// <param name="width">Optional width for the form in pixels. Defaults to 1024.</param>
     /// <param name="height">Optional height for the form in pixels. Defaults to 768.</param>
     public WebViewBrowserChromium(string title = "Authenticating...", int width = 1024, int height = 768)
         : this(() => new Form
         {
             Name = "WebAuthentication",
             Text = title,
             Width = width,
             Height = height
         })
     {
     }

     /// <inheritdoc />
     public async Task<BrowserResult> InvokeAsync(BrowserOptions options, CancellationToken cancellationToken = default)
     {
         var tcs = new TaskCompletionSource<BrowserResult>();

         var window = _formFactory();
         var webView = new WebView2 { Dock = DockStyle.Fill };
         await webView.EnsureCoreWebView2Async();

         webView.NavigationStarting += (sender, e) =>
         {
             if (e.Uri.StartsWith(options.EndUrl))
             {
                 
                 tcs.SetResult(new BrowserResult { ResultType = BrowserResultType.Success, Response = e.Uri.ToString() });
                 window.Close();
                 
             }
                 
         };

         window.Closing += (sender, e) =>
         {
             if (!tcs.Task.IsCompleted)
                 tcs.SetResult(new BrowserResult { ResultType = BrowserResultType.UserCancel });
         };


         window.Controls.Add(webView);
         window.Show();
         webView.CoreWebView2.Navigate(options.StartUrl);
         

         return await tcs.Task;
     }
 }
}

Usage

With Auth0 SDK, there are 3 browser choices:

  • Internet Explorer
  • MS Edge (as implemented in the current WebView)
  • MS Edge Chromium (requires the WebView2 Runtime is present)

It is possible to change browsers when initializing the SDK by setting the Browser property.

client = new Auth0Client(new Auth0ClientOptions
{
    Domain = domain,
    ClientId = clientId,
    EnableTelemetry = true,

    //Browser = new WebBrowserBrowser()         // Use IE (IBrowser contained within Auth0 SDK)
    //Browser = new WebViewBrowser()              // Use Edge (DEFAULT Auth0 setting - Will revert to IE if run as admin)

    Browser = new WebViewBrowserChromium()    // Use Edge Chromium (requires MS Edge Webview2 be installed)

}) ;
2 Likes