Shopify App Theme Extension Token Pending Promise

Question

I am working on creating an app theme extension for an EXISTING application, our app is in development stage so that is not live on the app store, we are creating a block of it by following the guide, since it is a multi-user application, we want to get either the session token or access token or whatever is available to communicate with the server.

This is our code that we got by following the link.

https://shopify.dev/docs/apps/getting-started/create

<div class="container">
  <label for="wpm-select-widget">Select Widget</label>
  <select id="userSelect">
  <option value="">Select</option>
  </select>

</div>
<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils@2"></script>

<script>

    var AppBridge = window['app-bridge'];
    var createApp = AppBridge.default;
    
    var utils = window['app-bridge-utils'];
    var app = createApp({
        apiKey: '<our app key>',
        shopOrigin: 'shop.<domain>.com',
        forceRedirect: false
    });

    console.log('===> map_widget.liquid ===> before promise');
    utils.getSessionToken(app)
        .then(function (sessionToken) {

            console.log('===> map_widget.liquid ===> in promise, never reached!', sessionToken);
            
            // Extract necessary details from the session token
            var userDetails = extractUserDetails(sessionToken); // Implement this function to extract details
            
            // Populate the select control with user details
            populateSelectOptions(userDetails);

        })
        .catch(function (err) {
            console.error('Error getting session token:', err);
        });

    function extractUserDetails(sessionToken) {
        // Implement code to extract user details from the session token
        // For example:
        // var user = sessionToken.user;
        // return user.details;
    }

    function populateSelectOptions(userDetails) {

        var select = document.getElementById('userSelect');

        // Loop through user details and populate select options
        userDetails.forEach(function (user) {
            var option = document.createElement('option');
            option.value = user.id; // Use the appropriate property for the option value
            option.textContent = user.name; // Use the appropriate property for the option text
            select.appendChild(option);
        });
    }
</script>
{% schema %}
{
  "name": "Wp Widget",
  "target": "section",
  "javascript": "app.js",
  "settings": [
    { "type": "color", "id": "colour", "label": "Star Colour", "default": "#ff0000" }
  ]
}
{% endschema %}

I am not able to get ahead of that pending promise, I'm not sure what I'm doing here as there is little to no material available to move ahead.

Thank you