# App proxy [App proxies](/docs/apps/online-store/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` ### Authenticate and fetch product information ```typescript import type {LoaderFunctionArgs} from '@remix-run/node'; 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}}`); }; ``` ## authenticate.public.appProxy Authenticates requests coming to the app from Shopify app proxies. ### AuthenticateAppProxy #### Returns: Promise #### Params: - request: Request export type AuthenticateAppProxy = ( request: Request, ) => Promise; ### AppProxyContext ### 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. ### 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. ### storefront No session is available for the shop that made this request. Therefore no method for interacting with the Storefront API is available. ### liquid A utility for creating a Liquid Response. ### LiquidResponseFunction #### Returns: Response #### Params: - body: string - initAndOptions: number | (ResponseInit & Options) export type LiquidResponseFunction = ( body: string, initAndOptions?: number | (ResponseInit & Options), ) => Response; ### Options ### layout Whether to use the shop's theme layout around the Liquid content. ### AppProxyContextWithSession ### 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. ### admin Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request. ### storefront Method for interacting with the Shopify Storefront Graphql API for the store that made the request. ### liquid A utility for creating a Liquid Response. ### 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. ### shop The Shopify shop domain, such as `example.myshopify.com`. ### state The state of the session. Used for the OAuth authentication code flow. ### isOnline Whether the access token in the session is online or offline. ### scope The desired scopes for the access token, at the time the session was created. ### expires The date the access token expires. ### accessToken The access token for the session. ### onlineAccessInfo Information on the user for the session. Only present for online sessions. ### isActive Whether the session is active. Active sessions have an access token that is not expired, and has the given scopes. ### isScopeChanged Whether the access token has the given scopes. ### isExpired Whether the access token is expired. ### toObject Converts an object with data into a Session. ### equals Checks whether the given session is equal to this session. ### toPropertyArray Converts the session into an array of key-value pairs. ### OnlineAccessInfo ### expires_in How long the access token is valid for, in seconds. ### associated_user_scope The effective set of scopes for the session. ### associated_user The user associated with the access token. ### OnlineAccessUser ### id The user's ID. ### first_name The user's first name. ### last_name The user's last name. ### email The user's email address. ### email_verified Whether the user has verified their email address. ### account_owner Whether the user is the account owner. ### locale The user's locale. ### collaborator Whether the user is a collaborator. ### AuthScopes A class that represents a set of access token scopes. ### has Checks whether the current set of scopes includes the given one. ### equals Checks whether the current set of scopes equals the given one. ### toString Returns a comma-separated string with the current set of scopes. ### toArray Returns an array with the current set of scopes. ### SessionParams ### [key: string] ### id The unique identifier for the session. ### shop The Shopify shop domain. ### state The state of the session. Used for the OAuth authentication code flow. ### isOnline Whether the access token in the session is online or offline. ### scope The scopes for the access token. ### expires The date the access token expires. ### accessToken The access token for the session. ### onlineAccessInfo Information on the user for the session. Only present for online sessions. ### StoredOnlineAccessInfo Omit & { associated_user: Partial; } ### AdminApiContext ### rest Methods for interacting with the Shopify Admin REST API There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs. ### graphql Methods for interacting with the Shopify Admin GraphQL API ### RestClientWithResources RemixRestClient & {resources: Resources} ### RemixRestClient ### session ### get Performs a GET request on the given path. ### post Performs a POST request on the given path. ### put Performs a PUT request on the given path. ### delete Performs a DELETE request on the given path. ### GetRequestParams ### path The path to the resource, relative to the API version root. ### type The type of data expected in the response. ### data The request body. ### query Query parameters to be sent with the request. ### extraHeaders Additional headers to be sent with the request. ### tries The maximum number of times the request can be made if it fails with a throttling or server error. ### DataType ### JSON ### GraphQL ### URLEncoded ### HeaderParams Headers to be sent with the request. Record ### PostRequestParams GetRequestParams & { data: Record | string; } ### GraphQLClient #### Returns: interface Promise { /** * 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(onfulfilled?: ((value: T) => TResult1 | PromiseLike) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike) | undefined | null): Promise; /** * 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(onrejected?: ((reason: any) => TResult | PromiseLike) | undefined | null): Promise; }, interface Promise {}, Promise: PromiseConstructor, interface Promise { readonly [Symbol.toStringTag]: string; }, interface Promise { /** * 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; } #### Params: - query: Operation extends keyof Operations - options: GraphQLQueryOptions export type GraphQLClient = < Operation extends keyof Operations, >( query: Operation, options?: GraphQLQueryOptions, ) => Promise>; ### GraphQLQueryOptions ### variables The variables to pass to the operation. ### apiVersion The version of the API to use for the request. ### headers Additional headers to include in the request. ### tries The total number of times to try the request if it fails. ### ApiVersion ### October22 ### January23 ### April23 ### July23 ### October23 ### January24 ### April24 ### Unstable ### StorefrontContext ### 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-remix/tree/main#incorrect-graphql-hints). ## Related - [Admin API context](/docs/api/shopify-app-remix/apis/admin-api) - [Storefront API context](/docs/api/shopify-app-remix/apis/storefront-api) - [Liquid reference](/docs/api/liquid) ## Examples [App proxies](/docs/apps/online-store/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` ### session ### Using the session object ```typescript import { json } from "@remix-run/node"; 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 json( await getMyAppModelData({shop: session.shop}) ); }; ``` ### admin ### Interacting with the Admin API ```typescript import { json } from "@remix-run/node"; 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 json({ data: productData.data }); } ``` ### storefront ### Interacting with the Storefront API ```typescript import { json } from "@remix-run/node"; 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 json(await response.json()); } ``` ### liquid ### Rendering liquid content ```typescript import {authenticate} from "~/shopify.server" export async function loader({ request }) { const {liquid} = await authenticate.public.appProxy(request); return liquid("Hello {{shop.name}}"); } ``` ### Rendering liquid content without a layout ```typescript import {authenticate} from "~/shopify.server" export async function loader({ request }) { const {liquid} = await authenticate.public.appProxy(request); return liquid( "Hello {{shop.name}}", { layout: false } ); } ``` ### Rendering a form in a Liquid response ```typescript import { redirect } from "@remix-run/node"; 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"); } ```