Zendesk Desk End user authentication messaging - won't work

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);
    });
};