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.
The user then clicks the button or link in the email and is automatically signed in to your application.
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.
Configure the connection
- Navigate to the Connections > Passwordless page in the Auth0 Dashboard, and enable the Email toggle.
- Select your Email Syntax, and enter your email's From, Subject, and Message text.
Enter any Authentication Parameters you would like to include in the generated sign-in link.
Adjust settings for your OTP Expiry and OTP Length, and click SAVE.
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.
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:
||The password to use|
||The generated sign-in link|
||The name of the application with which the user is signing up|
||The requested language for message content|
||Indicates when the template has been triggered by an update to a user's email via the API. Equals
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 Allowed callback URLs in your application's Settings section of the Dashboard.
Use Lock (the Auth0 UI widget)
Lock with Passwordless Mode is a professional-looking dialog that allows users to log in after receiving a one-time password via email or text message.
Then you can trigger the passwordless authentication using a magic link with the following code:
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.
Use your own UI
Download a sample project specific to this tutorial configured with your Auth0 API Keys.
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
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
Check out the Auth0.js SDK reference documentation for more information.