Docs

Calling your APIs with Auth0 tokens

Implement Passwordless Email with Magic Links in Single-Page Apps

With an email connection, the user is asked to enter their email address, to which Auth0 usually sends a one-time code. Instead, you can configure Auth0 to send a magic link.

Send Magic Link Flow

Sample Magic Link Email

The user then clicks the button or link in the email and is automatically signed in to your application.

Magic Link User Flow

OIDC-conformant pipeline and tokens

Setup

Access vs. ID Tokens

Configure an email provider

By default, Auth0 sends the email from its own SMTP provider. Auth0's built-in email infrastructure should be used for testing-level emails only. You can configure your own email provider to better monitor and troubleshoot the email service as well as be able to fully customize the emails.

You will need to use your own email provider to be able to modify the From, Subject, and Body of Passwordless emails.

Scopes

Configure the connection

  1. Navigate to the Connections > Passwordless page in the Auth0 Dashboard, and enable the Email toggle.

Enable Email Passwordless

  1. Select your Email Syntax, and enter your email's From, Subject, and Message text.

Configure Email Passwordless

You must change the From value to a non @auth0.com address for your custom email to be sent. Otherwise the default email template will be sent.

  1. Enter any Authentication Parameters you would like to include in the generated sign-in link.

  2. Adjust settings for your OTP Expiry and OTP Length, and click SAVE.

If you choose to extend the amount of time it takes for your one-time password to expire, you should also extend the length of the one-time password code. Otherwise, an attacker has a larger window of time to attempt to guess a short code.

Further reading

Multi-Language Support

The Message area supports multiple languages.

To choose the language, call the /passwordless/start authentication endpoint and set the value of the 'x-request-language' header. When this header is not set, the language is extracted from the 'accept-language' header, which is automatically set by the browser.

Message syntax

The Message area accepts Liquid syntax. You can use this syntax, combined with exposed parameter values, to programmatically construct elements of the message. For example, you can reference the request_language parameter to change the language of the message:

The following parameters are available when defining the message template:

Exposed Parameter Description
code The password to use
link The generated sign-in link
application.name The name of the application with which the user is signing up
request_language The requested language for message content
operation Indicates when the template has been triggered by an update to a user's email via the API. Equals change_email when triggered; otherwise, null.

Enable your apps

Click the Apps tab, and enable the apps for which you would like to use Passwordless Email.

Configure Callback URL

For security purposes, you must add your page's URL to the list of Access TokensAllowed callback URLs in your application's Settings section of the Dashboard.

Implementation

Use Lock (the Auth0 UI widget)

scopesLock with audiencePasswordless Mode is a professional-looking dialog that allows users to log in after receiving a one-time password via email or text message.

After installing Lock (version 11.2.0 or later), you must initialize it with your Client Id and domain. You can find this information in the Dashboard on your application settings page.

Then you can trigger the passwordless authentication using a magic link with the following code:

If you use custom domains, replace YOUR_DOMAIN with your custom domain.

The user will receive an email with the magic link. Once the user clicks on this link, Auth0 will handle the authentication and redirect back to the application.

You can follow any of the Single-Page App Quickstarts to see more about using Auth0.js in a SPA.

Use your own UI

You can perform passwordless authentication with a magic link in your single-page application using your own UI with the Auth0 JavaScript client library.

Construct a new instance of the Auth0 client as follows:

You must provide a way for the user to enter an email to which the magic link will be sent. Then you can begin the passwordless authentication as follows (assuming the name of your form input as input.email):

This will send an email containing the magic link. After clicking the link, the user will be automatically signed in and redirected to the redirectUri which can be specified in the Auth0 constructor, where you will need to parse the token with webAuth.parseHash:

With magic link transactions, both the initial request and the response to the request must take place in the same browser or the transaction will fail. This is particularly relevant for iOS users, who cannot change their default web browser.

For example, the user makes the request using Chrome, but iOS opens the magic link received via email using Safari. If this happens, the transaction fails.

Check out the Auth0.js SDK reference documentation for more information.