Choose a version:

Customer account

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

Anchor to authenticate.public.customerAccount
authenticate.public.customerAccount(
request
,
options
)

Authenticates requests coming from Shopify customer account extensions.

Anchor to authenticate.public.customerAccount-parametersParameters

Anchor to request request Request required
Anchor to options options

Anchor to authenticate.public.customerAccount-returnsReturns

Promise<>

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
```

EnsureCORSFunction

Examples

import type {ActionFunctionArgs, LoaderFunctionArgs} from 'react-router';

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({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 'react-router';

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({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;
}

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 "react-router";
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(data));
};

Description

Get store-specific data using the `sessionToken` object.

app/routes/public/my-route.ts

import { LoaderFunctionArgs, json } from "react-router";
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 (await getMyAppData({shop: sessionToken.dest}));
};