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:
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>