How can I access user ID and cart in my app?

[Xowap]

Hi all,

Following the official documentation, I've started an app which was put together with the standard Remix template.

Now I'm trying to access the current customer's cart and ID and I don't really understand how I'm supposed to authenticate.

So far I understood that:

• For this kind of use, Shopify provides a proxy
• You get to authenticate using the appProxy() context thingy
• If you need to access the admin API there is a .admin to the proxy and otherwise there is a .storefront
• The cart ID comes from the cookie and needs to be parsed in the front-end because cookies get stripped

Now I'm trying to make any GraphQL query at all on behalf of the customer and I systematically eat up a 403 with no explanation from the API.

Here is my code (sorry it's a bit messy but shows you what I'm attempting to do):

export const action = async ({ request }: ActionFunctionArgs) => {
    if (request.method !== "POST") {
        return json({ error: "Method not allowed" }, 400);
    }

    const schema = zod.object({
        cart: zod.string(),
    });

    const parsed = schema.safeParse(await request.json());

    if (!parsed.success) {
        return json({ error: parsed.error }, 400);
    }

    const sf = await authenticate.public.appProxy(request);

    if (!sf.storefront) {
        return json({ error: "Could not authenticate" }, 400);
    }

    console.log(sf);

    // Retrieve the user's identity
    try {
        const identity = await sf.storefront.graphql(
            /* GraphQL */
            `
                query {
                    customer(customerAccessToken: $accessToken) {
                        id
                        firstName
                        lastName
                        acceptsMarketing
                        email
                        phone
                    }
                }
            `,
            {
                variables: {
                    accessToken: sf.session.accessToken,
                },
            }
        );

        return json(
            {
                success: true,
                input: parsed.data,
                identity: await identity.json(),
            },
            200
        );
    } catch (error) {
        console.error("Error retrieving user identity:", error);
        return json({ error: "Failed to retrieve user identity" }, 500);
    }

    // const cart = await getCart({
    //     storefront: sf.storefront,
    //     cartId: makeCartGid(parsed.data.cart),
    // });
    //
    // return json({ success: true, input: parsed.data, cart }, 200);
};

I'd be grateful for any pointers at this point!