How to use Twilio on Angular?

Question

I am integrating whatsapp mesages with my application, but I have a build problem

whatsapp.service.ts

    import { Injectable } from "@angular/core";
    import { Twilio } from "twilio";
    // usado para ler os arquivos .env
    require("dotenv").config();
    
    let twilioID: string = "";
    let twilioToken: string = "";
    
    if (process.env.ENVIROMENT == "local" || process.env.ENVIROMENT == "dev") {
      //Dev ou local enviroment
      twilioID = process.env.TWILIO_TEST_SID || "";
      twilioToken = process.env.TWILIO_TEST_AUTH_TOKEN || "";
    } else {
      // Em produção
      twilioID = process.env.TWILIO_PRODUCTION_SID || "";
      twilioToken = process.env.TWILIO_PRODUCTION_AUTH_TOKEN || "";
    }
    // Cliente para usar funções da api do twilio
    const client = new Twilio(twilioID, twilioToken);
    
    const BOT_NUMBER = "whatsapp:+14155238886";
    
    @Injectable({
      providedIn: "root",
    })
    export class WhatsAppService {
      sendWhatsAppMessage(
        numberDestiny: number,
        message: string,
        countryCode: number
      ) {
        return client.messages.create({
          from: BOT_NUMBER,
          to: `whatsapp:+${countryCode}${numberDestiny}`,
          body: message,
        });
      }
    
      sendMediaWhatsAppMessage(
        numberDestiny: number,
        message: string,
        countryCode: number,
        mediaUrls: string[]
      ) {
        return client.messages.create({
          mediaUrl: mediaUrls,
          from: BOT_NUMBER,
          to: `whatsapp:+${countryCode}${numberDestiny}`,
          body: message,
        });
      }
    }

Build Error

ERROR in ./node_modules/jsonwebtoken/node_modules/jwa/index.js Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ialex\Documents\Development\node_modules\jsonwebtoken\node_modules\jwa'

ERROR in ./node_modules/scmp/index.js Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ialex\Documents\Development\node_modules\scmp'

ERROR in ./node_modules/twilio/lib/webhooks/webhooks.js Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ialex\Documents\Development\node_modules\twilio\lib\webhooks'

ERROR in ./node_modules/dotenv/lib/main.js Module not found: Error: Can't resolve 'fs' in 'C:\Users\ialex\Documents\Development\node_modules\dotenv\lib'

ERROR in ./node_modules/twilio/lib/base/RequestClient.js Module not found: Error: Can't resolve 'fs' in 'C:\Users\ialex\Documents\Development\node_modules\twilio\lib\base'

ERROR in ./node_modules/twilio/lib/base/RequestClient.js Module not found: Error: Can't resolve 'http' in 'C:\Users\ialex\Documents\Development\node_modules\twilio\lib\base'

ERROR in ./node_modules/twilio/lib/base/RequestClient.js Module not found: Error: Can't resolve 'https' in 'C:\Users\ialex\Documents\Development\node_modules\twilio\lib\base'

ERROR in ./node_modules/dotenv/lib/main.js Module not found: Error: Can't resolve 'path' in 'C:\Users\ialex\Documents\Development\node_modules\dotenv\lib'

ERROR in ./node_modules/jsonwebtoken/node_modules/jws/lib/sign-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Users\ialex\Documents\Development\node_modules\jsonwebtoken\node_modules\jws\lib'

ERROR in ./node_modules/jsonwebtoken/node_modules/jws/lib/verify-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Users\ialex\Documents\Development\node_modules\jsonwebtoken\node_modules\jws\lib'

ERROR in ./node_modules/jsonwebtoken/node_modules/jws/lib/data-stream.js Module not found: Error: Can't resolve 'stream' in 'C:\Users\ialex\Documents\Development\node_modules\jsonwebtoken\node_modules\jws\lib'

Does this answer your question? [Module not found: Error: Can't resolve 'crypto'](https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto) — R. Richards, Jan 29 '21 at 18:20

score 3 · Accepted Answer · answered Feb 01 '21 at 06:46

Twilio developer evangelist here.

The issue here is because you are trying to use the Twilio Node.js library in a client side application. Firstly, the Node library is not built to be used in a browser.

More importantly this is not a good idea because it requires your account SID and auth token to be present in the client. A malicious user could read your account SID and auth token out of the source of the app and then use them to abuse your Twilio account.

Instead, you should make your requests to the Twilio API on the server side and just send the relevant data to the server from your Angular application.

I did write an example Angular application a while ago, that might help. You can see how I send the data to the server in this MessageService and then send it to the Twilio API in this server side route. (I apologise that there isn't more documentation for this app though.)

How to use Twilio on Angular?

1 Answers1