Skip to main content

AppProvider
component

Sets up your app to look like the admin

Adds Polaris Web components to the route. If embedded is true and apiKey is provided, then the App Bridge script will be added to the page.

Anchor to appproviderpropsAppProviderProps

Props for the AppProvider component.

NonEmbeddedProps | EmbeddedProps
Anchor to EmbeddedProps

EmbeddedProps

Anchor to apiKey
apiKey
string
required

The API key for your Shopify app. This is the Client ID from the Partner Dashboard.

When using the Shopify CLI, this is the SHOPIFY_API_KEY environment variable. If you're using the environment variable, then you need to pass it from the loader to the component.

Anchor to children
children
React.ReactNode
required
Anchor to embedded
embedded
true
required

If this route should be rendered inside the Shopify admin.

Setting this to true will include the App Bridge script on the page. If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin.

Setting this to false will not include the App Bridge script on the page.

Anchor to NonEmbeddedProps

NonEmbeddedProps

Anchor to children
children
React.ReactNode
required
Anchor to embedded
embedded
false

If this route should be rendered inside the Shopify admin.

Setting this to false means only Polaris Web components will be added to the route, not App Bridge.

Setting this to true will include the App Bridge script on the page.

Was this section helpful?

Anchor to examplesExamples

Anchor to example-set-up-appprovider-for-an-embedded-routeSet up AppProvider for an embedded route

Wrap your route in the AppProvider component and pass in your API key.

Anchor to example-set-up-appprovider-for-a-non-embedded-routeSet up AppProvider for a non-embedded route

Add Polaris web components to the route, without adding the App Bridge script.

Was this section helpful?

Set up AppProvider for an embedded route

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

import {useLoaderData} from 'react-router';
import {authenticate} from '~/shopify.server';
import {AppProvider} from '@shopify/shopify-app-react-router/react';

export async function loader({ request }) {
await authenticate.admin(request);

return { apiKey: process.env.SHOPIFY_API_KEY };
}

export default function App() {
const { apiKey } = useLoaderData();

return (
<AppProvider embedded apiKey={apiKey}>
<Outlet />
</AppProvider>
);
}

Anchor to relatedRelated

Learn more about Polaris Web components.Polaris Web components
Learn more about App Bridge.App bridge