Hi
Any time we try to switch to a customized login page, we get this random error:
- user navigates to the site
- redirects to the login page
- user signs in
- sometimes is redirected to a blank page saying “not found”
- reloading the page, you’re taken back to the sign in form
Here’s a sign in page that seemed to fail:
https://[my tenant].au.auth0.com/login?state=...
&client=...
&protocol=oauth2
&connection=...
&audience=https...
&redirect_uri=...
&history=%5Bobject%20Object%5D
&location=%5Bobject%20Object%5D
&match=%5Bobject%20Object%5D
&scope=openid%20profile%20email%20offline_access
&response_type=code
&response_mode=query
&nonce=...
&code_challenge=...
&code_challenge_method=S256
&auth0Client=...
I’ve omitted some sensitive stuff with ‘…’, but whats with “history” “match” and “location” ? They are literal objects?
Here’s a sign in page that worked fine:
https://[my tenant].au.auth0.com/login?state=...
&client=...
&protocol=oauth2
&connection=...
&audience=...
&redirect_uri=...
&scope=openid%20profile%20email%20offline_access
&response_type=code
&response_mode=query
&nonce=...
&code_challenge=...
&code_challenge_method=S256
&auth0Client=...
Note that it doesnt have the history, location and match objects. I suspect they are causing me grief.
Any idea whats going on ?
I’m using
- React 18
- auth0/auth0-react 1.5.0
This is occurring on firefox/chrome/any browser, randomly.
Hi @truescope,
What is the path of the “not found” page? Could you share some of the code that is creating these requests?
Also, is there a reason you are using an older version of the auth0-react library?
Hey @dan.woda sorry for the delay. I’ve updated to the latest auth0 version and it’s still randomly occurring. I’ve managed to FINALLY capture an example login that’s failed. I can paste this url into my browser, log in, and i consistently get “Not Found”.
https://ts-datahub-dev.au.auth0.com/login?state=hKFo2SBVWW9iUmhHaXkzMHVCaWlPS1prdFp6RGtvX3lrdWNtOKFupWxvZ2luo3RpZNkgOXFmVWFucDRPaVJoanlFa3RfTnVMNE96bTZ0VU1ibWWjY2lk2SBoRFdUM2h5bTYwVEhYekxaVlJtNld4M2dsbDJ2azNOYg&client=hDWT3hym60THXzLZVRm6Wx3gll2vk3Nb&protocol=oauth2&connection=datahub&audience=https://api.datahub.dev.truescope.cloud&redirect_uri=https://datahub.dev2.truescope.cloud&history=[object Object]&location=[object Object]&match=[object Object]&scope=openid profile email offline_access&response_type=code&response_mode=query&nonce=MkR4Wl9HM3JBYWMwWmJWOW5Tbk1wUGk5TDc5R3Q3d0JtSDVCbldSSEJZVw==&code_challenge=I8gmExj3eCxIJu6DeE7KeXA7ydNXut6cTYouar6OsA4&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMS4xMC4yIn0=
the funny thing is, it happens randomly. Half the time, I can log in fine. other times, i get this “not found” error. I’ve tried clearing my local cache, cookies, etc to try and consistently reproduce it… but no luck.
It seems to happen if i haven’t logged in for a few hours.
the path of the “not found” page (after clicking log in) is:
https://ts-datahub-dev.au.auth0.com/login?state=hKFo2SBVWW9iUmhHaXkzMHVCaWlPS1prdFp6RGtvX3lrdWNtOKFupWxvZ2luo3RpZNkgOXFmVWFucDRPaVJoanlFa3RfTnVMNE96bTZ0VU1ibWWjY2lk2SBoRFdUM2h5bTYwVEhYekxaVlJtNld4M2dsbDJ2azNOYg&client=hDWT3hym60THXzLZVRm6Wx3gll2vk3Nb&protocol=oauth2&connection=datahub&audience=https://api.datahub.dev.truescope.cloud&redirect_uri=https://datahub.dev2.truescope.cloud&history=[object%20Object]&location=[object%20Object]&match=[object%20Object]&scope=openid%20profile%20email%20offline_access&response_type=code&response_mode=query&nonce=MkR4Wl9HM3JBYWMwWmJWOW5Tbk1wUGk5TDc5R3Q3d0JtSDVCbldSSEJZVw==&code_challenge=I8gmExj3eCxIJu6DeE7KeXA7ydNXut6cTYouar6OsA4&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMS4xMC4yIn0=
and it just says in plain text:
Not found.
Are you seeing any logs in you dashboard that are associated with the error?
Logs? Like in auth0? There’s nothing in the console log of the browser. The “Not Found” appears to be hosted by auth0 ? (at https://*.au.auth0.com)
update: I looked at the logs in auth0, nothing. All successful logins or silent authentications
The strange thing is - if we use “Lock”, it works fine. (you know in Branding->Universal Login->Login tab-> you can switch between lock or custom login form). We wanted to use a custom login form, so that we can style the page differently. but it just randomly fails 
I have FINALLY found the cause of the issue.
- open your auth0 tenant
- go to branding → universal login → select ‘classic universal login experience’
- pick the ‘login’ tab
- where you customize the html, pick the “Custom Login Form” html example
- save the page
- visit your login page and click the login button AS SOON AS you can. like, within a second of the page appearing. This means you need the username/password prepopulated by your browser (which most browsers do, if you’ve clicked ‘save login’. I’d recommend having already logged in and saved your password before hand. then log out/visit the page/login QUICKLY
the problem is that onLoad is hooking up the event handlers but not initializing the webAuth library quickly enough - so it webAuth.login is functioning with corrupted parameters and breaks
The FIX is to switch change line 107:
window.addEventListener('load', function() {
to
window.addEventListener('DOMContentLoaded', function() {
The full original template code is here (with the bug):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body, html {
height: 100%;
background-color: #f9f9f9;
}
.login-container {
position: relative;
height: 100%;
}
.login-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 15px;
background-color: #fff;
box-shadow: 0px 5px 5px #ccc;
border-radius: 5px;
border-top: 1px solid #e9e9e9;
}
.login-header {
text-align: center;
}
.login-header img {
width: 75px;
}
#error-message {
display: none;
white-space: break-spaces;
}
</style>
<body>
<div class="login-container">
<div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
<div class="login-header">
<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"/>
<h3>Welcome</h3>
<h5>PLEASE LOG IN</h5>
</div>
<div id="error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div class="form-group">
<label for="name">Email</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email">
</div>
<div class="form-group">
<label for="name">Password</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<div class="captcha-container form-group"></div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block">
Log In
</button>
<button
type="button"
id="btn-signup"
class="btn btn-default btn-block">
Sign Up
</button>
<hr>
<button
type="button"
id="btn-google"
class="btn btn-default btn-danger btn-block">
Log In with Google
</button>
</form>
</div>
</div>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
window.addEventListener('load', function() {
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
);
var leeway = config.internalOptions.leeway;
if (leeway) {
var convertedLeeway = parseInt(leeway);
if (!isNaN(convertedLeeway)) {
config.internalOptions.leeway = convertedLeeway;
}
}
var params = Object.assign({
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code'
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
var databaseConnection = 'Username-Password-Authentication';
var captcha = webAuth.renderCaptcha(
document.querySelector('.captcha-container')
);
function login(e) {
e.preventDefault();
var button = this;
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth.login({
realm: databaseConnection,
username: username,
password: password,
captcha: captcha.getValue()
}, function(err) {
if (err) displayError(err);
button.disabled = false;
});
}
function signup() {
var button = this;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password,
captcha: captcha.getValue()
}, function(err) {
if (err) displayError(err);
button.disabled = false;
});
}
function loginWithGoogle() {
webAuth.authorize({
connection: 'google-oauth2'
}, function(err) {
if (err) displayError(err);
});
}
function displayError(err) {
captcha.reload();
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.policy || err.description;
errorMessage.style.display = 'block';
}
document.getElementById('btn-login').addEventListener('click', login);
document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
document.getElementById('btn-signup').addEventListener('click', signup);
});
</script>
</body>
</html>
Sorry for the delayed response on this one. Thanks for posting your solution!
1 Like