Login popup dimensions should be configurable

[Sam Magura]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the documentation and API documentation, and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

The initial dimensions of the login popup are not big enough to fit the whole content, so there are horizontal and vertical scrollbars. (This might be because we have custom styles on our login page, not sure.)

There's currently no good way to fix this, since the popup window size is hardcoded here:

auth0-spa-js/src/utils.ts

Lines 86 to 97 in 79720c5

 export const openPopup = (url: string) => { 
   const width = 400; 
   const height = 600; 
   const left = window.screenX + (window.innerWidth - width) / 2; 
   const top = window.screenY + (window.innerHeight - height) / 2; 
  
   return window.open( 
     url, 
     'auth0:authorize:popup', 
     `left=${left},top=${top},width=${width},height=${height},resizable,scrollbars=yes,status=1` 
   ); 
 }; 

Describe the ideal solution

loginWithPopup should accept popupWidth, popupHeight options for setting the initial dimensions of the popup. Or something similar to that.

Alternatives and current workarounds

No response

Additional context

No response

[Frederik Prijck]

Thanks for reaching out, loginWithPopup accepts a popup property (see: https://auth0.github.io/auth0-spa-js/interfaces/PopupConfigOptions.html#popup) that allows you to provide the entire popup instance yourself. This should allow you to apply any customization as needed.

[Sam Magura]

Thanks, I can use that.

I had seen the popup property and read the comment on it, but it wasn't clear to me that this is how you would set the dimensions of the popup window. I wonder if the documentation could be improved, or if popupWidth and popupHeight options could be added since that is (presumably) a common use case that would be easy to support.

[Frederik Prijck]

We considered making width and height configurable, but it opens up for adding all kind of additional configuration while you can configure all of those through providing your own popup.

but it wasn't clear to me that this is how you would set the dimensions of the popup window

You use popup when u want to use a popup that is different from the one we create for you.

Closing as I think this should solve it, let me know if not.