On this page

Migrating from Facebook Account Kit to Twilio Verify

Facebook announced that they are deprecating Account Kit and services will no longer be available starting in March 2020. Twilio Verify offers end to end functionality to quickly and easily replace your application's dependency on Account Kit for SMS login. This tutorial will cover implementing Twilio Verify in web applications.

Quick links

Check out a sample application on Glitch
Look at the finished code on my GitHub .
Compare before and after code: FB account kit vs Twilio Verify
Skip ahead to the tutorial

Why Twilio Verify?

With a similar workflow to Facebook's Account Kit, you can use your existing UI/UX with minimal code changes to integrate Verify. Verify offers:

global coverage
fast performance
high scale
token management

...all out of the box.

Like Account Kit, Verify manages sending and checking verification tokens for you so there are limited backend changes required to move to this API.

With 99.999% of API uptime, you can rely on Verify to automatically handle delivery using a robust global SMS and voice network covering 200+ countries. Verify email delivery channel is expected to be in Public Beta in November 2019 and GA in early 2020. Build WhatsApp channel separately with Twilio's WhatsApp API. WhatsApp support through Verify is not currently available; if this is something that would be useful to your company please let us know. Twilio Verify does not support instant verification but does support a voice channel.

Prerequisites to adding Twilio Verify to your application

To code along with this tutorial, you'll need:

A Twilio account
A Verify Service which you can create in the Twilio console . I named mine "Account Kit Migration Example"

Make note of your Service SID (starts with VA)

We don't want to store our API Keys directly in our front-end application, so we'll need a backend server that will talk to the Verify API. Account Kit handled some of this with their javascript SDK, we'll do this with Twilio Functions.

(information)

Info

Twilio Functions provide a serverless environment to build and run Twilio applications so you can get to production faster. Your first 10,000 invocations/month are free. Learn more about our runtime products to build, deploy, and operate apps at scale.

Head over to your Twilio Function configuration and:

Check the box to Enable ACCOUNT_SID and AUTH_TOKEN
Add VERIFY_SERVICE_SID as an environment variable ( create a service here if you haven't already )

Then create two Twilio Functions, one to start and one to check verifications. For each function:

Choose "Blank"
Replace the code with the code in the template file:
- Start template
- Check template
In properties, give your function a name and add a relevant path (start or check)

Make note of your function path, we'll need that soon.

Start with a basic HTML page like this or use your existing web application.

Import Bootstrap and jQuery by adding these lines in your <head> tag. These will be used for some basic styling and adding a modal so we can check the verification code. You can skip the Bootstrap CSS if you have your own styling.


_10<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
_10<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
_10<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Set up the UI input elements for your page in your <body> tag


_10<div class="container">
_10  <p>Enter your phone number to receive a verification code:</p>
_10  <form class="form-inline">
_10    <input value="+1" id="country_code" class="form-control"/>
_10    <input placeholder="phone number" id="phone_number" class="form-control"/>
_10    <input type="button" onclick="smsLoginTwilio();" class="btn btn-primary" value="Login via SMS" />
_10  </form>
_10</div>

Add a JavaScript function to send a verification code

Add the following code to your file. Replace the URL in the fetch call with the URL to your Twilio Function and a path of /start.


_44<script>
_44  var cc = null;
_44  var pn = null;
_44
_44  function flashStatus(alertType, message) \{
_44    var content = $(".result-message");
_44    content.empty();
_44    content.append(`<div class="alert alert-${alertType}" role="alert">${message}</div>`);
_44  \}
_44
_44  function smsLoginTwilio() \{
_44    var countryCode = $("#country_code").val().replace(/\W/g, ''); // strip special characters
_44    var phoneNumber = $("#phone_number").val().replace(/\W/g, ''); // strip special characters
_44
_44    // save for checking
_44    cc = countryCode;
_44    pn = phoneNumber;
_44
_44    // Twilio functions do not accept multipart/form-data
_44    const data = new URLSearchParams();
_44    data.append("country_code", countryCode);
_44    data.append("phone_number", phoneNumber);
_44
_44    // TODO REPLACE THIS
_44    fetch("your-twilio-function-start-verify-url/start", \{
_44        method: 'POST',
_44        body: data
_44      \})
_44      .then(response => \{
_44        return response.json()
_44      \})
_44      .then((json) => \{
_44        console.log(json);
_44        if (json.success) \{
_44          console.log("Successfully sent token.")
_44        \} else \{
_44          console.log("Error sending token.")
_44        \}
_44      \})
_44      .catch((err) => \{
_44        console.log(err);
_44      \});
_44  \}
_44</script>

Open up developer tools and open your file in the browser. Input your phone number in the phone number field and hit "Login via SMS". You should receive an SMS with a 6 digit code and see the following output in the console.

Check Verification Tokens with Twilio Verify

Add the following modal HTML in your body tag so we can verify the token sent to the user. In your implementation, this could also redirect to a new page.


_20<div class="modal" id="verification_modal">
_20  <div class="modal-dialog" role="document">
_20    <div class="modal-content">
_20      <div class="modal-body">
_20        <div class="row">
_20          <div class="col-lg-12">
_20            <div class="result-message">
_20            </div>
_20            <div class="input-group input-group-lg">
_20              <input type="text" class="form-control input-lg" id="verification_code" placeholder="Enter the token sent to your device">
_20              <span class="input-group-btn">
_20                <button onclick="smsVerifyTwilio();" class="btn btn-primary btn-lg" type="submit">Verify</button>
_20              </span>
_20            </div>
_20          </div>
_20        </div>
_20      </div>
_20    </div><!-- /.modal-content -->
_20  </div><!-- /.modal-dialog -->
_20</div><!-- /.modal -->

Then update your smsWithTwilio() function to open the modal if the json response indicates success:


_10if (json.success) {
_10  $(".modal").modal("show");
_10  console.log("Successfully sent token.");
_10}

Now if you click "Login with SMS" you should see the verification modal:

Finally, add a function to verify the token in your script tag. Replace the URL in the fetch call with the URL to your Twilio function and a path of /check.


_30function smsVerifyTwilio() {
_30  var code = $("#verification_code").val();
_30
_30  // Twilio functions do not accept multipart/form-data
_30  const data = new URLSearchParams();
_30  data.append("country_code", cc);
_30  data.append("phone_number", pn);
_30  data.append("verification_code", code);
_30
_30  // TODO REPLACE THIS
_30  fetch("your-twilio-function-start-verify-url/check", {
_30      method: 'POST',
_30      body: data
_30    })
_30    .then(response => response.json())
_30    .then((json) => {
_30      if (json.success) {
_30        flashStatus("success", "Success!");
_30        console.log("Successfully verified the token.");
_30      } else {
_30        flashStatus("danger", json.message);
_30        $("#verification_code").val("");
_30        console.log("Incorrect token.")
_30      }
_30    })
_30    .catch((err) => {
_30      var content = $(".result-message");
_30      console.log(err);
_30    });
_30}

Click 'Login with SMS' once more and now if you enter the token sent to your phone you'll see if it was correct!

Next Steps

With just two API calls and one web page, you've now validated that a user has a real phone number and access to that number, which will help prevent a lot of fraudulent accounts and ensure that your users can receive other text or voice notifications from your app.