Customizing the Classic Hosted Login Page via Management API / Terraform

lihua.zhang · August 15, 2022, 11:47pm

Problem Statement:

How to customize my login page (classic experience) outside of the dashboard

Solution:

The Classic Universal Login page can be customized via the Global Client for the tenant. (The Global Client ID can be found in Tenant Settings > Advanced > Global Client Information ).

This is what the Deploy CLI uses behind the scenes when managing the custom login page. Using the CLI is an easier option for managing the custom login page.

So using the PATCH clients endpoint for the global client ID, two fields needs to be set:

custom_login_page_on - (boolean, true = custom login page is enabled)
custom_login_page - (where the HTML should be stored - will need ["] characters and new line characters escaped to be compatible with JSON format)

The same parameters need to be used with Terraform. Please see Terraform docs for updating clients here:
https://registry.terraform.io/providers/auth0/auth0/latest/docs/resources/client

We can also set a custom login page on a per application basis by enabling the custom login page on normal client IDs and providing the desired HTML to override the Global client settings.

Saltuk · August 17, 2022, 4:57pm

Here is a Gist with a sample HTML for quick testing:

gist.github.com

https://gist.github.com/saltukalakus/af1c0f2eea52f0930da5bd1e9c14dc62

update_client.md


```
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
}
```