---
title: Interacting with Shopify Admin
description: >-
  Once you [set up your backend](/docs/api/shopify-app-remix#shopify-app), you
  can use the [`authenticate.admin`
  function](/docs/api/shopify-app-remix/authenticate/admin) to integrate your
  app with Shopify Admin.


  This function works for both embedded and non-embedded apps, and ensures the
  app is installed on the current store.


  It returns a context with functions to enable loaders and actions to respond
  to any requests made by or in Shopify Admin.


  This page goes over the basics of authenticating those requests, and some of
  the things you can do with it, like querying the Admin API.
api_version: v3
api_name: shopify-app-remix
source_url:
  html: 'https://shopify.dev/docs/api/shopify-app-remix/v3/guide-admin'
  md: 'https://shopify.dev/docs/api/shopify-app-remix/v3/guide-admin.md'
---

# Interacting with Shopify Admin

Once you [set up your backend](https://shopify.dev/docs/api/shopify-app-remix#shopify-app), you can use the [`authenticate.admin` function](https://shopify.dev/docs/api/shopify-app-remix/authenticate/admin) to integrate your app with Shopify Admin.

This function works for both embedded and non-embedded apps, and ensures the app is installed on the current store.

It returns a context with functions to enable loaders and actions to respond to any requests made by or in Shopify Admin.

This page goes over the basics of authenticating those requests, and some of the things you can do with it, like querying the Admin API.

***

## Authenticating requests

To authenticate admin requests you can call `authenticate.admin(request)` in a loader or an action.

If there's a session for this user, then this loader will return null. If there's no session for the user, then the loader will throw the appropriate redirect Response.

Tip

If you are authenticating more than one route, then we recommend using [Remix layout routes](https://remix.run/docs/en/1.18.1/file-conventions/routes-files#layout-routes) to automatically authenticate them.

### Examples

* #### Authenticating requests

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {LoaderFunction, ActionFunction} from '@remix-run/node';

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

  export const loader: LoaderFunction = async ({request}) => {
    await authenticate.admin(request);

    // App logic

    return null;
  };

  export const action: ActionFunction = async ({request}) => {
    await authenticate.admin(request);

    // App logic

    return null;
  };
  ```

## Headers

The OAuth process can't happen inside the admin iframe, and this package is capable of detecting that scenario and properly redirecting using the [Remix `ErrorBoundary`](https://remix.run/docs/en/main/guides/errors) export to set the correct headers for App Bridge.

Use the abstractions provided by this package in your authenticated routes, to automatically set up the error and headers boundaries to redirect outside the iframe when needed.

Tip

You can also add this to a [Remix layout](https://remix.run/docs/en/main/file-conventions/route-files-v2) if you want to authenticate more than one route, but make sure to call the Shopify boundary methods whenever you need to add your own exports.

### Examples

* #### Configure header boundaries

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {useRouteError} from '@remix-run/react';
  import {boundary} from '@shopify/shopify-app-remix';

  export function ErrorBoundary() {
    return boundary.error(useRouteError());
  }

  export const headers = (headersArgs) => {
    return boundary.headers(headersArgs);
  };
  ```

## Authenticating cross-origin admin requests

If your Remix server is authenticating an admin extension, then a request from the extension to Remix will be cross-origin.

Here `authenticate.admin` provides a `cors` function to add the required cross-origin headers.

### Examples

* #### Add cross-origin headers

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {json, LoaderFunction} from '@remix-run/node';

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

  export const loader: LoaderFunction = async ({request}) => {
    const {cors} = await authenticate.admin(request);

    // App logic

    return cors(json({my: 'data'}));
  };
  ```

## Using the GraphQL API

Once a request is authenticated, `authenticate.admin` will return an `admin` object that contains a GraphQL client that can interact with the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql).

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/guide-graphql-types)

[Typing GraphQL operations](https://shopify.dev/docs/api/shopify-app-remix/guide-graphql-types)

### Examples

* #### Make GraphQL requests

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {ActionFunction, json} from '@remix-run/node';

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

  export const action: ActionFunction = async ({request}) => {
    const {admin} = await authenticate.admin(request);

    const response = await admin.graphql(
      `#graphql
      mutation populateProduct($input: ProductInput!) {
        productCreate(input: $input) {
          product {
            id
          }
        }
      }`,
      {
        variables: {
          input: {
            title: 'New product',
            variants: [{price: 100}],
          },
        },
      },
    );
    const parsedResponse = await response.json();

    return json({data: parsedResponse.data});
  };
  ```

## Using the GraphQL API in background jobs

You may need to interact with the Admin API when working outside of Shopify requests. To do so use the `unauthenticated.admin` function.

This enables apps to integrate with 3rd party services and perform background tasks.

Caution

This function doesn't perform **any** validation and shouldn't rely on raw user input.

When using this function, consider the following:

#### Background tasks

Apps should ensure that the shop domain is authenticated when enqueueing jobs.

#### 3rd party service requests

Apps must obtain the shop domain from the 3rd party service in a secure way.

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/unauthenticated/unauthenticated-admin)

[Unauthenticated Admin](https://shopify.dev/docs/api/shopify-app-remix/unauthenticated/unauthenticated-admin)

### Examples

* #### Make GraphQL requests in background jobs

  ##### /app/jobs/\*\*/\*.tsx

  ```tsx
  // /background-jobs/**/*.ts
  import { unauthenticated } from "../shopify.server";

  // Background job set up

  const shop = 'mystore.myshopify.com'
  const { admin } = await unauthenticated.admin(shop);

  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();

  // Background job complete
  ```

## Using the REST API (Deprecated)

**Shopify is [all-in on graphql](https://www.shopify.com/ca/partners/blog/all-in-on-graphql). In the next major release, the REST API will be removed from the `@shopify/shopify-app-remix` package.If the `removeRest` [future flag](https://shopify.dev/docs/api/shopify-app-remix/v3/guide-future-flags) is true, then the REST API will not be available.**

Once a request is authenticated, `authenticate.admin` will return an `admin` object that contains a REST client that can interact with the [REST Admin API](https://shopify.dev/docs/api/admin-rest).

You can also import a set of resource classes from the `@shopify/shopify-api` package, which is included in `@shopify/shopify-app-remix`.

These classes map to the individual REST endpoints, and will be returned under `admin.rest.resources`.

### Examples

* #### Interacting with the REST API

  ##### /app/shopify.server.ts

  ```tsx
  import {shopifyApp} from '@shopify/shopify-app-remix/server';
  import {restResources} from '@shopify/shopify-api/rest/admin/2023-07';

  const shopify = shopifyApp({
    restResources,
    // ...etc
  });

  export const authenticate = shopify.authenticate;
  ```

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {LoaderFunction, json} from '@remix-run/node';
  import {useRouteError} from '@remix-run/react';

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

  export const loader: LoaderFunction = async ({request}) => {
    const {admin, session} = await authenticate.admin(request);

    // Use REST resources
    const data = await admin.rest.resources.Product.count({session});

    // Or use the REST client
    const response = await admin.rest.get({path: 'products/count'});
    const data = response.body;

    return json({productCount: data.count});
  };
  ```

## Resources

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/authenticate/admin)

[authenticate.admin](https://shopify.dev/docs/api/shopify-app-remix/authenticate/admin)