Capability token is not valid or missing Twilio

Question

I have integrated Twilio Programmable Voice. Now I am trying to make client to call from browser and also receive calls to browser using Twilio JS Client. When I try to make the call it says.

message: "Capability token is not valid or missing."

I have searched the internet and Twilio documentation as well but nothing is helping me. Here is my code.

View

<button onclick="callCustomer('{{ '+xxxxxxxx' }}')" type="button" class="btn btn-primary btn-lg call-customer-button">
     Call customer
</button>

Controller

public function newToken(Request $request) {
    // Required for all Twilio access tokens
    $twilioAccountSid = 'ACxxxxxxxxx';
    $twilioApiKey = 'SKxxxxxxxxxxx';
    $twilioApiSecret = 'xxxxxx';

    $outgoingApplicationSid = 'APxxxxxxxxxxx';
    $identity = "Jhon_Doe";

    $token = new AccessToken(
            $twilioAccountSid, $twilioApiKey, $twilioApiSecret, 3600, $identity
    );

    $voiceGrant = new VoiceGrant();
    $voiceGrant->setOutgoingApplicationSid($outgoingApplicationSid);

    $voiceGrant->setIncomingAllow(true);

    $token->addGrant($voiceGrant);

    return $token->toJWT();
}

JS

function callCustomer(phoneNumber) {
    $.get("/token", {forPage: window.location.pathname}, function (data) {
        console.log(data);
        const device = new Twilio.Device();
        device.setup(data);
        
        var params = {"phoneNumber": phoneNumber};
        device.connect(params);
    });
}

I have tried to debug my token from jwt.io debug tool and it says:

Invalid Signature.

I am sure that I am missing something but can't figure it out what. Any help or tip will be appreciated.

Answer 1

I have figured it out just posting answer for future reference. The issue was of twilio js version. I had included the older version which was causing the issue. The lates version to this date is Version: 1.13. Capability token is deprecated in this version and uses Access Token now.