0👍
To clarify what was the issue and how it was resolved, in first place I was thinking that someone would be facing same issue as I am therefore I assumed there’s no code required for that as it is just basically error that is very self explanatory that is saying the session token is expired what else do you want ?
This error is happening because the shopify is running applications in Iframe and the tokens that are making requests are not matching so you have to add the manualy to your requests I recommend getting the token always when method is called as the token changes every few minutes. I am adding some code examples how I handled it with Vue.js,Laravel,Inertia.js,Axios
submit() {
let sessionToken = getSessionToken(app);
sessionToken.then((token) => {
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
axios.get(route('login',{'form' : this.form,'email':this.form.email,'password':this.form.password})
).then(
response => {
console.log(token);
Inertia.visit('/home', {
method: 'get',
only: ['auth'],
headers: {
'Authorization': `Bearer ${token}`,
},
});
}).catch(error => {
alert(error);
});
});
},
and this is in my app.blade.php I found this on Osiset github not sure if it’s best solution
https://github.com/osiset/laravel-shopify/issues/594
@if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
<script src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
<script
@if(\Osiset\ShopifyApp\Util::getShopifyConfig('turbo_enabled'))
data-turbolinks-eval="false"
@endif
>
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var utils = window['app-bridge-utils'];
var createApp = AppBridge.default;
var app = createApp({
apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name ) }}",
shopOrigin: "{{ $shopDomain ?? Auth::user()->name }}",
host: "{{ \Request::get('host') }}",
forceRedirect: true,
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
@include('shopify-app::partials.token_handler')
@include('shopify-app::partials.flash_messages')
@endif
@inertia
</body>
<script>
const getSessionToken = window['app-bridge-utils'].getSessionToken;
</script>
Alternatively you can dissable csrf tokens (Not recomended)
- [Vuejs]-Change image source (twice) when src does not exist
- [Vuejs]-React, Vue, Angular, etc., how to handle errors application wide?