Twilio Voice SDK - Implementing a mechanism to make calls to external phone numbers while concealing the number from the frontend

			
			exports.handler = function(context, event, callback) {
  const res = new Twilio.Response();
  res.appendHeader('Content-Type', 'application/json');
  res.appendHeader('Access-Control-Allow-Origin', '*');
  res.appendHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.appendHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (event.httpMethod === 'OPTIONS') {
    res.setStatusCode(200); res.setBody(''); return callback(null, res);
  }

  const AccessToken = Twilio.jwt.AccessToken;
  const VoiceGrant = AccessToken.VoiceGrant;

  const identity = 'user001';
  const token = new AccessToken(context.ACCOUNT_SID, context.API_KEY_SID, context.API_KEY_SECRET, { identity });
  token.addGrant(new VoiceGrant({ outgoingApplicationSid: context.TWIML_APP_SID, incomingAllow: true }));

  res.setBody({ identity, token: token.toJwt() });
  callback(null, res);
};

		

			
			const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/customers', (_req, res) => {
  const customers = [
    { id: 'c1', name: 'Takumi Koshii', company: 'Classmethod', phoneNumber: '+819012345678' },
    { id: 'c2', name: 'Hanako Sato', company: 'XYZ Corporation', phoneNumber: '+819087654321' },
    { id: 'c3', name: 'Jiro Yamada', company: 'Sample Store', phoneNumber: '+819011111111' },
  ];
  res.json({ customers, count: customers.length });
});

app.listen(3000, () => {
  console.log('http://localhost:3000');
});

		

			
			twilio-voice-poc/
├── server.js
├── public/
│   ├── index.html
│   ├── app.js
│   └── twilio.min.js  ← File downloaded from GitHub

		

			
			const Device = Twilio.Device;
const FUNCTIONS_BASE_URL = 'https://voice-poc-service-xxxx.twil.io';  // Specify Twilio Function URL

let device;
let activeCall = null;
let selectedCustomer = null;

async function initializeTwilio() {
  // Microphone permission
  await navigator.mediaDevices.getUserMedia({ audio: true, video: false });

  // Get token
  const { token } = await (await fetch(`${FUNCTIONS_BASE_URL}/token`)).json();

  // Create Device → register
  device = new Device(token);
  await device.register();

  // Switch UI
  document.getElementById('initSection').style.display = 'none';
  document.getElementById('callSection').style.display = 'block';

  // Manage all subsequent call events through device
  device.on('connect', (call) => {
    activeCall = call;
    document.getElementById('callStatus').textContent = 'In call...';
    document.getElementById('callButton').disabled = true;
    document.getElementById('hangupButton').disabled = false;

    call.on('disconnect', () => {
      activeCall = null;
      document.getElementById('callStatus').textContent = 'Call ended';
      document.getElementById('callButton').disabled = false;
      document.getElementById('hangupButton').disabled = true;
    });
  });

  device.on('tokenWillExpire', async () => {
    const { token } = await (await fetch(`${FUNCTIONS_BASE_URL}/token`)).json();
    await device.updateToken(token);
  });
}

// Load & display customer list (phone number not displayed in UI)
async function loadCustomers() {
  const { customers } = await (await fetch('/customers')).json();
  const list = document.getElementById('customerList');
  list.innerHTML = customers.map(c => `
    <div class="customer-item" data-customer='${JSON.stringify(c)}'>
      <strong>${c.name}</strong><br><small>${c.company}</small>
    </div>`).join('');
  [...document.querySelectorAll('.customer-item')].forEach(el => {
    el.addEventListener('click', () => {
      [...document.querySelectorAll('.customer-item')].forEach(i => i.classList.remove('selected'));
      el.classList.add('selected');
      selectedCustomer = JSON.parse(el.dataset.customer);
      document.getElementById('callButton').disabled = false;
      document.getElementById('selectedCustomer').textContent =
        `Selected: ${selectedCustomer.name} (${selectedCustomer.company})`;
    });
  });
}

// Initialize button
document.getElementById('initButton').addEventListener('click', async () => {
  await initializeTwilio();
  await loadCustomers();
});

// Make call
document.getElementById('callButton').addEventListener('click', () => {
  if (!selectedCustomer) return;
  document.getElementById('callStatus').textContent = 'Calling...';
  device.connect({ params: { To: selectedCustomer.phoneNumber } }); // ✅
});

// Hang up
document.getElementById('hangupButton').addEventListener('click', () => {
  activeCall?.disconnect();
});
```## Operation verification

### Confirm Twilio Functions Deployment

Confirm that both Functions have been deployed successfully in the Functions Console.

![Function Deploy Confirmation](https://devio2024-media.developers.io/image/upload/v1755737719/2025/08/21/kvcqplnhafxvpiozqrcw.jpg)

### Start the local server

```bash
node server.js