Auth0 Universal Login customization using Netlify

This repo is a proof-of-concept using Netlify to customize the Auth0 Universal Login page. This will push CSS and JS asset files to Netlify for hosting, then push a new template to your Auth0 tenant. Netlify, in this case, is just used to host a static assets. This method works with any hosted asset file, whether that's Netlify, S3, or your own CDN.

Getting it Working

Note that you will need to have a custom domain set up for your tenant and must load the login screen on your custom domain (not the *.auth0.com one) in order to see the changes.

1. Set the new Universal Login form

Set your tenant to use the New Universal Login experience.

2. Sign up with Netlify

3. Install the Netlify CLI and Authenticate

Use the Netlify documentation to get netlify-cli installed. You should be able to run the following command and get a response:

$ which netlify
/path/to/node/bin/netlify

Follow the entire getting started guide to get authenticated.

4. Deploy to Netlify

The netlify deploy --prod command is what we'll use to get our files live on a URL. The first time you run that you will get a prompt to create a new site or deploy to an existing site. When the deployment completes, you'll see a URL for your site:

$ netlify deploy --prod
... stuff
✔ Finished hashing 4 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/elated-hawking-b7264a/deploys/620551f6df7a4031caab411f
Unique Deploy URL: https://620551f6df7a4031caab411f--elated-hawking-b7264a.netlify.app
Website URL:       https://elated-hawking-b7264a.netlify.app

That last URL, the Website URL, is the base URL for the assets we need to use. You should be able to load the following URLs:

5. Adjust the template

The index.html file here is fairly useless when deployed to Netlify but it's what we'll use as the template for our Universal Login page. Change that template to use the URLs output during the deloyment process. Note that single quotes are used in the HTML so it can be sent more easily as valid JSON.

6. Upload the template via the Management API

We're going to setup a connection to the Management API of your tenant by using a temporary access token.

Follow the steps here to get an access token. You can adjust the scopes of the API Explorer app to just have update:branding permissions for a more secure call.
Create an .env file from exmaple.env and replace the values there with the ones from your tenant.
Run sh bin/deploy_template.sh and look for an output of 204 if the request completed properly.

joshcanhelp/netlify-universal-login