popup blocked by browser

[yusakapon]

Popups are set with uxMode: "popup".
The login method is executed when the login button is pressed, but the popup seems to be blocked by browsers such as safari.
Is this expected behavior?
I would like to use popup mode rather than redirect mode for better UX.

// init method
const openloginAdapter = new OpenloginAdapter({
    adapterSettings: {
        clientId: CLIENT_ID,
        network: "testnet",
        uxMode: "popup",
        loginConfig: {
            jwt: {
                verifier: "verifier-dev", 
                typeOfLogin: "jwt",
                clientId: "xxxxx", 
            },
        },
    },
});
web3Auth.configureAdapter(openloginAdapter);
await web3Auth.init();

// login method
const connecter = await newWeb3Auth.connectTo(
    WALLET_ADAPTERS.OPENLOGIN,
    {
        loginProvider: "jwt",
        extraLoginOptions: {
            id_token: jwtToken, 
            domain: "https://xxxxxx.amazoncognito.com/", 
            verifierIdField: "email",
            redirect_uri: window.location.href,
        },
    }
);

[yashovardhan]

Hey @yusakapon

Thanks for submitting your question. As I checked, it seems there might be a few best practices around using popups which you can use online, but generally, they're based on some heuristics, so are difficult to get around. I might advise you to use the redirect method here since that is the way to avoid it. If not, you might have to add some wording for the users to enable popups in settings.

[yusakapon]

@yashovardhan
Thank you for your response.
In the case of the pattern Web3Auth,initModal,connect, the modal opens without being blocked.
In case of the pattern Web3AuthCore,init,connectTo, it is blocked.
Is this caused by an internal implementation difference?

We are using custom authentication with jwtToken and have to implement it with the latter, which would ruin the UX.
Are there any plans to add the ability to use custom authentication with jwtToken in Web3Auth instead of Web3AuthCore?

[himanshuchawla009]

Due to browser restrictions on popups, you should reduce the time taken between user interaction and the login popups being opened. This is highly browser dependent, but the best practice for this is to separate the initialization of the SDK and the user login method calls.
Try calling connectTo function on some button click rather than calling it immediately on page load.

[yusakapon]

@himanshuchawla009
Thank you for your response.
In the actual implementation, as you have presented, the initialization is performed on page load and the connectTo is performed on button click.
However, the popup is blocked by safari.

[himanshuchawla009]

can you share your staging app URL, I can see if you can do else to improve it. But this is something is we can't do much about since browsers do intelligent tracking prevention and they don't always block popups on user interaction. Either user has to change the browser settings to allow popups or you can prompt a notification for user to allow popups in case it is being blocked.

[shubham-spreadd]

Hi @yusakapon
Can you please share how you have resolved this issue?
I'm also trying to use popup but it is blocked in browsers!