Skip to content

Instantly share code, notes, and snippets.

@saltukalakus
Created April 19, 2022 15:42
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save saltukalakus/af1c0f2eea52f0930da5bd1e9c14dc62 to your computer and use it in GitHub Desktop.
Custom classic login page per application
PATCH Auth0-domain/api/v2/clients/[client-id]
{
    "custom_login_page": "<!DOCTYPE\nhtml> <html> <head> \n<meta\ncharset=\"utf-8\"> \n<meta\nhttp-equiv=\"X-UA-Compatible\"\ncontent=\"IE=edge,chrome=1\"> \n<title>Sign\nIn\nwith\nAuth0</title> \n<meta\nname=\"viewport\"\ncontent=\"width=device-width,\ninitial-scale=1.0\"\n/> \n<link\nrel=\"stylesheet\"\nhref=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"> </head> \n<style> \nbody,\nhtml\n{ \nheight:\n100%; \nbackground-color:\n#f9f9f9; \n} \n.login-container\n{ \nposition:\nrelative; \nheight:\n100%; \n} \n.login-box\n{ \nposition:\nabsolute; \ntop:\n50%; \ntransform:\ntranslateY(-50%); \npadding:\n15px; \nbackground-color:\n#fff; \nbox-shadow:\n0px\n5px\n5px\n#ccc; \nborder-radius:\n5px; \nborder-top:\n1px\nsolid\n#e9e9e9; \n} \n.login-header\n{ \ntext-align:\ncenter; \n} \n.login-header\nimg\n{ \nwidth:\n75px; \n} \n#error-message\n{ \ndisplay:\nnone; \nwhite-space:\nbreak-spaces; \n} \n</style> <body> \n<div\nclass=\"login-container\"> \n<div\nclass=\"col-xs-12\ncol-sm-4\ncol-sm-offset-4\nlogin-box\"> \n<div\nclass=\"login-header\"> \n<img\nsrc=\"https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg\"/> \n<h3>Welcome</h3> \n<h5>PLEASE\nLOG\nIN</h5> \n</div> \n<div\nid=\"error-message\"\nclass=\"alert\nalert-danger\"></div> \n<form\nonsubmit=\"return\nfalse;\"\nmethod=\"post\"> \n<div\nclass=\"form-group\"> \n<label\nfor=\"name\">Email</label> \n<input \ntype=\"email\" \nclass=\"form-control\" \nid=\"email\" \nplaceholder=\"Enter\nyour\nemail\"> \n</div> \n<div\nclass=\"form-group\"> \n<label\nfor=\"name\">Password</label> \n<input \ntype=\"password\" \nclass=\"form-control\" \nid=\"password\" \nplaceholder=\"Enter\nyour\npassword\"> \n</div> \n<div\nclass=\"captcha-container\nform-group\"></div> \n<button \ntype=\"submit\" \nid=\"btn-login\" \nclass=\"btn\nbtn-primary\nbtn-block\"> \nLog\nIn \n</button> \n<button \ntype=\"button\" \nid=\"btn-signup\" \nclass=\"btn\nbtn-default\nbtn-block\"> \nSign\nUp \n</button> \n<hr> \n<button \ntype=\"button\" \nid=\"btn-google\" \nclass=\"btn\nbtn-default\nbtn-danger\nbtn-block\"> \nLog\nIn\nwith\nGoogle \n</button> \n</form> \n</div> \n</div> \n<!--[if\nIE\n8]> \n<script\nsrc=\"//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js\"></script> \n<![endif]--> \n<!--[if\nlte\nIE\n9]> \n<script\nsrc=\"https://cdn.auth0.com/js/polyfills/1.0/base64.min.js\"></script> \n<script\nsrc=\"https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js\"></script> \n<![endif]--> \n<script\nsrc=\"https://cdn.auth0.com/js/auth0/9.18/auth0.min.js\"></script> \n<script\nsrc=\"https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js\"></script> \n<script> \nwindow.addEventListener('load',\nfunction()\n{ \nvar\nconfig\n=\nJSON.parse( \ndecodeURIComponent(escape(window.atob('@@config@@'))) \n); \nvar\nleeway\n=\nconfig.internalOptions.leeway; \nif\n(leeway)\n{ \nvar\nconvertedLeeway\n=\nparseInt(leeway); \n \nif\n(!isNaN(convertedLeeway))\n{ \nconfig.internalOptions.leeway\n=\nconvertedLeeway; \n} \n} \nvar\nparams\n=\nObject.assign({ \noverrides:\n{ \n__tenant:\nconfig.auth0Tenant, \n__token_issuer:\nconfig.authorizationServer.issuer \n}, \ndomain:\nconfig.auth0Domain, \nclientID:\nconfig.clientID, \nredirectUri:\nconfig.callbackURL, \nresponseType:\n'code' \n},\nconfig.internalOptions); \nvar\nwebAuth\n=\nnew\nauth0.WebAuth(params); \nvar\ndatabaseConnection\n=\n'Username-Password-Authentication'; \nvar\ncaptcha\n=\nwebAuth.renderCaptcha( \ndocument.querySelector('.captcha-container') \n); \nfunction\nlogin(e)\n{ \ne.preventDefault(); \nvar\nbutton\n=\nthis; \nvar\nusername\n=\ndocument.getElementById('email').value; \nvar\npassword\n=\ndocument.getElementById('password').value; \nbutton.disabled\n=\ntrue; \nwebAuth.login({ \nrealm:\ndatabaseConnection, \nusername:\nusername, \npassword:\npassword, \ncaptcha:\ncaptcha.getValue() \n},\nfunction(err)\n{ \nif\n(err)\ndisplayError(err); \nbutton.disabled\n=\nfalse; \n}); \n} \nfunction\nsignup()\n{ \nvar\nbutton\n=\nthis; \nvar\nemail\n=\ndocument.getElementById('email').value; \nvar\npassword\n=\ndocument.getElementById('password').value; \nbutton.disabled\n=\ntrue; \nwebAuth.redirect.signupAndLogin({ \nconnection:\ndatabaseConnection, \nemail:\nemail, \npassword:\npassword, \ncaptcha:\ncaptcha.getValue() \n},\nfunction(err)\n{ \nif\n(err)\ndisplayError(err); \nbutton.disabled\n=\nfalse; \n}); \n} \nfunction\nloginWithGoogle()\n{ \nwebAuth.authorize({ \nconnection:\n'google-oauth2' \n},\nfunction(err)\n{ \nif\n(err)\ndisplayError(err); \n}); \n} \nfunction\ndisplayError(err)\n{ \ncaptcha.reload(); \nvar\nerrorMessage\n=\ndocument.getElementById('error-message'); \nerrorMessage.innerHTML\n=\nerr.policy\n||\nerr.description; \nerrorMessage.style.display\n=\n'block'; \n} \ndocument.getElementById('btn-login').addEventListener('click',\nlogin); \ndocument.getElementById('btn-google').addEventListener('click',\nloginWithGoogle); \ndocument.getElementById('btn-signup').addEventListener('click',\nsignup); \n}); \n</script> </body> </html>",
    "custom_login_page_on": true
}
@saltukalakus
Copy link
Author

Test link :
https://saltukalakus.auth0.com/authorize?scope=openid&response_type=token&state=abc&nonce=xyz&client_id=2CGgtkrfmm90KUQcgHJmX7aN0dtoaynl&redirect_uri=https%3A%2F%2Fjwt.io

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment