Is WinUIEx compatible with Duende Identity Server?

[philnwoha]

I have the below code and when I run it, my identity server complains that the client_id is missing. Is there a place where I can find an example of how to connect to IDS, I have spent a few hours searching but haven't found anything.

var result2 = await WinUIEx.WebAuthenticator.AuthenticateAsync(new Uri("https://{domain}/connect/authorize"), new Uri("myapp://callback"));

[dotMorten]

That authorize URL isn't valid. You're missing a bunch of parameters.

[philnwoha]

I finally figured out how to get WinUIEx to work with identity server. This was a long and arduous journey so I'm going to fully explain how I got this working for anyone else that runs into this issue. @dotMorten I would love to buy you a coffee but github no longer accepts paypal and I'm not comfortable giving them my info, so please let me know if there is another way to show my appreciation.

First I will be making some assumptions. I will assume that you are trying to get this working for a .net maui project. I will assume that you have already gone through the steps of implementing the "Web Authenticator" into your project. I would follow this guide but what I found to be far more helpful was just making sure that my maui project matched the sample maui project by the duende developers that you can find here. I will also assume that you have your identity server configured properly or you can also just hit the duende demo site instead.

Now if your maui project has been setup correctly, you should be able to get authentication working for the iOS and android version of the app. However if you try the windows version, you will encounter an error saying that the web authenticator is not compatible with windows. This has been a long standing bug/issue and sadly it does not appear that Microsoft will be fixing this anytime soon as they closed the ticket without any indication if or when they plan to fix this. This is where WinUIEx comes in.

To get started with WinUiEx I recommend following the instructions on their site for maui specifically here. Now a word of caution! At the time of this writing, the latest version of WinUiEx is 2.9.0. I couldn't get this version to work, it complained about not being able to load some dependencies. The version I'm running on is 2.4.1. Also I'm running on .net 9.0.120 and I didn't have to modify my "Microsoft.WindowsAppSdk" version.

Now onto the code! I'm assuming that you have a button that you are going to click to initiate the login. I'm also going to use Duende's identity server demo for this. Below is the code that resides inside of my "LoginClicked" method:

private string _text;
var codeVerifier = GenerateCodeVerifier();
var codeChallenge = GenerateCodeChallenge(codeVerifier);
var clientId = "interactive.public";
var scope = "openid%20profile%20offline_access%20api";
var redirectUrl = "myapp://callback";
var authority = "https://demo.duendesoftware.com";
var authorizeUrl = $"{authority}/connect/authorize?client_id={clientId}&scope={scope}&redirect_uri={redirectUrl}&response_type=code&code_challenge_method=S256&code_challenge={codeChallenge}";
var accessToken = "";
var refreshToken = "";
Dictionary<string, string> properties = null;
var sb = new StringBuilder();

#if WINDOWS
    var result = await WinUIEx.WebAuthenticator.AuthenticateAsync(new Uri(authorizeUrl), new Uri(redirectUrl));
    properties = result.Properties;
#endif
if(properties != null)
{
    var code = properties["code"];

    using var client = new HttpClient();

    //convert the code to an access token
    var response = await client.RequestAuthorizationCodeTokenAsync(new AuthorizationCodeTokenRequest
    {
        Address = $"{authority}/connect/token",
        ClientId = clientId,
        ClientSecret = "",
        Code = code,
        RedirectUri = redirectUrl,
        CodeVerifier = codeVerifier
    });
    if (!response.IsError)
    {
        accessToken = response.AccessToken;
        refreshToken = response.RefreshToken; // If offline_access was requested
    }
    var handler = new JwtSecurityTokenHandler();
    var jwtToken = handler.ReadJwtToken(accessToken);

    sb.AppendLine("claims:");
    foreach (var claim in jwtToken.Claims)
    {
        sb.AppendLine($"{claim.Type}: {claim.Value}");
    }

    sb.AppendLine();
    sb.AppendLine("access token:");
    sb.AppendLine(accessToken);

    if (!string.IsNullOrWhiteSpace(refreshToken))
    {
        sb.AppendLine("");
        sb.AppendLine("refresh token:");
        sb.AppendLine(refreshToken);
    }

    _text = sb.ToString();
}

Below is the two private methods I used above. These methods were not my own and I found them here.

private string GenerateCodeVerifier()
{
    using var rng = RandomNumberGenerator.Create();
    var bytes = new byte[32];
    rng.GetBytes(bytes);
    return Base64Url.Encode(bytes);
}

private string GenerateCodeChallenge(string codeVerifier)
{
    using var sha256 = SHA256.Create();
    var challengeBytes = sha256.ComputeHash(Encoding.UTF8.GetBytes(codeVerifier));
    return Base64Url.Encode(challengeBytes);
}

A few remarks about the above code. If the client you are attempting to authenticate against requires PKCE then you will need to generate a challenge code and use the code verifier to get the access token. The code verifier code that I used is NOT my own and I have put a link to where I got it to make sure the author gets proper credit. When you run the code and click the login button, a web page will open up allowing you to authenticate. After you do so you will get a dialog asking you to allow the link to open your maui app. When you click on it you will be taken back to your app and if all goes according to plan, you should see your access token, refresh token and claims. Note that the result from calling "AuthenticateAsync" with WinUiEx will have a "Properties" dictionary populated. One of those values will be a code that you can then use to call back into identity server to retrieve your access and refresh token. The code verifier is needed to verify that nothing was tampered with.

I hope that this was helpful.