Migrating standalone Shopify app to app bridge

[approxhuman]

We have built a Shopify app with Python backend and React frontend (without using Polaris components) now we would like to migrate to app bridge. The existing app opens up in new page and uses JWT the backend handles all the redirection now. What are the things one should look out for 

[iozyigit]

I think you can check Shopify's confusing documentation

https://shopify.dev/apps/auth/oauth/session-tokens

since your apps front end opens in shopify admin, shopify provide jwt token to you, so addiing app bridge in your front, you will be able to retreive the jwt token, then you can send this token to your python backend, so on your backend when you verify jwt you have to check with your app secret key because shopify sign with that and sends to you.

import React from 'react';
import AxiosShopify from '../../AxiosShopify';
import { useAppBridge } from '@shopify/app-bridge-react';
import { getSessionToken } from '@shopify/app-bridge-utils';

const config = {
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
};
/*
this is custom hook that fetch data from my backend
*/
export const useFetchDataApiShopify = (url) => {
const app = useAppBridge();
const [responseData, setResponseData] = React.useState(undefined);
const [isError, setIsError] = React.useState(undefined);
const [isLoading, setIsLoading] = React.useState(undefined);

React.useEffect(() => {
const fetchData = async (url) => {
setIsLoading(true);
try {
const token = await getSessionToken(app);
config.headers['Authorization'] = `Bearer ${token}`;
const result = await AxiosShopify.get(url, config);
setResponseData(await result.data);
console.log('set response fetch11', result);
setIsLoading(false);
} catch (error) {
// console.log('set response fetch error', error);
setIsError(error);
}
};

fetchData(url);
}, [url]);
return [responseData, isError, isLoading];
};

Here how I did on my app, check my solution at the end.

https://community.shopify.com/c/shopify-apis-and-sdks/getting-session-token-in-axios-intercept/td-p/...