Unable to call customerAccessTokenCreate mutation from Shopify storefront using Storefront API

[adaptPatrick]

Hi, 

We need to be able to modify user tags from the Shopify storefront to be able to identify different user "states". 

We intend to do this using the Storefront API. My understanding is that we'll need a customer access token in order to make the necessary mutation calls via the Graphql API. To do this, we need to intercept the user's login attempts via the store and first pass their details to the customerAccessTokenCreate mutuation to retrieve an accessToken which I intend to store in local storage. 

Unfortunately we are failing at the first hurdle here as we don't seem able to make this mutation call using vanilla JS from within the theme. See code example below (our storefront API key & store URL handle have both been removed). This code is being triggered by a submit event listener on the login form element. 

var storeFrontAccessToken = '{our storefront API key}';
var storeFrontApiURL = 'https://{our store}.myshopify.com/api/2021-04/graphql.json';
var formData = new FormData(e.target);
var formInput = {
	input: {
		email: formData.get('customer[email]'),
		password: formData.get('customer[password]')
	}
};

var requestBody = {
	"query": "mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) { customerAccessTokenCreate(input: $input) { customerAccessToken{ accessToken expiresAt } customerUserErrors{ code field message } } }",
	"variables": {
		"input": formInput.input
	}
};

var oReq = new XMLHttpRequest();
oReq.open('POST', storeFrontApiURL);
oReq.setRequestHeader('X-Shopify-Storefront-Access-Token', storeFrontAccessToken);
oReq.setRequestHeader('Accept', 'application/json');
oReq.setRequestHeader('Content-Type', 'application/graphql');
oReq.onload = function(e) {
	var xhr = e.target;
				
	console.log(JSON.parse(xhr.response));
};
oReq.send(requestBody);

Making the same call via Insomnia & cURL appears to work successfully without any issues. An accessToken is successfully returned to us. However making this call in the browser results in the following error message: Parse error on \"[\" (LBRACKET) at [1, 1]. 

An example request ID which failed is: 1af50e42-999e-4d71-9045-9b0e1ee5b401. 

Additionally, when attempting to change the Content-Type header to application/json instead of application/graphql we then get a CORS error returned. 

Any assistance you can provide would be most appreciated. 

Many thanks,
Patrick 

[SBD_ · Accepted solution]

Hey @adaptPatrick 

From the logs, the query isn't coming through. You'll need to stringify the body. I just ran a successful test using the following code:

var oReq = new XMLHttpRequest();
oReq.open('POST', storeFrontApiURL);
oReq.responseType = 'json';
oReq.setRequestHeader('X-Shopify-Storefront-Access-Token', storeFrontAccessToken);
oReq.setRequestHeader('Content-Type', 'application/json');
oReq.onload = function(e) {
  var xhr = e.target;
  console.log(xhr.response);
};
oReq.send(JSON.stringify(requestBody));

 Note the content-type should be application/json. I was hitting the CORS issue too until stringifying. Let me know how you go!

[adaptPatrick]

Hi @SBD_, 

Amazing. I hate it when this happens as developers; spend hours staring at a problem, trying all possible solutions you can consider only to find you've not tried one specific combination (in this case a Content-Type of application/json & JSON stringified body). 

Thanks so much for your help with this. Pleased to say, if also a little frustrated, that your proposed solution has done the trick! 

Really appreciate it. 

Best,
Patrick