Create a Customer Access Token using Storefront GraphQL API returns blank response on iOS devices

Technical Q&A
1 
function createDiceblockSession(customerEmailId, customerPasswordId)
  {
    var email = document.getElementById(customerEmailId).value;
    var password = document.getElementById(customerPasswordId).value;
  
    const query = `mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
      customerAccessTokenCreate(input: $input) {
          customerUserErrors {
            code
            field
            message
          }
          customerAccessToken {
            accessToken
            expiresAt
          }
      }
  }`;
  
    const Http = new XMLHttpRequest();
    const url = "https://diceblock.myshopify.com/api/2020-04/graphql";
    Http.open("POST", url);
    Http.setRequestHeader("Accept", "application/json");
    Http.setRequestHeader("Content-Type", "application/json");
  
    // This access token is safe to include client-side
    Http.setRequestHeader("X-Shopify-Storefront-Access-Token", "0b044ffce58de4d2b9993444b454522d");

     // Set the body
    // https://graphql.org/learn/serving-over-http/
    var requestBody = {
      query: query,
      variables: {
        input: {
          email: email,
          password: password
        }
      }
    };
  
    Http.onreadystatechange = function() {
      if (this.readyState == 4)
      {
        var response = JSON.parse(this.responseText).data.customerAccessTokenCreate;
        var errors = response.customerUserErrors;
        if (errors.length != 0)
        {
          console.error(errors);
        }
        else
        {
          var accessToken = response.customerAccessToken.accessToken;
          var expirationDate = response.customerAccessToken.expiresAt;
          setDiceblockAccessToken(accessToken, expirationDate);
        }
      }
    };
  
    Http.send(JSON.stringify(requestBody));
  }

The above code block is what our storefront calls to create a customer access token. We bind this to the login button click on the Debut theme. We use this token to leverage the Storefront API on our theme (even though we are using liquid + stock login account that comes with the theme.)

This works just fine on Desktop and Android. Response text returns status 200 (Success) and the proper access token response: https://shopify.dev/docs/admin-api/rest/reference/access/storefrontaccesstoken

The problem is on Chrome and Safari on iOS devices, the responseText is blank and the HTTP return status is 0.

Has anybody seen this developing a Storefront API-based web app? Is there a setting or something that iOS doesn’t like about the HTTP request?

1 Like