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 API Key - Request access

Step 1: Install SDKs​

Install both the frontend and backend packages:

npm install @glideidentity/web-client-sdk @glideidentity/glide-sdk

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 API key:

.env
GLIDE_API_KEY=your_api_key_here

Create two API endpoints on your server:

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

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

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

// POST /api/phone-auth/prepare
// Initiates the authentication session
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
    });
  }
});

// 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.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 and add authentication to your page:

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Phone Verification</title>
  <script src="https://unpkg.com/@glideidentity/web-client-sdk/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',
        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.

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?​