How to resize the Auth0 login window in a C# WPF app?

Question

This is how the Auth0 login screen appears when I open it from a C# WPF app: Auth0 login window

The top portion can't be seen. There are no scrollbars and the window cannot be resized. Only the full screen option allows the user to see the entire login form.

Here's the code I'm using to open it:

try
{
    var auth0 = new Auth0Client(
        Properties.Settings.Default.auth0Domain,
        Properties.Settings.Default.auth0ClientID);
    var handle = new WindowInteropHelper(this).Handle;
    var windowWrapper = new WindowWrapper(handle);

    var user = await auth0.LoginAsync(owner: windowWrapper, 
        withRefreshToken: true, device: "DeviceName");
}
catch (Exception e)
{
    Utilities.AppendLog("User login exception: " + e.Message);
}

I'd like to resize the window so the user can see the entire login form. What do I need to do?

Answer 1

Misunderstood.

That entire login screen is done by Auth0Client . The window handle you are passing in is just the parent for that popped up login window.

Here's the source code to Auth0Client :

• https://github.com/auth0/Auth0.WinformsWPF/tree/master/src/Auth0.Windows

Taking a look at their login screen...it is a Windows Forms "form" which appears to be of a fixed size. Within that "area" they are using a WebBrowser control...which then is using an Auth0 "domain" url to do the actual logging in.

Here's what it looks like for me, when using their sample applications to do a login - it looks different in its layout to you.

Did you change a setting in your Auth0 account to show the login options in a different way (ie with labels?) - I'm not familiar enough with Auth0 to know where that option is. Perhaps it is one of their "extensions" you are using?

It's possible that their "web page" design for a login using icon+name style list...doesn't get laid out properly when there are a number of "connection" types....and limited "height" in the "browser".

What you could do is either:

• "tweak" that BrowserAuthenticationForm so it has a bigger vertical size, so there is plenty of room to fit the list of login types into

or

• if such an option exists, stick to the "icon only" style of list rather than "icon+name"

Also make sure you are using the latest version of Auth0....though I'd think you probably are already...and it probably won't make a difference to the presentation.

Lastly, here's what it looks like if you just use a browser (eg Chrome), and size it so that the "client" area height is about 565 pixels...which is the same as the WebBrowser control height in BrowserAuthenticationForm - notice the "title" being clipped (note I only have 4 log in provider options...compared to 5 in yours).

And if you make the browser a bit taller...then you can see it all.

Unfortunately, the way they've designed that popup HTML form doesn't work in limited height situations, and what's more "scrolling" has no effect if part of the "login screen" is being clipped.

(the WebBrowser already has "scrollbars" enabled...so that's not stopping any scrolling).

You mentioned that one of your team modified the login screen and I believe that is defined in the "Hosted Pages" section of the Auth0 admin site....maybe you can tweak that a bit more.