This must not be correct. I am getting
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getSessionToken')
The code I have is as follows, and I am getting the error when calling
const getSessionToken = window['app-bridge-utils'].getSessionToken;
start_session.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Get session token</title>
<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js" integrity="sha512-u9akINsQsAkG9xjc1cnGF4zw5TFDwkxuc9vUp5dltDWYCSmyd0meygbvgXrlc/z7/o4a19Fb5V0OUE58J7dcyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const server = "<ngrok server>";
const clientId = "<shopify client id>";
const appUrl = "<app url>";
const parseSearchParams = () => {
const params = new URL(window.location.href).searchParams;
let shop = null;
if (params.get('shop')) {
shop = params.get('shop').trim();
}
let host;
if (params.get('host')) {
host = params.get('host').trim();
}
return {
shop,
host
};
};
const initializeAppBridge = async ({ host }) => {
const instance = axios.create();
const AppBridge = window['app-bridge'];
const createApp = AppBridge.createApp;
const app = createApp({
apiKey: clientId,
host
});
const getSessionToken = window['app-bridge-utils'].getSessionToken;
const token = await getSessionToken(app);
console.log('token: ', token);
// Intercept all requests on this Axios instance
instance.interceptors.request.use(async(config) => {
config.headers['Authorization'] = `Bearer ${token}`;
console.log(JSON.stringify(headers));
return config;
});
};
const params = parseSearchParams();
initializeAppBridge({ host: params.host }).then(() => axios.get(appUrl));
</script>
</head>
