How to disable popup window?

[Namesonic]

There appears to be a providers option called display: 'popup' along with popupOptions: { width: 452: height: 633 } but there is no way to disable the popup window.

Is this a planned feature?

[dgrubelic]

Hi @Namesonic,

currently, vue authenticate only supports popup windows for authentication process. I'll see to implement other ways like tab soon.

What kind of auth process do you have and would like to implement in your app?

[Namesonic]

I have a VueJS SPA app that will use a seperate Laravel Passport installation as it's authorization server and API for data.

There is no user login/registration on the SPA app, just a "Login With" action as I'm implementing the client credentials grant to enforce that the user must first be authenticated with the Passport installation to grant themselves access.

The Laravel APP will provide a proxy for the SPA app that will inject the client id and secret into the final API call. This way the SPA app can run independent of any database or embedded client secret.

If the popup window was configurable, I'd disable it so that the "Login With" flow happens all within the same window.

Auth Process Flow

SPA App - User clicks "Login With" SPA Redirects to Passport App to Authorize Passport App redirects back to SPA app with grant logged in

Is this sound?

[tdewolff]

Shouldn't this be fairly trivial? This what the redirect URL is for. Instead of a popup, we redirect to user immediately. When the user is done with authorization in the third-party page it is redirected back to our site. You could use a tab but I prefer to be redirected in the same tab actually.

I'm looking forward to change to redirects as this is also easier for mobile devices.

[dgrubelic]

I have found a fix for this issue. Should be available in the next version. Since this is SPA, the only way to avoid popups is to open new tab because we can't lose reference and current authentication state.

[dgrubelic]

@Namesonic You can disable popup by setting popup options for each provider. Like this:

{
  instagram: {
    popupOptions: { height: null, width: null }
  }
}

[cyberdude]

setting height and width to null it doesn't seems to disable pop ups

[yannski]

I'm also interested in a no popup version. It's mandatory for the OAuth Implicit Flow (app is completely "private" and the user is immediately redirected if not authenticated).

[prismodev]

@cyberdude setting popupOptions: null worked for me. Except that it opens in a new tab, which is bad for my case anyway.

Is there any alternative @dgrubelic ?

[yabuking84]

also it would really be helpful as to were we can change the location for the popUp window. I want it to center. Thanks.

[xpedrooo]

Hi, Is the issue in disabling the pop-up is fixed? Thanks.