How do I open external (social) authentication in a page rather than a popup?

[deepaknulu]

I am self-hosting the Okta sign-in widget in a VueJS page (SPA, pkce=true). I have set config.authParams.display to “page” but the social logins (Google and LinkedIn) open up in a popup window. If I maximize the browser window, then the social login opens up in a tab in the same browser window. I see the same behavior with both Chrome and Safari on my Mac.

Isn’t config.authParams.display the setting that determines if a popup or a page is used for external IdP authentication?

How can I get the social login to always open up on the same page or in a tab in the same window?

Thanks!

[deepaknulu]

In Safari on an iPhone, the buttons don’t do anything since popups are blocked by Safari on iPhone. There is a setting to turn off popup blocker in Safari in iPhone settings, but I can’t expect my users to know about that and to do that.

I can’t be the only one having this issue. And if I am the only one, I hope someone knows what I need to do.

Please chime in even if you are not having this issue with the self-hosted Okta sign-in widget. Thanks!

[deepaknulu]

Does the Okta hosted login screen open popups for social logins? I am wondering if I should switch to Okta hosted. I started with Okta hosted and switched to self-hosted since the docs said I would have more flexibility and customizability with the latter.

[deepaknulu]

I was using showSignInToGetTokens() and switched to showSignInAndRedirect(). Looks like the former only supports popups for Social logins. The latter results in more redirects, but at least the experience is better for users (popup blockers don’t hamper the experience).