Blank page on redirect

This is the same bug as reported at:

https://community.auth0.com/t/blank-page-when-redirect-to-domain-auth0-com-u-login

That topic was closed but the problem has not gone away, and is not fixed by the proposed solution. In summary, in a Single Page web application using auth0-spa-js on iOS, redirecting to the Auth0 login results in a blank page or solitary pink rectangle. This occurs intermittently, around 50% of the time. Refreshing the blank page (usually) makes the correct login page come up. Here is an example of the blank login page:

image

The problem only occurs on iOS as far as I have seen. It works in all browsers tested on Windows and Android. I have not tested Mac OS. The specific problem browsers I have tested are:

  • Mobile Safari 14.0.0 / iOS 14.1.0
  • Chrome Mobile iOS 86.0.4240 / iOS 14.1.0

Here is a complete single page client application using only vanilla Javascript that can be used to reproduce this bug – just change the hardcoded parameters to createAuth0Client. Would be good to get a fix here as the SDK seems unusable on iOS.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <script src=
      "https://cdn.auth0.com/js/auth0-spa-js/1.9/auth0-spa-js.production.js"
    ></script>
</head>
<body>
    <input type="button" onclick="login_button()" id="login" value="Login">
    <input type="button" onclick="logout_button()" id="logout" value="Logout">
    <div id='output'></div>

<script>

function log(txt) {
    // Simple logging within page
    const output = document.querySelector('#output');
    output.insertAdjacentHTML('beforeend', '<p>' + txt);
}

function enable_buttons(loggedIn) {
    document.querySelector('#login').disabled = loggedIn;
    document.querySelector('#logout').disabled = !loggedIn;
}

async function login_button() {
    log('auth0.loginWithRedirect');
    await auth0.loginWithRedirect({
        redirect_uri: window.location.href
    });
}

async function logout_button() {
    log('auth0.logout');
    enable_buttons(false);
    await auth0.logout({
        returnTo: window.location.href
    });
}

async function init() {

    log('createAuth0Client');
    auth0 = await createAuth0Client({
        domain: 'dev-fp2vwhkz.eu.auth0.com',
        client_id: 'bWTs28x5oTvtgh5FXjR4jInaCSoNMe0K',
        audience: 'bug-demo-api'
    });

    const isAuthenticated = await auth0.isAuthenticated();
    enable_buttons(isAuthenticated);
    if (isAuthenticated) {
        log('Authenticated!');
        return;
    }

    // Not authenticated, see if this is a redirect from login
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
        log('auth0.handleRedirectCallback');
        const token = await auth0.handleRedirectCallback();
        
        log('Logged In');
        enable_buttons(true);
        const url = window.location.protocol + "//" +
            window.location.host + window.location.pathname;
        window.history.replaceState({}, document.title, url);
        return;
    }

}


(function() {
    init();
})();

</script>
</body>
</html>

Do you use X-Frame-Options as ‘SameOrigin’ header? Safari losts the origin on redirects, I think it’s a problem of all Webkit-based browsers.

No, I’m not using that header. I don’t think it would explain the intermittent nature of the problem anyway.

Testing update: this worked in Safari and Chrome on an iPad running iOS 12.4.8. So it may be specific to iPhone or to iOS 14.x.

Hey there folks!

Thanks for providing such context! Can any of you test it out on different iOS so we can confirm whether it’s an iOS version issue or iPhone itself?

Further testing update: Works on MacOS 10.15.6 (Catalina) / Firefox.

I’ve still only seen this bug on iOS 14.1.0, but on more than one device and on both Safari and Chrome.

I have a server that can be used to reproduce this running at:

You won’t be able to log in, of course, but if the Auth0 login page comes up it’s working. Since it’s intermittent, try hitting browser back from login page, and try the login button a number of times. Feedback from iOS users particularly appreciated.

Even on affected browsers the failure rate seems variable – from as low as 5% to as high as 50%.