PWA loginWithPopup blocked

[dennougorilla]

Description

Android pwa can't popup login. I can login in chrome browser on Android. But this app add to home screen can't login with popup. My manifest.json is "display": "standalone".

Popup is about:blank#blocked.

Reproduction

On Android version 9

1. App add to home screen.
2. Login with Popup.
3. about:blank#blocked

Environment

Android version 9
"@auth0/auth0-spa-js": "^1.2.3"

[dennougorilla]

[stevehobbsdev]

Is using a popup necessary? What happens when you use loginWithRedirect?

[dennougorilla]

I can use loginWithRedirect. But I want to keep app state(ex. dialog is open). If I use loginWithRedirect I need state management in localstorage or something.

[stevehobbsdev]

I think a small reproducable sample would help here; if you can supply us with that, I can take a look.

[stevehobbsdev]

Closing this for now. If a small repro is provided that enables us to debug the issue, we can re-open.

[zewa666]

Hey there @stevehobbsdev. Here's a sample, I've just experienced the same issue today on Droid.

The sources are available here, more specifically the registration part

[stevehobbsdev]

Thanks for the sample @zewa666

[zewa666]

@stevehobbsdev I think I figured out something. If I set a breakpoint here, while inspecting via remote debug in DevTools, and now single step over the window.open, it will open the popup. Now after a few secs the next step over and a run continue makes the popup successfully open.

So it could be that this is related to a timing issue. I'll try to clone the repo and try it out with a simple setTimeout fix to see whether this helps.

[zewa666]

Modiyfing the openPopup helper like this for the return fixed it for me. Of course this is not a nice way, there should be something better in place then just randomly waiting for a given time.

export const openPopup = () => {
  const popup = window.open(
    '',
    'auth0:authorize:popup',
    'left=100,top=100,width=400,height=600,resizable,scrollbars=yes,status=1'
  );
  if (!popup) {
    throw new Error('Could not open popup');
  }

  return new Promise((resolve) => setTimeout(() => resolve(popup), 2000));
};

I do see first the about:blank popup and after 2 secs it redirects to the Auth0 login page

[zewa666]

Hey @stevehobbsdev, did you have a chance to take a look at this?

[charsleysa]

@zewa666 @stevehobbsdev The fix is to not open the popup with a blank url and then change the url, just open the popup with the required url. Here's the runPopup function from our customized version of auth0-spa-js which works with PWA:

export const runPopup = (authorizeUrl: string, config: PopupConfigOptions) => {
    const popup = window.open(
        authorizeUrl,
        'auth0:authorize:popup',
        'left=100,top=100,width=400,height=600,resizable,scrollbars=yes,status=1'
    );
    if (!popup) {
        throw new Error('Could not open popup');
    }
    return new Promise<AuthenticationResult>((resolve, reject) => {
        const timeout = (config.timeoutInSeconds || DEFAULT_AUTHORIZE_TIMEOUT_IN_SECONDS) * 1000 + Date.now();
        const timeoutId = setInterval(() => {
            if (popup.closed) {
                clearInterval(timeoutId);
                reject({ ...CANCELED_ERROR, popup });
                return;
            }
            if (Date.now() > timeout) {
                clearInterval(timeoutId);
                reject({ ...TIMEOUT_ERROR, popup });
                return;
            }
        }, 1000);

        const popupEventHandler = function(e: MessageEvent) {
            if (!e.data || e.data.type !== 'authorization_response') {
                return;
            }
            clearInterval(timeoutId);
            window.removeEventListener('message', popupEventHandler, false);
            popup.close();
            if (e.data.response.error) {
                return reject(e.data.response);
            }
            resolve(e.data.response);
        };
        window.addEventListener('message', popupEventHandler, false);
    });
};