Customer accountobject
object
The function ensures that customer account extension requests are coming from Shopify, and returns helpers to respond with the correct headers.
Authenticates requests coming from Shopify customer account extensions.
- Anchor to requestrequestRequestrequired
- Anchor to optionsoptions
Promise<>
AuthenticateCustomerAccount
- request
Request - options
AuthenticateCustomerAccountOptions
Promise<CustomerAccountContext>export type AuthenticateCustomerAccount = (
request: Request,
options?: AuthenticateCustomerAccountOptions,
) => Promise<CustomerAccountContext>;AuthenticateCustomerAccountOptions
- corsHeaders
string[]
export interface AuthenticateCustomerAccountOptions {
corsHeaders?: string[];
}CustomerAccountContext
Authenticated Context for a customer account extension request
- cors
A function that ensures the CORS headers are set correctly for the response.
EnsureCORSFunction - 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
export interface CustomerAccountContext {
/**
* 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 { 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.customerAccount(
* 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 customer account extension requests.</description>
* ```ts
* // 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.customerAccount(
* request,
* { corsHeaders: ["X-My-Custom-Header"] }
* );
* const data = await getMyAppData({shop: sessionToken.dest});
* return cors(json(data));
* };
* ```
*/
cors: EnsureCORSFunction;
}EnsureCORSFunction
export interface EnsureCORSFunction {
(response: Response): Response;
}Was this section helpful?
Authenticate and return offers for the customer
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.customerAccount(request);
};
export const action = async ({request}: ActionFunctionArgs) => {
const {cors, sessionToken} = await authenticate.public.customerAccount(request);
// Get offers for the customer
const offers = getOffers(sessionToken.des, sessionToken.sub);
return cors(json({offers}));
};
examples
Authenticate and return offers for the customer
description
Authenticate and return offers for the customer
/app/routes/**.ts
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.customerAccount(request); }; export const action = async ({request}: ActionFunctionArgs) => { const {cors, sessionToken} = await authenticate.public.customerAccount(request); // Get offers for the customer const offers = getOffers(sessionToken.des, sessionToken.sub); return cors(json({offers})); };/app/offers.server.ts
// Most apps would load this from their database export function getOffers(shop: string, customerID: string) { const offers: Record<string, any[]> = { 'shop.com': [ { id: '1', title: '10% off', price: 10, type: 'percentage', customerId: 'gid://shopify/Customer/1001', }, { id: '2', title: 'Free shipping', price: 0, type: 'shipping', customerId: 'gid://shopify/Customer/1001', }, { id: '3', title: '5% off', price: 5, type: 'percentage', customerId: 'gid://shopify/Customer/1001', }, ], }; const allOffers = offers[shop] || []; // Filter offers to include only those that match the customerId const filteredOffers = allOffers.filter( (offer) => offer.customerId === customerID, ); return filteredOffers; }
Anchor to examplesExamples
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 customer account 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.customerAccount(
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 customer account extension requests.
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.customerAccount( request, { corsHeaders: ["X-My-Custom-Header"] } ); const data = await getMyAppData({shop: sessionToken.dest}); return cors(json(data)); };
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 { 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.customerAccount(
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 { 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.customerAccount( request ); return json(await getMyAppData({shop: sessionToken.dest})); };
