Popup is not closing

[Dnomyar]

Hi there,

I have an issue when I use the authenticate('google') of AuthService.

When I trigger the button, the popup opens. Then, I connect my google accout and I am redirected to my server. Finally, I get a 200 from my server. But the popup doesn't closes itself.

Note : If I manually close the window, I get the error : Authentication Canceled.

What are the conditions for the popup to close itself ?

Here is the code :

this.auth.authenticate('google')
      .subscribe({
        next: (response) => console.log('response', response),
        error: (err: any) => {
            console.log('Err', err)
            this.eh.handleError(err)
        }, complete: () => {
            console.log('complete')
            this.router.navigateByUrl('dashboard')
        }
      });

I guess that the solution is here : https://github.com/ronzeidman/ng2-ui-auth/blob/master/src/popup.service.ts#L89
It seems to me that, in order that the popup closes itself, the configured redirect URI have to be the same that the location of the window. Am I right ?

Thanks for your work

[ronzeidman]

Yes, your redirect URI should equal the configured redirect URI (or the origin uri if you've not configured it in the provider)

[ronzeidman]

another common issue is that you have a redirect that does not preserve the query params and then the code cannot catch the query params on time. you'll have to use a non-redirected redirect in order for the popup to close.

[Dnomyar]

Thanks for your anwsers (I will have a look later)

[ronzeidman]

Any developments on this issue?

[Dnomyar]

Not yet and not soon, sorry :/

[FedeDR]

Hi
I have the same issue
in the 7.0.2 version, I have this configuration
{ baseUrl: 'http://domain.com/api/v1/social_auth' providers: { clientId: 'XXXXXXX, url: 'facebook', scope: ['email', 'public_profile'], redirectUri: 'http://domain.com', } }
with both provider url configured (url and redirectUri) I saw this behavior:
The authenticate open the popup and when I log in with Facebook credentials the redirect make a POST on my server (baseUrl + url) to exchange the token. After that, we redirect to redirectUri, than the popup close automatically and the response of exchange server was caught by authenticate's function that finalizes the login

In the 8.0.1 version, if I don't set the redirectUri, I have the same behavior as the previous version, but the post params brake the compatibility with the server.
If the redirectUri is set we don't have any POST to my server for token exchange and the popup do not automatically close
now, I can resolve this issue in two ways:
Change POST payload to old payload version
catch the code on redirect url, and exchange token manually. But how can I pass the response to the authenticate subscription?

[tuhin24]

I am not getting popup page. Instead I am getting a new page instead when I do
this.authService.authenticate(type).subscribe({
error: (err) => alert('An error occurred while authentication.')
, complete: () => alert('Authentication successfull')
});

Any tip on how I can get the page to show as a popup?

[ronzeidman]

@tuhin24 what's your environment? what configuration you use? what is the "type"?

[KAMAELUA]

Popup doesn't close on Edge.

Angular 6.
"ng2-ui-auth": "^9.0.0-beta.2",

[ronzeidman]

Just tested it, works for me.
There are timing issues in some angular apps that redirect the "redirect url" automatically to anther url causing this issue. try using a blank page that doesn't redirect anywhere as the redirect url either from the server or from the angular app itself.

[omostepaniuk]

Just tested it, works for me.

What version of the Edge have you tried it with?

It works on Windows Edge <44 without any issues. However, it does fail on Edge 44 for me as well. Looks like Edge throws

ERROR Error: Permission denied

here

ng2-ui-auth/projects/ng2-ui-auth/src/lib/popup.service.ts

Line 20 in 283fb17

return of(popupWindow);