PopupConfigOptions custom styles for popup (Facebook connection specific)

Help
1
  • 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.”

Screenshot 2021-05-11 at 17.21.16
Screenshot 2021-05-11 at 17.21.16894×1386 88.2 KB

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?
2

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
3

Thanks for helping on this one @art.stupels !

4

Is there an option to provide custom popup html? like having

whatever

in the loginWithPopup. I am asking since I can’t find any examples. Thank you.