Use Twilio for OTP via text instead of Klaviyo

[jex441]

Klaviyo requires a two step opt in process for a user to receive SMS. This is not ideal for One Time Passwords so we want to switch to Twilio to generate OTPs.

Currently when a user accesses their Membership page for the first time, an OTP is generated, applied to their Klaviyo profile and sent to the user for them to enter in VerifyPhone.js.

Set up our Twilio account to do this and replace the SMS verify logic in the codebase to work with Twilio instead of Klaviyo.

[jex441]

From ChatGPT just as a reference:

To send an OTP (One-Time Password) via text using Twilio, you need to perform the following steps:

Generate the OTP: You'll need to generate a unique OTP for each user who needs to receive one. There are many ways to do this, but the OTP should be a short, randomly generated string of numbers and/or letters.

Store the OTP: You'll need to store the generated OTP in a database or other storage system, along with the phone number of the user who will receive it.

Send the OTP via text: Use the Twilio API to send the OTP to the user's phone number via text message. Here's an example of how you could do this using Python and the Twilio library:

from twilio.rest import Client

# Your Twilio account SID and auth token
account_sid = 'your_account_sid'
auth_token = 'your_auth_token'

# The phone number you'd like to send the OTP from (must be a Twilio number)
from_number = '+14155552671'

# The phone number you'd like to send the OTP to
to_number = '+14155552672'

# The OTP to send
otp = '123456'

# Create a Twilio client
client = Client(account_sid, auth_token)

# Send the OTP via SMS
message = client.messages.create(
    to=to_number,
    from_=from_number,
    body='Your OTP is: ' + otp
)

print('OTP sent successfully!')

Verify the OTP: Once the user has received the OTP, they can enter it into your application or website to verify their identity. You'll need to compare the entered OTP to the one stored in your database to determine if it's correct. With these steps completed, you should have a basic system for sending and verifying OTPs via text using Twilio. You can customize and extend this system as needed to meet the specific requirements of your use case.

[jex441]

At Twillio's dashboard there is a step by step process to make user verification via sms. It will involve creating a webhook for Twillio which can go in /webhooks/twillio in our server.

[jex441]

This currently happens in the useEffect in VerifyPhone.js. When a user tries to visit Home.js and their phoneVerified value in the database is FALSE, they are redirected to VerifyPhone.js which makes an API call to /klaviyo to generate a code, add it to the database under phoneCode, update the Klaviyo profile to have the same code, and send an SMS to the user with that code. When they enter it in VerifyPhone.js and it matches the one in the database, phoneVerified is set to true.

The logic can be copied somewhat to work with Twillio instead.

[jex441]

@geenalux Hi Geena, are you available to test out my solution on your end? It is on branch 'twilio'. The logic in question is in VerifyPhone.js and server/twilio/index.js - especially the checkVerify function / route.

It should be self explanatory what the code is trying to achieve. It can be tested by creating an account with your phone number, clicking continue past email verify, receiving the code, entering the code sent to you correctly/incorrectly.

At the moment it does not re route to the user portal but it should when we go to production. As long as the response body from /twilio/index is approved if the code is correct and pending if the code is incorrect we are good. Please optimize where you see fit.

https://www.twilio.com/docs/verify/api/verification-check

[geenalux]

Looks good, the only thing I would change is to consider making the return statement in VerifyPhone.js a ternary instead of an if statement so you can avoid repeated code. But no big deal.

Also, more generally, it looks like your formatter isn't being applied - are you using Prettier in VSCode?