# "Not Found" randomly appearing with custom login

**URL:** <https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031>\
**Category:** Get Help\
**Tags:** react\
**Created:** [June 28, 2022, 3:45am UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031 "2022-06-28T03:45:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![truescope](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/truescope/32/12814_2.png) [@truescope](https://community.auth0.com/u/truescope)\
**Post date:** [June 28, 2022, 3:45am UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/1 "2022-06-28T03:45:47Z")

</div>

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:

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [June 29, 2022, 3:43pm UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/3 "2022-06-29T15:43:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![truescope](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/truescope/32/12814_2.png) [@truescope](https://community.auth0.com/u/truescope)\
**Post date:** [July 12, 2022, 6:28am UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/4 "2022-07-12T06:28:34Z")

</div>

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”.

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

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

```auto
Not found.

```

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [July 12, 2022, 10:50pm UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/5 "2022-07-12T22:50:25Z")

</div>

Are you seeing any logs in you dashboard that are associated with the error?

---

<div class="post-metadata">

**Author:** ![truescope](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/truescope/32/12814_2.png) [@truescope](https://community.auth0.com/u/truescope)\
**Post date:** [July 12, 2022, 11:37pm UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/6 "2022-07-12T23:37:43Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![truescope](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/truescope/32/12814_2.png) [@truescope](https://community.auth0.com/u/truescope)\
**Post date:** [July 21, 2022, 3:44am UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/8 "2022-07-21T03:44:25Z")

</div>

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:

```auto
window.addEventListener('load', function() {

```

to

```auto
window.addEventListener('DOMContentLoaded', function() {

```

The full original template code is here (with the bug):

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [July 25, 2022, 3:10pm UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/9 "2022-07-25T15:10:00Z")

</div>

Sorry for the delayed response on this one. Thanks for posting your solution!

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [December 21, 2022, 5:23pm UTC](https://community.auth0.com/t/not-found-randomly-appearing-with-custom-login/86031/10 "2022-12-21T17:23:51Z")

</div>