🚀 Magical Auth Quick Start - Vanilla JavaScript

Experience carrier-grade phone authentication in 2 minutes. No SMS, no delays, no fraud - just instant verification through SIM cards.

💨 Start in 30 Seconds

# Clone and install
npm install

# Copy environment file and add your API key
cp env.example .env
# Then edit .env and replace 'your_api_key_here' with your actual API key

# Run it!
npm start

That's it! Open http://localhost:3000 and try it out 🎉

🎮 What You Can Do

Two Modes to Play With

⚡ High Level Mode (Default)

• One-click authentication
• SDK handles everything
• Perfect for production apps

🔧 Granular Mode

• See each step happening
• Great for understanding the flow
• Debug-friendly with full logging

Two Use Cases to Try

1. 📲 Get Phone Number - Retrieves the phone number from your SIM card
2. ✓ Verify Phone Number - Confirms you own a specific phone number

🏗️ What's Inside

magical-auth-quickstart-vanilla/
├── public/
│   ├── index.html         # Main HTML page
│   ├── app.js            # Vanilla JS app (both modes)
│   └── styles.css        # Styling
├── server.js             # Express backend + static file serving
└── package.json          # Dependencies (both SDKs)

Key Difference: Single Express server serves both the frontend AND backend API. No build step needed!

🔧 Want Your Own API Key?

The quickstart works out-of-the-box with our demo server. To use your own credentials:

1. Get your API key from Glide Dashboard
2. Create .env file:

GLIDE_API_KEY=your_api_key_here

3. Restart the server - it'll use your key automatically!

👀 See What's Happening

Enable Debug Mode

1. Toggle "Debug Mode" at the bottom of the page
2. Open browser console (F12)
3. Watch the magic:

[PhoneAuth] PrepareResponse received: {...}
[Granular] Step 2: About to invoke secure prompt
[PhoneAuth] Credential obtained from browser
[Granular] Step 3: Final response: {phone_number: "+1234567890"}

Understanding the Flow

Step 1: Prepare → Your server talks to Glide

Step 2: Browser Prompt → Secure carrier verification

Step 3: Process → Get the verified result

🎨 Quick Customizations

Change Carrier (for Get Phone Number)

// In public/app.js (around line 211 and 274)
plmn: { mcc: '310', mnc: '260' }  // T-Mobile (default)
plmn: { mcc: '310', mnc: '004' }  // Verizon

Customize Consent Text

// In public/app.js
consent_data: {
  consent_text: 'Your custom message',
  policy_link: 'https://yoursite.com/privacy',
  policy_text: 'Your Policy'
}

Change Server Port

# Default is 3000
PORT=3000 npm start

📱 Browser Requirements

Works on:

• Chrome/Edge 128+ on Android ✅
• Chrome/Edge Desktop (with phone nearby) ✅
• Safari (coming soon) 🔜

🤖 NEW: MCP Server for AI Assistants

This project now includes a Model Context Protocol (MCP) server that lets AI assistants request user approval via phone authentication!

Quick Start

# Terminal 1: Start the server
npm start

# Terminal 2: Run the test
npm run test-mcp

# Then scan the QR code with your phone!

What It Does

• 🤖 AI assistants can request user approval for actions
• 📱 User approves via phone authentication (QR code)
• 🔐 Returns signed JWT token with verified phone number
• ✨ Perfect for financial transactions, data access, account changes

Security

• ✅ Server-side verification: Phone authentication is verified server-side to prevent unauthorized approvals
• ✅ Request expiration: Approval requests expire after 5 minutes
• ✅ Signed tokens: All approved requests return cryptographically signed JWT tokens

Documentation

• Quick Start: See MCP-QUICK-START.md
• Full Guide: See MCP-README.md
• Ngrok Setup: See NGROK-SETUP.md (for public QR codes)
• Integration: Works with Claude Desktop and other MCP clients

Example Use Case

AI wants to transfer $100 → Creates approval request → User scans QR → Authenticates with phone → Approves → AI receives signed token

🚀 What's Next?

Now that you've seen it work:

1. Try both modes - Toggle between High Level and Granular
2. Check the console - See all the API calls
3. Look at the code - Pure vanilla JavaScript in public/app.js
4. Try the MCP server - Run npm run test-mcp to test approval flow
5. Integrate into your app - Copy the patterns you need

📚 Resources

• SDK Documentation - Full SDK reference and API docs

📦 SDK Loading Options

The quickstart supports multiple ways to load the SDK:

Default: NPM Package (Recommended)

// Already configured - SDK served from node_modules
<script src="/sdk/web-client-sdk.min.js"></script>

Alternative: CDN

<!-- unpkg (auto-syncs with npm) -->
<script src="https://unpkg.com/[email protected]/dist/browser/web-client-sdk.min.js"></script>

<!-- jsDelivr (auto-syncs with npm) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/web-client-sdk.min.js"></script>

🌟 Why Vanilla JavaScript?

• No build step - Just npm install and run
• No framework overhead - Pure JavaScript
• Easy to understand - Simple file structure
• Easy to integrate - Copy patterns into any project
• Both SDKs from npm - Production-ready setup

💬 Need Help?

• Email: [email protected]

Built with ❤️ by Glide Identity | Making authentication magical ✨