Unable to connect to Room: Invalid Access Token issuer/subject twilio

Question

I do want to create an access token in the backend and need to pass to the front end to connect to the video chat room.

This is my back-end code

const twilioAccountSid = process.env.twilioAccountSid;
const twilioApiKey = process.env.twilioApiKey;
const twilioApiSecret = process.env.twilioApiSecret;

const room = "cool room";

app.post("/access-token", (req, res) => {
  try {
    console.log(
      "sid",
      twilioAccountSid,
      "key",
      twilioApiKey,
      "secret",
      twilioApiSecret
    );
    const identity = "user";

    // Create Video Grant
    const videoGrant = new VideoGrant({
      room,
    });

    // Create an access token which we will sign and return to the client,
    // containing the grant we just created
    const token = new AccessToken(
      twilioAccountSid,
      twilioApiKey,
      twilioApiSecret,
      { identity: identity }
    );
    token.addGrant(videoGrant);

    // Serialize the token to a JWT string
    console.log(token.toJwt());
    res.status(200).json(token.toJwt());
  } catch (error) {
    console.warn(error);
    res.sendStatus(500);
  }
});

For the Twilio account SID I used my dashboard's SID which is starting from AC For the API key I added the friendly name I gave to the API key when I created it. API secret is that API key's secret id.

A token is crearted succefully and passed to the front-end.

This is my front-end code

const connectRoom = async () => {
  try {
    const token = await axios.post("http://localhost:5000/access-token");

    connect(token.data, { name: roomName, video: { width: 640 } }).then(
      (room) => {
        console.log(`Successfully joined a Room: ${room}`);
        room.on("participantConnected", (participant) => {
          console.log(`A remote Participant connected: ${participant}`);
          participant.tracks.forEach((publication) => {
            console.log("for each");
            if (publication.isSubscribed) {
              const track = publication.track;
              document
                .getElementById("remote-media-div")
                .appendChild(track.attach());
            }
          });
          participant.on("trackSubscribed", (track) => {
            document
              .getElementById("remote-media-div")
              .appendChild(track.attach());
          });
        });
      },
      (error) => {
        console.error(`Unable to connect to Room: ${error.message}`);
      }
    );
  } catch (error) {
    console.log(error);
  }

Then I get this error

Unable to connect to Room: Invalid Access Token issuer/subject

How do I solve this problem?

Any help! Thanks in advance

Answer 1

You can create an API Key here (or via the Console). Note, the API Key starts with SK....

REST API: API Keys