Dans la version 4.x de app-bridge-react plusieurs choses ont changées et dans le projet qui m’intéresse, j’ai besoin de faire un appel ajax et donc de passer le token dans le header pour passer auprès de Laravel.

Dans la version 3.x de app-bridge-react il fallait procéder comme suit :

import axios 			from 'axios';
import { useEffect } 		from 'react';
import { getSessionToken } 	from '@shopify/app-bridge/utilities';
import { useAppBridge } 	from '@shopify/app-bridge-react';

const useAxios = () => {
	const app = useAppBridge();
	
	useEffect( () => {
		axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
	
		const interceptor = axios.interceptors.request.use(function(config)
 		{
			return getSessionToken(app).then(token => {
				config.headers.Authorization = 'Bearer ' + token;
				
				return config;
			});
		});
		
		return () => axios.interceptors.request.eject(interceptor);
	}, []);
	
	return {axios};
};

export default useAxios;

Ce code permet de faire un lien entre axios pour l’appel, react pour la gestion de l’évènement et shopify/app-bridge pour récupérer le token Shopify et l’envoyer dans l’appel.

Dans la version 4.x de app-bridge-react si vous utilisez cette mécanique, cela mène à une erreur :

Pour corriger ce problème il faut prendre en considération le changement d’objet retourné par useAppBridge, ce dernier n’est plus une occurrence de app, mais une occurrence de Shopify, qui retourne ce genre d’objet :

Pour récupérer le token il faut donc appeler la fonction idToken

Votre code devient donc :

import axios 			from 'axios';
import { useEffect } 		from 'react';
import { useAppBridge } 	from '@shopify/app-bridge-react';

const useAxios = () => {
	const shopify = useAppBridge();
	
	useEffect( () => {
		axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
	
		const interceptor = axios.interceptors.request.use(function(config) 
		{
			return shopify.idToken().then(token => {
				config.headers.Authorization = 'Bearer ' + token;
				
				return config;
			});
		});
		
		return () => axios.interceptors.request.eject(interceptor);
	}, []);
	
	return {axios};
};

export default useAxios;

A partir de maintenant l’appel se fait correctement, pour vérifier que le token se trouve bien dans le header lors de l’appel, il suffit de vérifier la console :

Notre token est en place, tout est ok.