Quickstart: Magical Auth in 5 Minutes

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

Prerequisites

Node.js 18+

Installed on your machine

Modern Browser

Chrome 119+ recommended

API CredentialsRequest access

Step-by-Step Integration

Step 1: Install SDKs

Install both frontend and backend packages

The frontend SDK handles browser interactions, while the backend SDK communicates with Glide's API.

npm install glide-web-client-sdk glide-sdk

# or with yarn
yarn add glide-web-client-sdk glide-sdk

Step 2: Backend Setup

Create two API endpoints

Your server needs two endpoints for the authentication flow.

/api/phone-auth/prepare - Initiates the session
/api/phone-auth/process - Verifies the result

server.js
const express = require('express');
const { GlideClient, UseCase } = require('glide-sdk');

const app = express();
app.use(express.json());

const glide = new GlideClient({
  apiKey: process.env.GLIDE_API_KEY
});

// Prepare endpoint - initiates auth
app.post('/api/phone-auth/prepare', async (req, res) => {
  try {
    const response = await glide.magicAuth.prepare(req.body);
    res.json(response);
  } catch (error) {
    res.status(error.status || 500).json({
      code: error.code,
      message: error.message
    });
  }
});

// Process endpoint - handles verification
app.post('/api/phone-auth/process', async (req, res) => {
  const { credential, session, use_case } = req.body;
  
  try {
    let result;
    if (use_case === UseCase.GET_PHONE_NUMBER) {
      result = await glide.magicAuth.getPhoneNumber({
        session,
        credential
      });
    } else {
      result = await glide.magicAuth.verifyPhoneNumber({
        session,
        credential
      });
    }
    res.json(result);
  } catch (error) {
    res.status(error.status || 500).json({
      code: error.code,
      message: error.message
    });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Step 3: Frontend Integration

Initialize the client

Set up the PhoneAuthClient with your backend endpoints. The SDK handles browser prompts and carrier communication automatically.

✨ Auto-detection: The SDK automatically detects the best verification method for the current device and carrier.

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Magical Auth Demo</title>
  <!-- Load the SDK from CDN -->
  <script src="https://unpkg.com/glide-web-client-sdk@latest/dist/browser/web-client-sdk.min.js"></script>
</head>
<body>
  <div id="app">
    <h2>Phone Verification</h2>
    <input type="tel" id="phoneInput" placeholder="+1 555 123 4567" />
    <button onclick="verifyPhone()">Verify Phone Number</button>
    <button onclick="getPhone()">Get My Phone Number</button>
    <div id="result"></div>
  </div>

  <script>
    // Initialize the client
    const client = new GlideWebClientSDK.PhoneAuthClient({
  endpoints: {
    prepare: '/api/phone-auth/prepare',
    process: '/api/phone-auth/process'
  },
      debug: true
    });

    // Verify a specific phone number
    async function verifyPhone() {
      const phoneNumber = document.getElementById('phoneInput').value;
      
      try {
        const result = await client.verifyPhoneNumberComplete(
          phoneNumber,
          {
      consent_data: {
        consent_text: 'I agree to verify my phone number',
        policy_link: 'https://example.com/privacy',
        policy_text: 'Privacy Policy'
      }
          }
        );
        
        document.getElementById('result').innerHTML = result.verified 
          ? '✅ Phone verified!' 
          : '❌ Phone number does not match';
  } catch (error) {
    console.error('Verification failed:', error);
        document.getElementById('result').innerHTML = 
          '❌ Error: ' + error.message;
  }
}

// Get phone number from device
    async function getPhone() {
  try {
    const result = await client.getPhoneNumberComplete({
      plmn: { mcc: '310', mnc: '260' }, // T-Mobile USA
      consent_data: {
            consent_text: 'I agree to share my phone number',
        policy_link: 'https://example.com/privacy',
        policy_text: 'Privacy Policy'
      }
    });
        
        document.getElementById('result').innerHTML = 
          '📱 Your phone: ' + result.phone_number;
  } catch (error) {
        console.error('Failed to get phone:', error);
        document.getElementById('result').innerHTML = 
          '❌ Error: ' + error.message;
      }
    }
  </script>
</body>
</html>