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="????" />
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&utm_campaign=badge&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>
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.