Skip to main content

Checkout
object

The authenticate.public.checkout function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.

Authenticates requests coming from Shopify checkout extensions.

Request
required

Promise<>
Was this section helpful?

Authenticate and return offers for the shop

import type {ActionFunctionArgs, LoaderFunctionArgs} from '@remix-run/node';
import {json} from '@remix-run/node';

import {authenticate} from '../shopify.server';
import {getOffers} from '../offers.server';

// The loader responds to preflight requests from Shopify
export const loader = async ({request}: LoaderFunctionArgs) => {
await authenticate.public.checkout(request);
};

export const action = async ({request}: ActionFunctionArgs) => {
const {cors, sessionToken} = await authenticate.public.checkout(request);

const offers = getOffers(sessionToken.dest);
return cors(json({offers}));
};

Anchor to example-setting-cors-headers-for-a-public-requestSetting CORS headers for a public request

Use the cors helper to ensure your app can respond to checkout extension requests.

Was this section helpful?

Setting CORS headers for a public request

app/routes/public/my-route.ts

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
const { sessionToken, cors } = await authenticate.public.checkout(
request,
{ corsHeaders: ["X-My-Custom-Header"] }
);
const data = await getMyAppData({shop: sessionToken.dest});
return cors(json(data));
};

Get store-specific data using the sessionToken object.

Was this section helpful?

Using the decoded session token

app/routes/public/my-route.ts

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
const { sessionToken } = await authenticate.public.checkout(
request
);
return json(await getMyAppData({shop: sessionToken.dest}));
};