Why am I getting an "Invalid session token" error in my Shopify app when making a request?

Question

I'm trying to make a request from my shopify app, post a method to my backend which is laravel and my frontend vue.js, I'm using Inertia, I get it.

Answer 1

To clarify what the problem is and how to solve it, firstly I thought someone will face the same problem as me, so I don't think any code is needed as this is basically a very self-explanatory error saying that the session token has expired and you What else do you want?

This error occurs because Shopify is running the application in an Iframe, and the token making the request does not match, so you must manually add the token to the request. I recommend always getting the token when calling the method since the token will change for a while each time. I've added some code examples of how I handle it using 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);
                });
            });
        },

This is in my app.blade.php, I found it on Osiset github, not sure if this is the 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 disable the csrf token (not recommended)