SMS Magic Link with Twilio

In this guide, we'll learn how to set up SMS magic link authentication using Xano - a no-code platform for building backend services. Magic link authentication is a passwordless method where users log in by clicking a secure link sent to their email or phone number. We'll show you how to combine Xano's pre-built extensions to enable SMS magic link authentication for your web or mobile app.

What You'll Need

Before getting started, make sure you have the following:

1. A Xano account (sign up for free at xano.io)
2. The "Magic Link with SendGrid" extension installed from the Xano Marketplace
3. The "Twilio SMS" extension installed from the Xano Marketplace

> Note: This guide assumes you've already set up the Magic Link with SendGrid extension. If not, follow the instructions provided with that extension first.

Step 1: Add Phone Number Field to User Schema

Ensure your user database schema includes a field for storing phone numbers. You'll need this to send the magic link via SMS.

Step 2: Create SMS Magic Link API

In Xano, navigate to the API section and locate the "Magic Link" API group. This should contain two endpoints: one for requesting the magic link and another for completing the login process.

Option 1: Using Email as Input (Path of Least Resistance)

1. Open the "Get Magic Link" endpoint, which currently accepts the user's email address as input.
2. Add a new Custom Function called "Send SMS" using the Twilio Send SMS function from the Function Library.
3. Edit the SMS body to include the `%s` placeholder and the `sprintf` filter to substitute the magic link variable.
4. Add another Custom Function called "GetRecord" to fetch the user's record from the database using the provided email address.
5. In the Twilio Send SMS function, use the `.phone` field from the fetched user record to specify the recipient's phone number.

Now, when a user enters their email address, the magic link will be sent to their associated phone number via SMS.

Option 2: Using Phone Number as Input (No Email Required)

If you prefer not to use email addresses at all, you'll need to modify the `generateMagicLink` function:

1. In the `generateMagicLink` function, add a new `phone` input field and remove the `email` input field.
2. Update the precondition check to validate the `phone` input instead of `email`.
3. Modify the database query to find the user record based on the `phone` field instead of `email`.
4. Ensure the remaining function logic is updated to use the `phone` input where necessary.
5. In the API endpoint, remove the `email` input field and add a `phone` input field instead.
6. Map the `phone` input field to the modified `generateMagicLink` function.
7. Update the `GetRecord` function to fetch the user record using the `phone` field name and the `phone` input value.

With these changes, users will only need to provide their phone number to receive the magic link via SMS.

Step 3: Test and Deploy

Once you've made the necessary changes, test the API endpoint by providing a valid phone number (or email address, depending on your chosen option). If everything is set up correctly, you should receive the magic link via SMS on your registered phone number.

After successful testing, you can deploy your application and integrate the SMS magic link functionality into your user authentication flow.

Conclusion

Xano's no-code platform and pre-built extensions make it easy to implement advanced features like SMS magic link authentication without writing any code. By following this guide, you can provide a seamless, passwordless login experience for your users, whether you choose to use email addresses or phone numbers as the primary identifier.

Remember, Xano is not just for non-technical users – it can also help experienced developers prototype ideas quickly and offload repetitive tasks, saving valuable time and resources. Give it a try and see how Xano can streamline your development process!