Webwidget JWT Auth Failure

Hi we have been working tirelessly on this on our website and its not working...  our azure web app sends back a token by checking it against Shopify customer_id and works but then we just get stuck with it waiting for the web widget to load

we injected this code into our Shopify theme.liquid

<!-----------ZENDESK End User Auth App------->
{% if customer %}
<script>
  window.addEventListener('load', function() {
    authenticateZendesk({{ customer.id }});
  });
</script>
{% endif %}
<div id="webWidget"></div>
<script src="{{ 'zendesk-embeddable-auth.js' | asset_url }}" async></script>
<script>
  window.zESettings = {
    webWidget: {
      chat: {
        badge: {
          label: {
            '*': 'Chat with us'
          }
        },
        authenticate: {
          jwtFn: function(callback) {
            authenticateZendesk({{ customer.id }}, callback);
          },
        },
      },
      contactOptions: {
        enabled: true,
        contactButton: {
          '*': 'Contact us'
        },
        chatLabelOnline: {
          '*': 'We are online!'
        },
        chatLabelOffline: {
          '*': 'We are offline!'
        }
      },
      accountUrl: 'https://{our-zendesk}.zendesk.com', // Replace with your Zendesk account URL
      authentication: {
        client: 'webWidget',
        key: '{our-key}',
        kid: '{our-messenger id}',
        jwtFn: function(callback) {
          authenticateZendesk({{ customer.id }}, callback);
        },
      },
      contactForm: {
        attachments: false,
      },
    },
  };
</script>
<!-----------ZENDESK End User Auth App------->

and then the following file: zendesk-embeddable-auth.js

window.authenticateZendesk = function (customerId) {
  console.log('authenticateZendesk function called');
  console.log('Fetching JWT for customer ID:', customerId);

  fetch('https://{our-app name}.azurewebsites.net/api/authenticate/' + customerId)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Error fetching JWT: ${response.status} ${response.statusText}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('Received JWT:', data.jwt);

      // Wait for Web Widget to load
      function waitForWebWidget() {
        if (typeof zE !== 'undefined' && document.getElementById('webWidget')) {
          console.log('Web Widget found, updating settings');
          zE('webWidget', 'updateSettings', {
            webWidget: {
              authentication: {
                jwtFn: function (callback) {
                  callback(data.jwt);
                },
              },
            },
          });
        } else {
          console.log('Web Widget not yet loaded, waiting...');
          setTimeout(waitForWebWidget, 1000); // Check again in 1 second
        }
      }

      waitForWebWidget();
    })
    .catch(error => {
      console.error('Error fetching JWT:', error);
    });
};

Hi Greg,

I am using

login (jwt) {
    window.zE('webWidget', 'updateSettings', {
      webWidget: {
        authenticate: {
          chat: {
            jwtFn: function (callback) {
              callback(jwt)
            }
          }
        },
        contactForm: {
          attachments: false
        }
      }
    })
  }

To auth the chat component. When this is in place the contact form fails.

I am not attempting to use it for the contact form as I simply use the prefill args for that.

Can you please advise?

Cheers,

Hi Rubens! If you're using this setting, that won't work with the contact forms, but you won't need those. The user's info should be pre-filled in the widget and the Requests endpoint is anonymous, so no need to pass auth details there. Since it's using their email address, it will be added to their tickets, you won't lose anything with that.

Regarding the Help Center for restricted content, can you confirm that you followed these steps as well to get that working? If you have and you're still having problems, please share your code (minus any secrets or sensitive data) and we'll take a look at it!