Passwordless With Email

Published on August 23, 2022
Learning GoalLearn how to implement passwordless email authentication with Auth0

In this lab, you will:

  • Configure an Auth0 passwordless connection.
  • Test passwordless login using email.

What is Passwordless Authentication?

Passwordless authentication is the process of verifying the identity of a user with something other than a password. The most common passwordless authentication methods include asking users to prove their digital identity by providing:

  • Something they own: your users have access to a device or account they own.
  • Something they are: your users provide a biometric trait that is unique to them, like their fingerprints.

The benefits of using passwordless authentication include improved user experience, enhanced security, and reduced total cost of ownership.

Auth0 Makes Passwordless Authentication Easy

Auth0 offers passwordless connections that allow users to log in to your applications without needing to remember yet another password. For this exercise, you'll enable passwordless authentication using something your users own: their email accounts.

Your users will experience the following login flow when using passwordless authentication with email:

  • Your application will redirect users to the Auth0 Universal Login Page whenever they need to log in.
  • Your users will enter an email address in the provided login form instead of a username and password combination.
  • Your users will receive a one-time-use code via email.
  • They will enter the one-time-use code on the login screen to access the application.

Lab Setup

Create an Auth0 Account

If you already have an Auth0 account, you can log in to your tenant and continue to the next step.

Otherwise, sign up for a free Auth0 account.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Once you sign in, Auth0 takes you to the Auth0 Dashboard, where you can configure and manage the authentication services for your applications.

Set Up a Passwordless Connection

It would be best for you to use a non-production tenant where you are comfortable trying new features.

Ensure that you are still logged in to the Auth0 Dashboard and follow these steps:

  • Head to the Auth0 Dashboard.
  • Click the "Authentication" tab on the left-hand menu.
  • Click the "Passwordless" option to open the "Passwordless Connections" page.
  • Click the toggle button of the "Email" option.

A modal will come up for you to customize the settings and options, allowing your users to use one-time password (OTP) authentication via email messages:

  • Click the "Settings" tab.
    • You can customize the content and appearance of the email message your users will receive using the From, Subject, and Body fields.
    • For simplicity, use the provided default values.
    • Click the "Save" button.
You will get a toast notification with the following message: "Successfully saved your changes. Changes may take up to 30 seconds before they take effect."
  • Click the "Applications" tab.
    • You can enable this passwordless connection on any of your applications by clicking on the toggle button next to its name.
    • You need to enable the connection on at least one application to try it out in the next steps.
    • Click the "Save" button.
You will get a toast notification with the following message: "Apps configuration saved successfully."

Caveats

By default, Auth0 sends the email from its own SMTP provider. However, Auth0's built-in email infrastructure should be used for testing-level emails only as it doesn't allow you to modify the content of the email your users will receive using the abovementioned fields. For simplicity, you'll use the default Auth0 SMTP provider for this exercise.

For production, you can configure your own SMTP email provider, such as Mandrill, Amazon SES, or Sendgrid, to better monitor and troubleshoot the email service and to fully customize the email messages. Additionally, for Auth0 to send your custom email, you must change the "From" value to an email address that is not from the @auth0.com domain. Otherwise, Auth0 will send the default email template.

Visit the "Passwordless Authentication with Email" to learn more about how you can configure your Auth0 passwordless connection.

Implement Passwordless Authentication

You have set up your passwordless connection using email. Now, you need to configure the Auth0 Universal Login page to use that passwordless connection so your users can log in using only their email addresses:

  • Click the "Branding" tab on the left-hand menu of the Auth0 Dashboard.
  • Click the "Universal Login" option.
  • Click the "Advanced Options" box to override the Universal Login page with custom HTML.
  • Click the "Login" tab and then click the toggle button present in the "Customize Login Page" box.
    • You can now interact with the code widget below.
  • Locate the "Default Templates" drop-down menu in the top-right corner of the widget.
  • Select the Lock (passwordless) option.
    • The HTML code within the widget will change.
  • Finally, scroll to the bottom and click the "Save Changes" button.
You will get a toast notification with the following message: "The custom login page has been saved."

Test Your Passwordless Authentication with Email

Use the Auth0 Dashboard to log in

Instructions

  • Visit the Auth0 Dashboard home page.
  • Locate the "Try your Login box" under the "Next Steps" section.
  • Click the "Try it out" link.
  • Enter your email address using the input box under the message "Otherwise, enter your email to sign in or create an account".
  • Click the "Submit" button.

Expected results

Auth0 will send you an email with a verification code you'll need to enter on the login page to access the account. Once you do so, a success page loads showing you the "It Works!" title and a box with the user information present in your decoded ID token.