Universal Login - new

Hello,
i had customized my html-login page (new design) and made a mistake with the integration the state parameters.
Can you please post here the original code?

Thanks so much!
Marcel

Hey there!

Here’s the code for Login Page (New Universal Login) - default template:

<!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, maximum-scale=1, user-scalable=0" />
</head>
<body>

  <!--[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/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.24/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;
    var colors = config.colors || {};

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      /* additional configuration needed for custom domains
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      }, */
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false
    });

    if(colors.page_background) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                  colors.page_background +
                ' }';
      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }

    lock.show();
  </script>
</body>
</html>

Hello Konrad, but where is the part with the input-fields?

<input type="hidden" name="state" value="????" />

1 Like

Can you send me a screenshot from your dashboard so I can see exactly what template you’re looking for? Cause it seems like we’re talking about two different things.

`<!DOCTYPE html>

body {
background: #ffffff;
font-family: ulp-font, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif;
}
.main-wrapper {
background: #ffffff;
}
.ulp-alert.danger {
background: #e55e3f;
}
.ulp-alert.success {
background: #1bc462;
}
.ulp-button-default {
background-color: #3490dc;
color: #ffffff;
}
.ulp-button-success {
background-color: #1bc462;
}
.ulp-button-error {
background-color: #e55e3f;
}
@supports (mask-image: url(’/static/img/branding-generic/copy-icon.svg’)) {
@supports not (-ms-ime-align: auto) {
.input-container.error::before {
background-color: #e55e3f;
}
}
}
.input.ulp-input-error {
border-color: #e55e3f;
}
.error-cloud {
background-color: #e55e3f;
}
.error-fatal {
background-color: #e55e3f;
}
.error-local {
background-color: #e55e3f;
}
.ulp-popover.error {
background-color: #e55e3f;
border-color: #e55e3f;
}
.ulp-popover.error::before {
border-bottom-color: #e55e3f;
}
.ulp-popover.error::after {
border-bottom-color: #e55e3f;
}
#alert-trigger {
background-color: #e55e3f;
}


/* By default, hide features for javascript-disabled browsing /
/
We use !important to override any css with higher specificity /
/
It is also overriden by the styles in in the header file /
.no-js { display: none !important; }



/
We use !important to override the default for js enabled /
/
If the display should be other than block, it should be defined specifically here */
.js-required { display: none !important; }
.no-js { display: block !important; }
div.input-container input { padding-right: 16px !important; }
div.input-container::after { display: none !important; }

<title>businessplan-for-free | login</title>
    <div class="ulp-alert-dropdown-outer">
      <span id="alert-trigger"></span>
    
      <div class="ulp-alert-dropdown-inner">
        <ul class="alert-list">
          
            <li>
              <h2 class="alert-list-title">Achtung</h2>
            </li>
          
        
          
            <li class="alert-list-item">
              <span class="alert-list-icon-container">
                <span class="ulp-icon key"></span>
              </span>
            
              <h3 class="alert-title">Dev Keys</h3>
            
              <p class="alert-message">One or more of your connections are currently using Auth0 development keys and should not be used in production.</p>
            
              
                <a class="link _link" href="https://auth0.com/docs/connections/social/devkeys" target="_blank">Erfahre mehr..</a>
              
            </li>
          
        </ul>
      </div>
    </div>
  

  <div class="ulp-main">
    <header class="ulp-header _prompt-header">
      <!--<img class="header-logo _header-logo" id="prompt-logo-center" src="https://businessplan-for-free.de/images/pfeil.jpg" alt="Welcome" />-->
    
      <h1 class="header-title _header-title">businessplan-for-free.de</h1>
    
      <div class="header-description _header-description">
        <p class="text-simple _text">Dein Businessplan-Tool</p>
      </div>
    </header>
  
    <div class="ulp-container _prompt-body">
      
    
      
        <form method="POST" class="ulp-db">
          <input type="hidden" name="state" value="@CSRF" />
        
          <div class="ulp-fieldset-container">
            <fieldset class="ulp-input-group">
              <div class="input-container _input-container email" data-action-text="" data-alternate-action-text="">
                <label for="username">Benutzer</label>
              
                <input class="input _input" inputMode="email" name="username" id="username" placeholder="Email-Adresse" type="text" aria-label="Email Adresse" value="" required autoFocus />
              </div>
            
              <div class="input-container _input-container password" data-action-text="" data-alternate-action-text="">
                <label for="password">Passwort</label>
              
                <input class="input _input" name="password" id="password" placeholder="Passwort" type="password" aria-label="Passwort" required />
              </div>
            
              
            </fieldset>
          
            
          </div>
        
          
            
              <p class="ulp-forgot-password-link">
                
                  <a class="link _link" href="/u/reset-password/request/Username-Password-Authentication?state=g6Fo2SAyOGN6Zkk0bi1YMnA2M3JYM1JPRHF3VUNHSFYxMDhRTqN0aWTZIElWeW9kc3NDeWE1dV9reEtnVFFPV2ZOQWFDXy1RVWh5o2NpZNkgdmNmRnE0MktpQVJ1cEZXeDM2NlFaMVFyeTMzVEdZVEo">Passwort vergessen?</a>
                
              </p>
            
          
        
          <div class="button-bar">
            
              <button type="submit" name="action" value="default" class="ulp-button ulp-button-default _button _button-default ">Login</button>
            
          </div>
        </form>
      
    
      
        <div class="ulp-vertical-separator _vertical-separator">
          <span>Oder</span>
        </div>
      
    
      
        <div class="ulp-social-providers">
          
            <form method="post" class="idp-social-button-container">
              <input type="hidden" name="state" value="g6Fo2SAyOGN6Zkk0bi1YMnA2M3JYM1JPRHF3VUNHSFYxMDhRTqN0aWTZIElWeW9kc3NDeWE1dV9reEtnVFFPV2ZOQWFDXy1RVWh5o2NpZNkgdmNmRnE0MktpQVJ1cEZXeDM2NlFaMVFyeTMzVEdZVEo" />
            
              <input type="hidden" name="connection" value="google-oauth2" />
            
              <button type="submit" class="idp-social-button _social-button" data-provider="google">
                
                  <span class="idp-icon" data-provider="google"></span>
                
              
                <span class="idp-text">Login mit Google</span>
              </button>
            </form>
          
            <form method="post" class="idp-social-button-container">
              <input type="hidden" name="state" value="g6Fo2SAyOGN6Zkk0bi1YMnA2M3JYM1JPRHF3VUNHSFYxMDhRTqN0aWTZIElWeW9kc3NDeWE1dV9reEtnVFFPV2ZOQWFDXy1RVWh5o2NpZNkgdmNmRnE0MktpQVJ1cEZXeDM2NlFaMVFyeTMzVEdZVEo" />
            
              <input type="hidden" name="connection" value="facebook" />
            
              <button type="submit" class="idp-social-button _social-button" data-provider="facebook">
                
                  <span class="idp-icon" data-provider="facebook"></span>
                
              
                <span class="idp-text">Login mit Facebook</span>
              </button>
            </form>
          
        </div>
      
    </div>
  </div>

  
    <div class="ulp-footer _prompt-footer">
      <div>Du hast keinen Account? 
        <a class="link _link" href="/u/signup?state=g6Fo2SAyOGN6Zkk0bi1YMnA2M3JYM1JPRHF3VUNHSFYxMDhRTqN0aWTZIElWeW9kc3NDeWE1dV9reEtnVFFPV2ZOQWFDXy1RVWh5o2NpZNkgdmNmRnE0MktpQVJ1cEZXeDM2NlFaMVFyeTMzVEdZVEo">Meld dich an!</a>
      </div>
    </div>
  
</div>


  <a href="https://auth0.com/?utm_source=lock&amp;utm_campaign=badge&amp;utm_medium=widget" target="_blank" rel="noopener noreferrer" class="ulp-auth0-badge" aria-label="Link to the Auth0 website">
    <span class="ulp-auth0-badge-image"></span>
  </a>
`

The version I sent is the HTML template for Login Page (New Universal Login) default template without any changes.

I need the HTML Template for the “Customize Login Page”.

New Universal Login -> Login Page -> Customize Login Page -> Custom Login Form

<!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;
    }
  </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>
        <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.13/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 params = Object.assign({
        /* additional configuration needed for use of custom domains
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: 'YOUR_CUSTOM_DOMAIN'
        }, */
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code'
      }, config.internalOptions);

      var webAuth = new auth0.WebAuth(params);

      var databaseConnection = 'Username-Password-Authentication';

      function login(e) {
        e.preventDefault();
        var username = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        webAuth.login({
          realm: databaseConnection,
          username: username,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }

      function signup() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;

        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }

      function loginWithGoogle() {
        webAuth.authorize({
          connection: 'google-oauth2'
        }, function(err) {
          if (err) displayError(err);
        });
      }

      function displayError(err) {
        var errorMessage = document.getElementById('error-message');
        errorMessage.innerHTML = 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>

1 Like

There is 3 default templates: Lock, Lock (passwordless) and Custom Login Form, and all those are different than “New Universal Login”.

I can copy the Source code from my login site (when New login in use) but I cant find what I have to put in value in <input type="hidden" name="state" value="????" /> like marcel.moebus asked before.

Because of that I cant modify New Login, only the Classic one.

There have to be value that Login page can continue after login.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.