Implement Passwordless Email in Regular Web Apps
With an email connection, the user is asked to enter their email address, to which Auth0 sends a one-time code. The user then enters the code into your application.
If the email address attached to the code matches an existing user, Auth0 authenticates the user:
If the user is new, their user profile is created for the
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 the callback 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 login using the
callbackURL option to specify the endpoint that will handle the server-side authentication:
This will open a dialog that asks the user for their email address:
Then Auth0 will send an email to the user containing the one-time code:
Lock will ask for the code that has been emailed to the provided address. The code can then be used as a one-time password to log in:
Once the user enters the code received by email, Lock will authenticate the user and redirect to the specified
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 a address to which the email 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 to the provided address. The user must now enter the code they received into your custom UI. Then you can continue with the login as follows (assuming the name of your form inputs as
If authentication is successful, the user will be redirected to the
redirectUri specified in the Auth0 constructor.
Check out the Auth0.js SDK reference documentation for more information.