Choose a version:

App proxy

App proxies take requests to Shopify links, and redirect them to external links. The authenticate.public.appProxy function validates requests made to app proxies, and returns a context to enable querying Shopify APIs.

Note

If the store has not installed the app, store-related properties such as admin or storefront will be undefined

Anchor to authenticate.public.appProxy
authenticate.public.appProxy(
request
)

Authenticates requests coming to the app from Shopify app proxies.

Anchor to authenticate.public.appProxy-parametersParameters

Anchor to request request Request required

Anchor to authenticate.public.appProxy-returnsReturns

Promise< | >

AppProxyContext

admin
No session is available for the shop that made this request. Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.
```
undefined
```
liquid
A utility for creating a Liquid Response.
```
LiquidResponseFunction
```
session
No session is available for the shop that made this request. This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
```
undefined
```
storefront
No session is available for the shop that made this request. Therefore no method for interacting with the Storefront API is available.
```
undefined
```

LiquidResponseFunction

body
```
string
```
initAndOptions
```
number | (ResponseInit & Options)
```

returns

Response

Options

layout
Whether to use the shop's theme layout around the Liquid content.
```
boolean
```

AppProxyContextWithSession

admin
Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.
```
AdminApiContext
```
liquid
A utility for creating a Liquid Response.
```
LiquidResponseFunction
```
session
The session for the shop that made the request. This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice. Use this to get shop or user-specific data.
```
Session
```
storefront
Method for interacting with the Shopify Storefront Graphql API for the store that made the request.
```
StorefrontContext
```

AdminApiContext

Provides utilities that apps can use to make requests to the Admin API.

graphql
Methods for interacting with the Shopify Admin GraphQL API
```
GraphQLClient<AdminOperations>
```

GraphQLClient

query
```
Operation extends keyof Operations
```

options

GraphQLQueryOptions<Operation, Operations>

returns

interface Promise<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Attaches a callback for only the rejection of the Promise.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of the callback.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}, interface Promise<T> {}, Promise: PromiseConstructor, interface Promise<T> {
    readonly [Symbol.toStringTag]: string;
}, interface Promise<T> {
    /**
     * Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The
     * resolved value cannot be modified from the callback.
     * @param onfinally The callback to execute when the Promise is settled (fulfilled or rejected).
     * @returns A Promise for the completion of the callback.
     */
    finally(onfinally?: (() => void) | undefined | null): Promise<T>;
}

GraphQLQueryOptions

apiVersion
The version of the API to use for the request.
```
ApiVersion
```
headers
Additional headers to include in the request.
```
Record<string, any>
```
signal
An optional AbortSignal to cancel the request.
```
AbortSignal
```
tries
The total number of times to try the request if it fails.
```
number
```
variables
The variables to pass to the operation.
```
ApiClientRequestOptions<Operation, Operations>
```

ApiVersion

October24
```
2024-10
```
January25
```
2025-01
```
April25
```
2025-04
```
July25
```
2025-07
```
October25
```
2025-10
```
January26
```
2026-01
```
April26
```
2026-04
```
Unstable
```
unstable
```

Session

Stores App information from logged in merchants so they can make authenticated requests to the Admin API.

id
The unique identifier for the session.
```
string
```
shop
The Shopify shop domain, such as `example.myshopify.com`.
```
string
```
state
The state of the session. Used for the OAuth authentication code flow.
```
string
```
isOnline
Whether the access token in the session is online or offline.
```
boolean
```
scope
The desired scopes for the access token, at the time the session was created.
```
string
```
expires
The date the access token expires.
```
Date
```
accessToken
The access token for the session.
```
string
```
refreshToken
The refresh token for the session.
```
string
```
refreshTokenExpires
The date the refresh token expires.
```
Date
```
onlineAccessInfo
Information on the user for the session. Only present for online sessions.
```
OnlineAccessInfo
```
isActive
Whether the session is active. Active sessions have an access token that is not expired, and has has the given scopes if scopes is equal to a truthy value.
```
(scopes: string | string[] | AuthScopes, withinMillisecondsOfExpiry?: number) => boolean
```
isScopeChanged
Whether the access token includes the given scopes if they are provided.
```
(scopes: string | string[] | AuthScopes) => boolean
```
isScopeIncluded
Whether the access token includes the given scopes.
```
(scopes: string | string[] | AuthScopes) => boolean
```

isExpired

Whether the access token is expired.

(withinMillisecondsOfExpiry?: number) => boolean

toObject
Converts an object with data into a Session.
```
() => SessionParams
```
equals
Checks whether the given session is equal to this session.
```
(other: Session) => boolean
```
toPropertyArray
Converts the session into an array of key-value pairs.
```
(returnUserData?: boolean) => [string, string | number | boolean][]
```

OnlineAccessInfo

associated_user
The user associated with the access token.
```
OnlineAccessUser
```
associated_user_scope
The effective set of scopes for the session.
```
string
```
expires_in
How long the access token is valid for, in seconds.
```
number
```

OnlineAccessUser

account_owner
Whether the user is the account owner.
```
boolean
```
collaborator
Whether the user is a collaborator.
```
boolean
```
email
The user's email address.
```
string
```
email_verified
Whether the user has verified their email address.
```
boolean
```
first_name
The user's first name.
```
string
```
id
The user's ID.
```
number
```
last_name
The user's last name.
```
string
```
locale
The user's locale.
```
string
```

AuthScopes

A class that represents a set of access token scopes.

has
Checks whether the current set of scopes includes the given one.
```
(scope: string | string[] | AuthScopes) => boolean
```
equals
Checks whether the current set of scopes equals the given one.
```
(otherScopes: string | string[] | AuthScopes) => boolean
```
toString
Returns a comma-separated string with the current set of scopes.
```
() => string
```
toArray
Returns an array with the current set of scopes.
```
(returnOriginalScopes?: boolean) => any[]
```

SessionParams

[key: string]
```
any
```
accessToken
The access token for the session.
```
string
```
expires
The date the access token expires.
```
Date
```
id
The unique identifier for the session.
```
string
```
isOnline
Whether the access token in the session is online or offline.
```
boolean
```
onlineAccessInfo
Information on the user for the session. Only present for online sessions.
```
OnlineAccessInfo | StoredOnlineAccessInfo
```
refreshToken
The refresh token for the session.
```
string
```
refreshTokenExpires
The date the refresh token expires.
```
Date
```
scope
The scopes for the access token.
```
string
```
shop
The Shopify shop domain.
```
string
```
state
The state of the session. Used for the OAuth authentication code flow.
```
string
```

StoredOnlineAccessInfo

Omit<OnlineAccessInfo, 'associated_user'> & {
  associated_user: Partial<OnlineAccessUser>;
}

StorefrontContext

Provides utilities that apps can use to make requests to the Storefront API.

graphql
Method for interacting with the Shopify Storefront GraphQL API If you're getting incorrect type hints in the Shopify template, follow [these instructions](https://github.com/Shopify/shopify-app-template-react-router/tree/main#incorrect-graphql-hints).
```
GraphQLClient<StorefrontOperations>
```

Examples

/app/routes/**.ts

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

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

export const loader = async ({request}: LoaderFunctionArgs) => {

const {storefront, liquid} = await authenticate.public.appProxy(request);

if (!storefront) {

return new Response();

}

const response = await storefront.graphql(

`#graphql

query productTitle {

products(first: 1) {

nodes {

title

}

}`,

);

const body = await response.json();

const title = body.data.products.nodes[0].title;

return liquid(`Found product ${title} from {{shop.name}}`);

};

Examples

Description

Authenticate and fetch product information

/app/routes/**.ts

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

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

export const loader = async ({request}: LoaderFunctionArgs) => {
  const {storefront, liquid} = await authenticate.public.appProxy(request);

  if (!storefront) {
    return new Response();
  }

  const response = await storefront.graphql(
    `#graphql
    query productTitle {
      products(first: 1) {
        nodes {
          title
        }
      }
    }`,
  );
  const body = await response.json();

  const title = body.data.products.nodes[0].title;

  return liquid(`Found product ${title} from {{shop.name}}`);
};

Description

Use the `admin` object to interact with the admin GraphQL API.

app/routes/**\/.ts

import { json } from "react-router";
import { authenticate } from "../shopify.server";

export async function action({ request }: ActionFunctionArgs) {
  const { admin } = await authenticate.public.appProxy(request);

  const response = await admin.graphql(
    `#graphql
    mutation populateProduct($input: ProductInput!) {
      productCreate(input: $input) {
        product {
          id
        }
      }
    }`,
    {
      variables: {
        input: { title: "Product Name" }
      }
    }
  );

  const productData = await response.json();
  return ({ data: productData.data });
}

Description
Use the `liquid` helper to render a `Response` with Liquid content using the shop's theme. See the [Liquid reference](https://shopify.dev/docs/api/liquid) for all the features it enables.
/app/routes/**\/*.ts
```
import {authenticate} from "~/shopify.server"

export async function loader({ request }) {
  const {liquid} = await authenticate.public.appProxy(request);

  return liquid("Hello {{shop.name}}");
}
```

Description

Set the `layout` option to `false` to render the Liquid content without a theme.

/app/routes/**\/*.ts

import {authenticate} from "~/shopify.server"

export async function loader({ request }) {
  const {liquid} = await authenticate.public.appProxy(request);

  return liquid(
    "Hello {{shop.name}}",
    { layout: false }
  );
}

Description

Handle form submissions through an app proxy.

app/routes/apps.proxy.my-action.tsx

import { redirect } from "react-router";
import { authenticate } from "~/shopify.server";

export async function loader({ request }) {
  const { liquid } = await authenticate.public.appProxy(request);

  return liquid(`
    <form method="post" action="/apps/proxy/my-action">
      <input type="text" name="field" />
      <button type="submit">Submit</button>
    </form>
  `);
}

export async function action({ request }) {
  await authenticate.public.appProxy(request);

  const formData = await request.formData();
  const field = formData.get("field")?.toString();

  // Perform actions here
  if (field) {
    console.log("Field:", field);
  }

  // Return to the form page
  return redirect("/apps/proxy/my-action");
}

Description

Get the session for the shop that initiated the request to the app proxy.

app/routes/**\/.ts

import { json } from "react-router";
import { authenticate } from "../shopify.server";
import { getMyAppModelData } from "~/db/model.server";

export const loader = async ({ request }) => {
  // Get the session for the shop that initiated the request to the app proxy.
  const { session } =
    await authenticate.public.appProxy(request);

  // Use the session data to make to queries to your database or additional requests.
  return (
    await getMyAppModelData({shop: session.shop})
  );
};

Description

Use the `storefront` object to interact with the GraphQL API.

app/routes/**\/.ts

import { json } from "react-router";
import { authenticate } from "../shopify.server";

export async function action({ request }: ActionFunctionArgs) {
  const { storefront } = await authenticate.public.appProxy(request);

  const response = await storefront.graphql(
    `#graphql
    query blogIds {
      blogs(first: 10) {
        edges {
          node {
            id
          }
        }
      }
    }`
  );

  return (await response.json());
}