Using Storefront API with mutation on checkout

Shopify Discussion
1

Hi I always encountered this Unauthorized Error using storefront

I am using a Webhook for ‘checkout/update’ and mainly created using react/remix

I have this Webhook file called webhook.checkout.update.jsx

and this is my main issue

import { authenticate, unauthenticated } from "../shopify.server";
import { json } from "@remix-run/node";

export const action = async ({ request }) => {
try {
        const { payload, shop, admin, session } = await authenticate.webhook(request);
        const { storefront } = await unauthenticated.storefront(shop);
        let shippingOption = await getShippingOptions(shop,payload);
        
        const response = await fetch(`https://${shop}/api/2024-04/graphql.json`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-Shopify-Storefront-Access-Token": session.accessToken
            },
            body: JSON.stringify({
                query: `
                mutation checkoutShippingLineUpdate($checkoutId: ID!, $shippingRateHandle: String!) {
                    checkoutShippingLineUpdate(checkoutId: $checkoutId, shippingRateHandle: $shippingRateHandle) {
                        checkout {
                            id
                            shippingLine {
                                handle
                                title
                                priceV2 {
                                    amount
                                    currencyCode
                                }
                            }
                        }
                        userErrors {
                            field
                            message
                        }
                    }
                }`,
                variables: {
                    checkoutId: payload.id,
                    shippingRateHandle: 'Standard',
                },
            }),
        });

        const data = await response.json();

        console.log("Data Here: ", JSON.stringify(data))

        return json({status: 'success'});
    } catch (error) {
        console.error('Error handling webhook:', error);
        return json({ error: 'Internal server error' }, { status: 500 });
    }
}

the response would always be

Data Here: {"errors":[{"message":"","extensions":{"code":"UNAUTHORIZED"}}]}

the access token I have is the one saved on prisma which is automatically created once I have installed the app

Also it has the same output when using the pre defined method for the storefront

const response = await storefront.graphql(
            `
            mutation checkoutShippingLineUpdate($checkoutId: ID!, $shippingRateHandle: String!) {
                checkoutShippingLineUpdate(checkoutId: $checkoutId, shippingRateHandle: $shippingRateHandle) {
                    checkout {
                        id
                        shippingLine {
                            handle
                            title
                            priceV2 {
                                amount
                                currencyCode
                            }
                        }
                    }
                    userErrors {
                        field
                        message
                    }
                }
            }`,
            {
                variables: {
                    checkoutId: `gid://shopify/Checkout/${checkoutId}`,
                    shippingRateHandle: 'Standard'
                },
            }
        );

        const data = await response.json();

I would like to ask for help on this as I am stuck. Thank you.

2

Take a look at shopify’s Authentication & Authorization guide, you might find something

https://shopify.dev/docs/apps/build/authentication-authorization

3

I already have read and followed the instructions on that page but still got the same

I already have the scopes needed for the mutation I execute the unauthorized write checkout, etc.

also have that auto generated access token from admin during installation

4

My main goal here is to have the shipping options customized using the webhook checkout/update
I want to use/update the shipping options on checkout whenever the address is updated or fields required for the shipping option

5

It is like the issue could be with authentication or permissions on the webhook. Double-check your API keys and ensure the webhook has the right access level for checkout mutations was ist besser laminat oder vinyl.

6

I already have this
scopes

  • write_checkouts
  • unauthenticated_write_checkouts

and the access token is generated from admin page of shopify when installing the app, I use prisma for sessionStorage as well