Adding 2FA to your Xano Backend - Twilio Verify API

In this guide, we'll walk through the steps to implement two-factor authentication (2FA) in your applications using Xano as the backend and the Twilio Verify API. By the end, you'll be able to set up your own 2FA system and enhance the security of your applications.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (sign up for free if you haven't already)
2. A Twilio account (you may need to upgrade your account to access the Verify API)
3. Your Twilio Account SID and Auth Token (available in your Twilio console)

Step 1: Set Up Environment Variables

To avoid manually typing or copying your Twilio Account SID and Auth Token for each API call, we'll store them as environment variables in Xano:

1. In your Xano workspace, go to Settings > Manage Environment Variables.
2. Click the Add Environment Variable button.
3. Create two environment variables: one for your Twilio Account SID and another for your Twilio Auth Token.
4. Click Save to store the environment variables.

Step 2: Create a Verification Service

The first step in the Twilio Verify API is to create a verification service. This sets up the authentication process in Twilio and records parameters like the service name and code settings.

1. In your Xano workspace, create a new function stack or use an existing one.
2. Add an External API Request node and click the Import cURL button.
3. In the Twilio documentation, copy the cURL command for creating a verification service and paste it into the Import cURL dialog.
4. Click Import to populate the API request details.
5. Replace the Twilio_Account_SID and Twilio_Auth_Token placeholders with the corresponding environment variables using the sprintf filter:

%s:%s

Then, add the sprintf filter with your Account SID and Auth Token as arguments, followed by the base64_encode filter.

6. Run the function stack to create the verification service.
7. Copy the returned service SID, as you'll need it for the next steps.

Step 3: Send a Verification Token

Next, we'll create an API endpoint to send a verification token to the user's phone number.

1. Add a new External API Request node and click Import cURL.
2. Copy the cURL command from the Twilio documentation for sending a verification token and paste it into the dialog.
3. Replace the Services/{Service_SID_or_uniq_name} part of the URL with the service SID you copied in the previous step.
4. In the Parameters section, replace the phone number value with the user's phone number from your data. You may need to format the phone number using filters like replace and regex_quotes to match Twilio's requirements.
5. Update the headers with your Account SID and Auth Token using the sprintf and base64_encode filters, as in the previous step.
6. Run the function stack to send the verification token to the user's phone.

Step 4: Check the Verification Token

The final step is to create an API endpoint to check if the user-provided verification token is valid.

1. Add a new External API Request node and click Import cURL.
2. Copy the cURL command from the Twilio documentation for checking a verification token and paste it into the dialog.
3. Replace the Services/{Service_SID_or_uniq_name} part of the URL with your service SID.
4. In the Parameters section, add the user's phone number (formatted as in the previous step) and the verification token provided by the user (e.g., from an input field in your frontend).
5. Update the headers with your Account SID and Auth Token using the sprintf and base64_encode filters.
6. Run the function stack with the user-provided verification token.
7. Check the response to see if the status is "approved" or "pending".

Conclusion

You've now implemented two-factor authentication in your Xano backend using the Twilio Verify API. When a user tries to log in or perform a sensitive action, you can send a verification token to their phone and require them to enter it before proceeding.

Remember, this guide focused on the backend implementation using Xano. You'll still need to integrate the authentication flow into your frontend application, handling user input and displaying appropriate messages based on the API responses.

If you have any questions or need further assistance, feel free to reach out to the Xano community or support team.