Authenticate users with a Magic Link via e-mail on SPA

Instead of sending the user a one time code, you can configure Auth0 to send a magic link:

Auth0 will send an email containing a clickable button or link:

After clicking the button, the user will be automatically signed-in to your application:

Setup

1. Optional: Configure an email provider

By default, Auth0 sends the email from its own messaging provider. Optionally, you can configure your own email provider to better monitor and troubleshoot the email service.

2. Configure the connection

In the Dashboard, on the Email page, under Connections > Passwordless, you can configure the contents and behavior of the email.

Multi-Language Support

The Message area supports usage of multiple languages.

By making a call to the /passwordless/start authentication endpoint, you can set the value of an 'x-request-language' header to the language of your choice. If the value of this header is not set, the language will be extracted from the value in the 'accept-language' header that 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:

{% if request_language contains 'dutch' %}
   Hier is uw verificatie code: {{ code }}
{% endif %}

{% if request_language contains 'fr-FR' %}
   Ceci est votre code: {{ code }}
{% endif %}

The following parameters are available when defining the template:

Exposed Parameter Description
code the password to use
link the magic link
application.name the name of the application name where the user is signing up
request_language the requested language for the message content
operation equals change_email when the template is triggered by an update to a user's email via the API, otherwise null

4. Configure Callback URL

For security purposes, you must to add your page's URL to the list of Allowed callback URLs in your app's Settings Section of the Dashboard.

Implementation

Use Lock (the Auth0 UI widget)

Auth0 Lock Passwordless 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 Passwordless, you must initialize it with your Client Id and domain. You can find this information on your application settings page.

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

<script src="https://cdn.auth0.com/js/lock-passwordless-2.2.min.js"></script>
<script type="text/javascript">
  function login(){
    // Initialize Passwordless Lock instance
    var lock = new Auth0LockPasswordless('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');
    // Open the lock in Email Magic Link mode
    lock.magiclink();
  }
</script>
<a href="javascript:login()">Login</a>

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 with the token as the hash location. You can parse the hash and retrieve the full user profile as follows:

//parse hash on page load
$(document).ready(function(){
  var hash = lock.parseHash(window.location.hash);

  if (hash && hash.error) {
    alert('There was an error: ' + hash.error + '\n' + hash.error_description);
  } else if (hash && hash.id_token) {
    //use id_token for retrieving profile.
    localStorage.setItem('id_token', hash.id_token);
    //retrieve profile
    lock.getProfile(hash.id_token, function (err, profile) {
      if (err){
        //handle err
      } else {
        //use user profile
      }
    });
  }
});

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

Use your own UI

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

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:

<script src="https://cdn.auth0.com/js/auth0/8.9/auth0.min.js"></script>
<script type="text/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       'YOUR_AUTH0_DOMAIN',
    clientID:     'YOUR_CLIENT_ID',
    redirectUri: 'https://YOUR_APP/callback'
  });
</script>

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):

function sendEmail(){
  var email = $('input.email').val();

  webAuth.passwordlessStart({
    connection: 'email',
    send: 'link',
    email: email
  }, function (err,res) {
    if (err) {
      // Handle error
    }
    // Hide the input and show a "Check your email for your login link!" screen
    $('.enter-email').hide();
    $('.check-email').show();
  });
}

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:

//parse hash on page load
$(document).ready(function(){
  webAuth.parseHash(window.location.hash, function(err, authResult) {
    if (err) {
      return console.log(err);
    }

    webAuth.client.userInfo(authResult.accessToken, function(err, user) {
      // Now you have the user's information
    });
  });
});

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