How can I integrate Twilio’s API with Shopify to enable customer login via WhatsApp OTP?

How can I integrate Twilio’s API with Shopify to enable customer login via WhatsApp OTP?

Fatina
Shopify Partner
7 0 1

I'm trying to build a custom login on my Shopify store using Twilio’s API to send OTPs via WhatsApp. The goal is for customers to log in using their phone number and receive a verification code on WhatsApp to complete the login process.

Has anyone implemented this before?
I'm looking for any of the following:

  • Guidance on the best way to approach this

  • Example code for handling WhatsApp OTP verification and Shopify login

  • Best practices for managing sessions and authentication

  • Any existing apps that might help streamline or support this process

Any help or direction would be greatly appreciated!

Fatina
Reply 1 (1)

Dotsquares
Shopify Partner
443 28 59

Hi @Fatina,

 

Solution Approach: Custom WhatsApp OTP Login on Shopify with Twilio

 

Objective:
Enable customers to log in using their phone number and verify via OTP sent on WhatsApp using Twilio's API, bypassing the default Shopify email/password system.

 

1. Understanding Shopify's Limitations
Shopify does not natively support custom authentication flows (like phone-based logins). However, it allows some workarounds via:

Custom storefronts using Shopify Storefront API
Headless Shopify architecture
Customer accounts API (Multipass or customer create/login endpoints)

 

2. High-Level Architecture

Workflow:
User visits your custom login page.
Enters phone number.
Backend triggers Twilio API to send OTP via WhatsApp.
User enters OTP to verify.

On successful verification:
Log the user in using Shopify Customer API (if already registered).
Or redirect to registration/onboarding if new.

 

4. Implementation Guidance

Step 1: Capture Phone Number (Frontend)
Create a custom login page:

html Code:
<input type="text" placeholder="Enter phone number" id="phone" />
<button onclick="sendOTP()">Send OTP</button>

 

Step 2: Send OTP via Twilio WhatsApp (Backend)
javascript Code:
const twilio = require('twilio');
const client = new twilio(accountSid, authToken);

await client.messages.create({
body: 'Your login code is 123456',
from: 'whatsapp:+14155238886',
to: `whatsapp:+91XXXXXXXXXX`,
});

 

Step 3: Verify OTP (Backend)
Maintain OTPs in Redis/DB with expiration. Match user input with stored OTP.

 

Step 4: Log In or Create Shopify Customer
Use Shopify Admin API:

graphql Code:

mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
customerAccessTokenCreate(input: $input) {
customerAccessToken {
accessToken
expiresAt
}
userErrors {
field
message
}
}
}

 

Step 5: Set Session / Cookie
Use secure, HttpOnly cookies or JWT to maintain the session.

 

Hope this will help, Let me know if you need more guidance.

 

Regards,

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio