Blazor Azure ADB2C Authentication popup size does not match content

[ahawes-clarity]

The default authentication popup when using Azure ADB2C Authentication does not account for additional "Sign in with social account" options.

I also was not able to find any documentation that would provide a way to control the size of the popup window.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[ahawes-clarity]

Until this bug is addressed, are there any workarounds short of creating a custom login template?

[javiercn]

@ahawes-clarity thanks for contacting us.

This is something that MSAL exposes (here) but we don't in our wrappers. You can create your own AuthenticationService.js and configure the settings there directly.

[ahawes-clarity]

@javiercn thanks for the info. I was able to make a copy of the AuthenticationService.js file which was referenced in my index.html. I changed the reference to point to my copy and then changed the height value for the popup window. I realize that this is just a workaround and that if I update the version of MSAL I may need to redo this but it gives me what I need to solve the problem without too much work.

For others that might need to do this:

Here are my changes to index.html where WorkaroundAuthenticationService.js is a copy of AuthenticationService.js:

    <!--<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>-->
    <script src="js/WorkaroundAuthenticationService.js"></script>

I then updated WorkaroundAuthenticationService.js to set the popup height and width. The js file is minified so I had to do some searching and referencing of the TypeScript source to find what I needed.

Search for:
ir="interaction_in_progress",sr="invalid_grant",ar=483,cr=600,ur=50,dr="msal.js.browser";

It may be possible that yours differs based on what the minifier does but this should be enough info for you to find the code in your file.

In my case ar was width and cr was height.

Change the values as needed.

[javiercn]

This should be possible with the new additional parameters support coming in RC1