SecurityError: The operation is insecure - on Twilio Flex Webchat for several phones

40 Views Asked by At

We have implemented Webchat using twilio/flex-webchat-ui and it works great on localhost and on production, also on mobile browsers

but - on a QA tests we are having, it seems like some mobile versions are not supported.

we get a SecurityError: The operation is insecure. message and Actions: Error in action ToggleChatVisibility body: Expired token.

this is the list of non-loading phones:

  1. Iphone 11 Pro
  2. Iphone 12 Pro
  3. Iphone 12
  4. Iphone 12mini
  5. Iphone 13mini
  6. Iphone 13 Pro max
  7. Iphone 13

Does this ring any bells? is it true that Twillio will not support this?

This is the code for initializing

 const webchatConfig: Record<any, any> = {
        MainHeader: {
          showImage: false,
          titleText: windowTitle
        },
        MessagingCanvas: {
          showTypingIndicator: true,
          memberDisplayOptions: {
            theirDefaultName: operatorName
          }
        }
      };

      const renderedWC = await renderWebChat({
        accountSid: accountSid,
        flexFlowSid: flowSid,
        logLevel: "INFO",
        chatFriendlyName: fullName,
        context: {
          friendlyName: fullName,
          priority: 1,
          campaignRunDebtId
        },

        colorTheme: {
          overrides: brandedColors
        },
        startEngagementOnInit: true,
        componentProps: webchatConfig,
        available: true
      });

      const { manager } = renderedWC;
      console.log("manager", manager);
      
      manager.strings.WelcomeMessage = welcomeMessage;
      manager.strings.PredefinedChatMessageAuthorName =
        operatorName;
      manager.strings.PredefinedChatMessageBody =
        predefinedFirstMessage;

      webChat.Actions.addListener("beforeSendMessage", (payload) => {
        payload.messageAttributes = {};
        payload.messageAttributes.fromWebChatDebtor = true;
        payload.messageAttributes.debtId = debtId;
      });

      webChat.Actions.addListener("afterToggleChatVisibility", () => {
        const webChatOpened =
          manager.store.getState().flex.session.isEntryPointExpanded;
        webChatOpened ? handleWebchatOpened() : handleWebchatClosed();
      });

      webChat.Actions.addListener("afterMinimizeChat", () => {
        handleWebchatClosed();
      });
      webChat.initWithStrings(manager.strings);
0

There are 0 best solutions below