Live Build: OTP SMS Authentication with Twilio | Customer Corner

Hey there! In this guide, we'll walk through how to build a one-time password (OTP) system using Xano, a no-code platform for creating backend services, and Twilio, a cloud communications platform. This will allow your users to securely log in to your web or mobile application by receiving a temporary code via SMS.

Setting up Twilio

Before we dive into Xano, let's quickly set up our Twilio account. You'll need to sign up for a free Twilio account if you haven't already. Once you're logged in, you'll need to grab a few key pieces of information:

1. Twilio Phone Number: You'll need a Twilio phone number to send SMS messages from. You can get one by navigating to the "Phone Numbers" section in your Twilio console.
2. Account SID: This is a unique identifier for your Twilio account. You can find it in your Twilio console dashboard.
3. Auth Token: This is like a password for your Twilio account. You'll need it to authenticate your API requests. You can find it in the same place as your Account SID.

Make a note of these values, as we'll need to add them to our Xano project later.

Setting up Xano

Now, let's jump into Xano. If you're new to Xano, you'll need to create a free account first. Once you're logged in, follow these steps:

1. Create a New Instance: From the Xano dashboard, click "Add Instance" to create a new project.
2. Add the OTP Snippet: In your new instance, navigate to the "Snippets" section and search for the "One-Time Password SMS with Twilio" snippet. Click "Add" to install this pre-built code into your project.
3. Configure Environment Variables: Head over to the "Environment Variables" section and add the Twilio credentials you gathered earlier (Phone Number, Account SID, and Auth Token).

Great! With the pre-built snippet installed and our Twilio credentials configured, we're ready to start customizing our OTP system.

Customizing the OTP System

The "One-Time Password SMS with Twilio" snippet provides us with a solid foundation, including:

• Three API endpoints
• A "users" database table
• Helper functions for generating and verifying OTP codes
• Environment variables for Twilio integration

Let's walk through the key components and make some adjustments:

1. Generating the OTP Code

When a user requests a one-time password, we'll generate a random 6-digit code and send it via SMS. The `codeGenerator` function in our snippet handles this:

This function generates a random number between 100000 and 999999, giving us a 6-digit code. If you'd prefer a different code length, simply adjust the minimum and maximum values.

2. Sending the OTP Code via SMS

The `getOtpCodeSms` API endpoint is responsible for sending the OTP code to the user's phone number. Here's a breakdown of what it does:

1. Generates a new OTP code using the `codeGenerator` function.
2. Looks up the user in the database based on the provided phone number.
3. Stores the OTP code, expiration time, and a "used" flag in the user's record.
4. Sends an SMS to the user's phone number with the OTP code using Twilio's API.

You can customize the SMS message by modifying the `message` variable in this endpoint.

3. Verifying the OTP Code

When the user enters the received OTP code, the `authOtpCodeSms` endpoint verifies its validity:

1. Checks if the provided code matches the code stored in the user's record.
2. Ensures the code hasn't expired (based on the expiration time stored in the database).
3. Confirms the code hasn't been used before.

If all checks pass, the endpoint generates an authentication token for the user, allowing them to securely access your application.

4. Adjusting Expiration Time

By default, the OTP codes generated in our system expire after one hour. If you'd like to change this expiration time, locate the `expirationOfCode` variable in the `getOtpCodeSms` endpoint and adjust the `transformTimestamp` function call.

For example, to set the expiration time to 30 minutes, you'd change:

to:

Testing and Deployment

With our customizations in place, it's time to test our OTP system. In Xano, you can use the built-in API testing tools to simulate API requests and verify the expected behavior.

Once you're satisfied with the functionality, you can deploy your Xano instance to a production environment with just a few clicks. Xano automatically generates the necessary backend infrastructure, so you can focus on building great user experiences.

Conclusion

In this guide, we've covered how to build a secure one-time password (OTP) system using Xano and Twilio. By leveraging Xano's no-code capabilities and pre-built snippets, we were able to quickly set up and customize an OTP flow for our web or mobile application.

Whether you're a no-code enthusiast, citizen developer, traditional developer, or part of a startup or small business, Xano empowers you to create robust backend services without writing a single line of code. Give it a try and see how it can streamline your development process!