PopupConfigOptions custom styles for popup (Facebook connection specific)

  • Which SDK this is regarding: auth0-spa-js
  • SDK Version: 1.13.5
  • Platform Version: Node 12.20.0

[Context]:
I am trying to implement login with popup flow in my react front end application. For that I am using auth0-spa-js

loginWithPopup(options, config)

Everything works perfect except one thing. When a user signs up/logs in via facebook, popup window is small and there is a message: “Your popup is too small to display this page. Please enlarge it to proceed.”

I am wondering if someone can help me with:

  • Customize styles (width, height) of the popup?
  • Provide an example of popup?: any configuration object?
  • Is there any other way to change the popup size?

Hi Nazar,

You can work around this by providing your own popup window to loginWithPopup that has the correct width and height. Here’s the sample code:

<html>
    <head>
        <script src="https://cdn.auth0.com/js/auth0-spa-js/1.19/auth0-spa-js.production.js"></script>
    </head>
    <body>
        <button id="login">Click to Login</button>
    </body>
    <script>
        async function client(){
            const auth0 = await createAuth0Client({
                domain: 'yourdoma.in.auth0.com',
                client_id: 'application_id'
            });
            const width = 600;
            const height = 600;
            const left = window.screenX + (window.innerWidth - width) / 2;
            const top = window.screenY + (window.innerHeight - height) / 2;
            document.getElementById('login').addEventListener('click', async () => {
                const popup = window.open({},'auth0:authorize:popup',`left=${left},top=${top},width=${width},height=${height},resizable,scrollbars=yes,status=1`);
                await auth0.loginWithPopup({
                redirect_uri: 'http://127.0.0.1:8080',connection: 'facebook'},{popup});
                const user = await auth0.getUser();
                console.log(user);
            });
        }
        client();
    </script>
</html>
1 Like

Thanks for helping on this one @art.stupels !