Shopify Multipass SSO with OTP Authentication

A complete Node.js application that enables secure Single Sign-On (SSO) to Shopify stores using Multipass authentication with SMS OTP verification.

Features

• SMS OTP Authentication: Secure phone number verification using Fast2SMS
• Shopify Multipass Integration: Seamless SSO login to Shopify stores
• Customer Data Sync: Automatically populates customer information in Shopify
• Production Ready: Error handling, logging, and security best practices

Prerequisites

• Node.js (v14 or higher)
• Shopify store with Multipass enabled
• Fast2SMS account for SMS services
• Valid SSL certificate for production deployment

Installation

1. Clone the repository

   git clone https://github.com/your-username/shopify-multipass-otp-sso.git
   cd shopify-multipass-otp-sso

2. Install dependencies

   npm install

3. Configure environment variables

   cp .env.example .env

   Edit .env with your configuration (see Configuration section below).

4. Start the application

   # Development
   npm run dev
   
   # Production
   npm start

Configuration

Environment Variables

Copy .env.example to .env and configure the following:

# Shopify Configuration
MULTIPASS_SECRET=your_shopify_multipass_secret
SHOP_DOMAIN=your-store.myshopify.com

# SMS Service Configuration
FAST2SMS_API_KEY=your_fast2sms_api_key

# Server Configuration
PORT=3000
NODE_ENV=production

### Shopify Multipass Setup

1. **Enable Multipass in Shopify Admin**
   - Go to Settings → Customer accounts
   - Enable "Multipass login"
   - Copy the Multipass secret to your `.env` file

2. **Configure Customer Account Settings**
   - Set customer accounts to "Optional" or "Required"
   - Enable "Allow customers to create accounts"

### Fast2SMS Setup

1. **Create Fast2SMS Account**
   - Sign up at [Fast2SMS](https://www.fast2sms.com/)
   - Verify your account and add credits
   - Generate API key from dashboard

2. **Configure SMS Template**
   - Create SMS template for OTP
   - Note the template ID if using custom templates

## Implementation Flow

### 1. User Authentication Flow

```mermaid
graph TD
    A[User visits login page] --> B[Enter email, name, mobile]
    B --> C[Click 'Send OTP']
    C --> D[Server generates OTP]
    D --> E[SMS sent via Fast2SMS]
    E --> F[User receives OTP]
    F --> G[User enters OTP]
    G --> H[Server verifies OTP]
    H --> I{OTP Valid?}
    I -->|Yes| J[Generate Multipass token]
    I -->|No| K[Show error, retry]
    J --> L[Redirect to Shopify]
    L --> M[User logged in to Shopify]
    K --> G

2. API Endpoints

GET /

• Serves the login UI
• No authentication required

GET /send-otp?mobile={phone}

• Generates and sends OTP to mobile number
• Stores OTP temporarily in memory/database
• Returns success/failure status

GET /verify-otp?mobile={phone}&otp={code}

• Verifies the provided OTP
• Returns success/failure status
• Clears OTP from storage on success

GET /sso/shopify?email={email}&firstname={name}&lastname={name}&mobile={phone}

• Generates Shopify Multipass token
• Creates customer payload with provided details
• Redirects to Shopify store with authentication

3. Integration Steps

For Your Website/Application:

1. Redirect users to OTP page

   window.location.href = 'https://your-sso-server.com/';

2. Handle return from Shopify (optional)

   // Add return_to parameter for post-login redirect
   const returnUrl = encodeURIComponent('https://yoursite.com/welcome');
   window.location.href = `https://your-sso-server.com/?return_to=${returnUrl}`;

For Direct Integration:

1. Embed the authentication form

   <iframe src="https://your-sso-server.com/" width="400" height="600"></iframe>

2. Use API endpoints directly

   // Send OTP
   fetch('/send-otp?mobile=1234567890')
   
   // Verify OTP
   fetch('/verify-otp?mobile=1234567890&otp=123456')
   
   // SSO Login
   window.location.href = '/sso/shopify?email=user@example.com&firstname=John&lastname=Doe&mobile=1234567890';

Customization

SMS Templates

Edit fast2sms.js to customize SMS content:

const message = `Your ${BRAND_NAME} verification code is ${otp}. Valid for 5 minutes.`;

UI Customization

Modify public/index.html and CSS for branding:

:root {
  --primary-color: #your-brand-color;
  --secondary-color: #your-secondary-color;
}

Customer Data Fields

Add additional customer fields in server endpoints:

const customer = {
  email,
  first_name: firstname,
  last_name: lastname,
  phone: mobile,
  // Add custom fields
  tags: 'sso-user',
  note: 'Registered via SSO',
  accepts_marketing: true
};

Troubleshooting

Common Issues

1. "Invalid Authentication" Error

   • Check Fast2SMS API key validity
   • Verify account balance
   • Ensure API key has SMS permissions

2. Multipass Token Invalid

   • Verify Multipass secret in Shopify admin
   • Check customer data format
   • Ensure SHOP_DOMAIN is correct

Debug Mode

Enable debug logging:

DEBUG=true
LOG_LEVEL=debug

API Documentation

Request/Response Examples

Send OTP

GET /send-otp?mobile=1234567890

{
  "success": true,
  "result": {
    "message": "OTP 123456 sent to 1234567890"
  }
}

Verify OTP

GET /verify-otp?mobile=1234567890&otp=123456

{
  "success": true
}

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Documentation: Check this README and code comments
• Issues: Report bugs via GitHub issues
• Community: Join our Discord/Slack for discussions

Made with ❤️ for the Shopify community

This project aims to simplify Shopify SSO implementation with secure OTP authentication. Star ⭐ this repo if it helps you!