Checkoutobject
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.
- Anchor to requestrequestRequestrequired
- Anchor to optionsoptions
Promise<>
AuthenticateCheckout
- request
Request - options
AuthenticateCheckoutOptions
Promise<CheckoutContext>export type AuthenticateCheckout = (
request: Request,
options?: AuthenticateCheckoutOptions,
) => Promise<CheckoutContext>;AuthenticateCheckoutOptions
- corsHeaders
string[]
export interface AuthenticateCheckoutOptions {
corsHeaders?: string[];
}CheckoutContext
Authenticated Context for a checkout request
- sessionToken
The decoded and validated session token for the request Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).
JwtPayload - cors
A function that ensures the CORS headers are set correctly for the response.
EnsureCORSFunction
export interface CheckoutContext {
/**
* The decoded and validated session token for the request
*
* Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).
*
* @example
* <caption>Using the decoded session token.</caption>
* <description>Get store-specific data using the `sessionToken` object.</description>
* ```ts
* // app/routes/public/my-route.ts
* import { LoaderArgs, json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
* import { getMyAppData } from "~/db/model.server";
*
* export const loader = async ({ request }: LoaderArgs) => {
* const { sessionToken } = await authenticate.public.checkout(
* request
* );
* return json(await getMyAppData({shop: sessionToken.dest}));
* };
* ```
*/
sessionToken: JwtPayload;
/**
* A function that ensures the CORS headers are set correctly for the response.
*
* @example
* <caption>Setting CORS headers for a public request.</caption>
* <description>Use the `cors` helper to ensure your app can respond to checkout extension requests.</description>
* ```ts
* // app/routes/public/my-route.ts
* import { LoaderArgs, json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
* import { getMyAppData } from "~/db/model.server";
*
* export const loader = async ({ request }: LoaderArgs) => {
* const { sessionToken, cors } = await authenticate.public.checkout(
* request,
* { corsHeaders: ["X-My-Custom-Header"] }
* );
* const data = await getMyAppData({shop: sessionToken.dest});
* return cors(json(data));
* };
* ```
*/
cors: EnsureCORSFunction;
}Was this section helpful?
Anchor to examplesExamples
Anchor to example-sessiontokensessionToken
Anchor to example-using-the-decoded-session-tokenUsing the decoded session token
Get store-specific data using the object.
Was this section helpful?
Using the decoded session token
app/routes/public/my-route.ts
import { LoaderArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";
export const loader = async ({ request }: LoaderArgs) => {
const { sessionToken } = await authenticate.public.checkout(
request
);
return json(await getMyAppData({shop: sessionToken.dest}));
};
examples
Using the decoded session token
description
Get store-specific data using the `sessionToken` object.
app/routes/public/my-route.ts
import { LoaderArgs, json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; import { getMyAppData } from "~/db/model.server"; export const loader = async ({ request }: LoaderArgs) => { const { sessionToken } = await authenticate.public.checkout( request ); return json(await getMyAppData({shop: sessionToken.dest})); };
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 { LoaderArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";
export const loader = async ({ request }: LoaderArgs) => {
const { sessionToken, cors } = await authenticate.public.checkout(
request,
{ corsHeaders: ["X-My-Custom-Header"] }
);
const data = await getMyAppData({shop: sessionToken.dest});
return cors(json(data));
};
examples
Setting CORS headers for a public request
description
Use the `cors` helper to ensure your app can respond to checkout extension requests.
app/routes/public/my-route.ts
import { LoaderArgs, json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; import { getMyAppData } from "~/db/model.server"; export const loader = async ({ request }: LoaderArgs) => { const { sessionToken, cors } = await authenticate.public.checkout( request, { corsHeaders: ["X-My-Custom-Header"] } ); const data = await getMyAppData({shop: sessionToken.dest}); return cors(json(data)); };