Use the Auth0 CLI to customize the colors of the Universal Login page.
Your login screen is the very first thing people see before they enter their personal information on your website. You want to give the best impression possible. Securing their data with Auth0 is a great first step. It also leads to a login page branded with the colors and the logo of Auth0. Don't get me wrong, the branding looks excellent, but the inconsistent branding can startle some users.
Today you'll learn how to use the Auth0 CLI to customize your login page without leaving your terminal.
What You'll Need
You need a couple of things in place to follow along with this tutorial:
Auth0 Account. If you do not have one, you can sign up for a free Auth0 account.
Application in your Auth0 tenant. If you don't have an application in your Auth0 dashboard, don't worry; I will show you how to download one of Auth0's quickstarts.
What Is the Auth0 CLI
Auth0 wants to create tools that make developers' work more manageable since we are a developer-first company. With the CLI, we're reducing the number of steps and clicking around you have to do on the Auth0 Dashboard and keeping your workflow in the terminal.
This allows you to set up your applications faster, test logging in, get error log information, and more within the terminal. I'm blown away by how many features are packed in this tool. Today, I'll show how to update an application's login page in your Auth0 Dashboard.
Get an introduction to the Auth0 CLI by reading this blog post.
Install the Auth0 CLI
You can install the Auth0 CLI on macOS, Windows, and Linux. Here are the commands for each:
macOS with Homebrew
brew tap auth0/auth0-cli && brew install auth0
Windows manual installation
- Download the Windows binary from the latest release: https://github.com/auth0/auth0-cli/releases/latest/
- Extract
- Run
auth0.exe
Linux with Homebrew
brew tap auth0/auth0-cli && brew install auth0
I always like to double-check after I install new tools. With the newly available auth0 command, type auth0 -v to check the version and confirm the installation. The next thing you need is to sign to your Auth0 account and authenticate the CLI.
Connect CLI and login to Auth0 account
Sign in to your Auth0 account from the CLI by typing:
auth0 login
✪ Welcome to the Auth0 CLI 🎊
If you don't have an account, please go to https://auth0.com/signup
Your Device Confirmation code is: JKHH-QKFM
▸ Press Enter to open the browser to log in or ^C to quit...
You'll get welcomed to the Auth0 CLI, and you'll get a confirmation code. Press Enter on your keyboard. This will open a page in your browser asking you to verify the code on this page matches the one on the CLI. Click Confirm.
Next, you meet the Authorize App page. You can choose which Auth0 tenant you want to log in to if you have more than one. You'll see a long list of permissions that the Auth0 CLI wants to have on your account. Scroll down and click Accept
Back in your terminal, you'll see a message that you're logged in successfully.
Waiting for login to complete in browser... done
▸ Successfully logged in.
▸ Tenant: YOUR_AUTH0_DOMAIN.us.auth0.com
If you already have an application in your Auth0 tenant, you can skip to Edit the Universal Login Page.
Create a new application with Auth0 quickstart
If you don't have an application registered in the Auth0 Dashboard, you can create one from the CLI. Run the following command:
auth0 app create
The CLI will ask you to name your application and write a description for it. Then, you'll be asked to choose a type in this example, I'll a React application, so select Single Page Application. After that, you'll be asked to enter Allowed Callback URL then Configure Logout URLs enter http://localhost:3000 to follow along with this example. You'll get a message confirming you created your new application successfully.
Name: New CLI app
Description: testing this out
Type: Regular Web Application
Allowed Logout URLs: http://localhost:3000
Now that you're logged and have an application created, you can edit the login page.
Top comments (0)