WebAuthenticator opens new app

[bindalf]

hi
on Maui 9 windows app
i use:
var result = await WinUIEx.WebAuthenticator.AuthenticateAsync(uri, new Uri("myscheme://logged"));

When the callback uri is called by the oauth flow or if i call ist manually in the browser then browser asks if i want to open my app and a new instance of my ma app opens and the original instance is waiting...

what i am doing wrong ?

[dotMorten]

You’re missing the startup call in platforms/windows/app.xaml.cs
See the doc for the code you need to add

[bindalf]

thanks for the quick answer! I have this in the app.xaml.cs

public App() { 

    bool check = WinUIEx.WebAuthenticator.CheckOAuthRedirectionActivation();
        if (check) return;
    this.InitializeComponent();
}

i set a break point and it gets called and returns false , i also tried to call this just before AuthenticateAsync() but it still opens new instances

[dotMorten]

It’s likely your oauth service is mangling the state parameter then.

[bindalf]

it looks like this
myscheme://logged/?code=_E-9-tGsFcWv6gGtOYxCYK2AN29zCacEWuVQFmdsyq11b8dR0pPN5MKP0l4Eb_vOoaYswSW6Dl3-tlPZ27yn0FsDcBidvdUqlYU6&state=%7B%26quot%3BappInstanceId%26quot%3B%3A%26quot%3B%26quot%3B%2C%26quot%3BsigninId%26quot%3B%3A%26quot%3B3b6c931d-960f-4bb5-ac43-bc861622c211%26quot%3B%2C%26quot%3Bstate%26quot%3B%3A%26quot%3B8WwHFY8TMXCOdHgMyepY2Nze9pCCymq7%26quot%3B%7D

i also see in the sourcecode that the code parameter which i need to get the refresh token via an api call is not parsed anyway?
btw its the oauth process from Etsy
https://developer.etsy.com/documentation/essentials/authentication/

[dotMorten]

odd. The app instance id parameter is empty

[bindalf]

i dont get it. Who should pass this parameter?

[dotMorten]

The state parameter is used by WinUIEx and sent to the service. Oauth is supposed to preserve that parameter for the round trip so the app knows what initiated it. Looks like it is getting mangled

[bindalf]

State is there but Whats with the instance id Parameter ?
I really appreciate your quick answers, i think i am very Close to get this working . So what would the callback url with all necessary Parameters should Look Like ?

[dotMorten]

the instance id parameter is just a parameter used internally by WinUIEx. The crux of it is that WinUIEx relies on the state parameter being round-tripped the server (where we embed a set of parameters inside, like the instance id parameter). But if the server doesn't correctly preserve the state parameter, there's no way for us to resume the app. Unfortunately I've seen a few servers do this.

[AndrewShaw-91]

Hey, I'm sorry but I'm running into the same issue. I tried the persistance in #111 but it didn't do anything (probably what you're expecting!).

If it helps I'm using KeyCloak

I've done the check in the platforms > Windows > app.xaml.cs

public partial class App : MauiWinUIApplication
{
    /// <summary>
    /// Initializes the singleton application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
        if (WinUIEx.WebAuthenticator.CheckOAuthRedirectionActivation())
        {
            return;
        }
        this.InitializeComponent();
    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}

Calling code:

 var authUrl = "https://localhost:7175/api/mobileAuth/keycloak";
 var callbackUrl = new Uri("my-app://");

 var authResult = await WinUIEx.WebAuthenticator.AuthenticateAsync(new Uri(authUrl), callbackUrl);

In my API I have created auth endpoints to first redirect to KeyCloak and then handle the callback and retrieve the tokens before returning to the app.

private class WebAuthState 
{
    [JsonProperty("appInstanceId")]
    public string AppInstanceId { get; set; }
    [JsonProperty("signinId")]
    public Guid SignInId { get; set; }
}
 // Initiate Login
 endpoint.MapGet("/api/mobileAuth/keycloak", (HttpContext context, [FromQuery] string state) =>
 {
     var recordState = JsonConvert.DeserializeObject<WebAuthState>(state);

     var codeVerifier = GenerateCodeVerifier();
     var codeChallenge = GenerateCodeChallenge(codeVerifier);

     StoreCodeVerifier(recordState.SignInId.ToString(), codeVerifier);

     var authUrl = $"{KeycloakAuthority}/protocol/openid-connect/auth?" +
                   $"client_id={ClientId}&" +
                   $"redirect_uri={Uri.EscapeDataString(RedirectUri)}&" +
                   $"response_type=code&" +
                   $"scope=openid profile email&" +
                   $"state={recordState.SignInId}&" +
                   $"code_challenge={codeChallenge}&" +
                   $"code_challenge_method=S256";

     return Results.Redirect(authUrl);
 });

// OAuth callback
endpoint.MapGet("/api/mobileAuth/callback", async (HttpContext context, [FromQuery] string code, [FromQuery] string state) =>
{
    // Retrieve the stored code_verifier for this state
    var codeVerifier = RetrieveCodeVerifier(state); 

    if (string.IsNullOrEmpty(codeVerifier))
    {
        return Results.BadRequest("Invalid state parameter");
    }

    using var client = new HttpClient();

    var tokenRequest = new List<KeyValuePair<string, string>>
    {
        new("grant_type", "authorization_code"),
        new("code", code),
        new("redirect_uri", RedirectUri),
        new("client_id", ClientId),
        new("code_verifier", codeVerifier)
    };

    var response = await client.PostAsync($"{KeycloakAuthority}/protocol/openid-connect/token",
        new FormUrlEncodedContent(tokenRequest));
    
    var content = await response.Content.ReadAsStringAsync();
    var tokenResponse = JsonConvert.DeserializeObject<TokenResponse>(content)!;

    // Redirect back to app with success - WinUIEx will handle this
    var appCallbackUrl = $"my-app://?access_token={tokenResponse.AccessToken}&token_type={tokenResponse.TokenType}&expires_in={tokenResponse.ExpiresIn}";

    return Results.Redirect(appCallbackUrl);
});

Is the problem here that I am not returning the state from the web API back to the MAUI app? Sorry for the dumb question here!

The end result is that a second instance of the UI starts, rather than going back to the calling window

[dotMorten]

You're supposed to grab the state parameter from the request and return it in the callback un-modified. That's how the app knows how to direct the request back to the correct app instance. See https://auth0.com/docs/secure/attack-protection/state-parameters

[AndrewShaw-91]

Thank you that was it! Feel like a dumbass for asking, but appreciate it!