Skip to main content

Add Phone Verification to Your App

Add carrier-grade phone authentication in 5 minutes. No SMS, no OTPs, no fraud.

Prerequisites​

Before you start:

  • Node.js 18+ installed
  • Chrome 119+ (or modern browser with Digital Credentials support)
  • Glide Client Credentials (Client ID & Client Secret) - Request access

Step 1: Install SDKs​

Install both the frontend and backend packages:

npm install @glideidentity/glide-fe-sdk-web @glideidentity/glide-be-sdk-node

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

Step 2: Backend Setup​

Create a .env file with your client credentials:

.env
GLIDE_CLIENT_ID=your_client_id_here
GLIDE_CLIENT_SECRET=your_client_secret_here

Create two API endpoints on your server:

server.js
import express from 'express';
import { GlideClient } from '@glideidentity/glide-be-sdk-node';

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

const glide = new GlideClient({
  clientId: process.env.GLIDE_CLIENT_ID,
  clientSecret: process.env.GLIDE_CLIENT_SECRET
});

// POST /api/phone-auth/prepare
// Initiates the authentication session
app.post('/api/phone-auth/prepare', async (req, res) => {
  try {
    const response = await glide.magicalAuth.prepare(req.body);
    res.json(response);
  } catch (error) {
    res.status(error.status || 500).json({
      code: error.code,
      message: error.message
    });
  }
});

// POST /api/phone-auth/report-invocation
// Called automatically by frontend SDK after prompt shown
app.post('/api/phone-auth/report-invocation', async (req, res) => {
  try {
    const result = await glide.magicalAuth.reportInvocation(req.body);
    res.json(result);
  } catch (error) {
    console.error('Report invocation failed:', error.message);
    res.json({ received: true }); // Don't expose error to frontend
  }
});

// POST /api/phone-auth/process  
// Processes the credential and returns verification result
app.post('/api/phone-auth/process', async (req, res) => {
  const { credential, session, use_case } = req.body;
  
  try {
    let result;
    if (use_case === 'GetPhoneNumber') {
      result = await glide.magicalAuth.getPhoneNumber({ session, credential });
    } else {
      result = await glide.magicalAuth.verifyPhoneNumber({ session, credential });
    }
    
    // Check anti-fraud signals
    if (result.sim_swap?.checked) {
      console.log('SIM swap risk:', result.sim_swap.risk_level, result.sim_swap.age_band);
    }
    if (result.device_swap?.checked) {
      console.log('Device swap risk:', result.device_swap.risk_level, result.device_swap.age_band);
    }
    
    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 and add authentication to your page:

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Phone Verification</title>
  <script src="https://unpkg.com/@glideidentity/glide-fe-sdk-web/dist/browser/web-client-sdk.min.js"></script>
</head>
<body>
  <h2>Verify Your Phone</h2>
  <input type="tel" id="phone" placeholder="+1 555 123 4567" />
  <button onclick="verifyPhone()">Verify Phone Number</button>
  <div id="result"></div>

  <script>
    const { PhoneAuthClient, USE_CASE } = GlideWebClientSDK;
    
    // Initialize the client with your backend endpoints
    const client = new PhoneAuthClient({
      endpoints: {
        prepare: '/api/phone-auth/prepare',
        reportInvocation: '/api/phone-auth/report-invocation',
        process: '/api/phone-auth/process'
      }
    });

    async function verifyPhone() {
      const phone = document.getElementById('phone').value;
      
      try {
        const result = await client.authenticate({
          use_case: USE_CASE.VERIFY_PHONE_NUMBER,
          phone_number: phone
        });
        
        document.getElementById('result').innerHTML = result.verified 
          ? '✅ Phone verified!' 
          : '❌ Verification failed';
      } catch (error) {
        document.getElementById('result').innerHTML = '❌ ' + error.message;
      }
    }
  </script>
</body>
</html>

That's It!​

Run your server and open index.html in your browser:

node server.js

Checkpoint: You should now have working phone verification. When users click "Verify", they'll see a carrier authorization prompt and get instant verification.

Anti-Fraud Signals

The verification response includes sim_swap and device_swap signals for fraud prevention. Each provides risk_level (e.g., RISK_LEVEL_LOW), age_band, carrier_name, and checked_at. See Architecture for details.

Full Example Repositories​

StackRepository
Vanilla JS + Node.jsmagical-auth-quickstart-vanilla
React + Node.jsglide-magic-auth-quickstart-react
Nuxt 3glide-magic-auth-quickstart-nuxt

Next Steps​

Need Help?​