App Bridge React and the new auth method

11 0 1


I can't find any documentation on authenticatedFetch so I'm not sure exactly how I'm supposed to add that to my code

const App = () => {
    const config = {
        apiKey: process.env.REACT_APP_SHOPIFY_API_KEY, 
        shopOrigin: window.getUrlParameter('shop'), 
        forceRedirect: true

    return (
        <AppProvider i18n={enTranslations}>
            <Provider config={config}>
                <Main />

. Currently I have my Providers wrapping  my Main component

Shopify Staff
Shopify Staff
49 10 15

Hi there,

The docs for the new auth can be found here:

There's an example of using the `authenticatedFetch` helper here:

Shopify Staff
Shopify Staff
6 0 3


If you already have an App Bridge instance in your app, you can make authenticated requests to your app backend by using authenticatedFetch as follows:

const appbridge = createApp({
  apiKey: API_KEY,
  shopOrigin: window.getUrlParameter('shop')

// authenticated request to backend
authFetch(app)(uri, options);

 If you are using ApolloClient, you can set it up as follows:

import ApolloClient from 'apollo-client';
import {authenticatedFetch} from '@shopify/app-bridge-utils';
import createApp from '@shopify/app-bridge';
import {HttpLink} from 'apollo-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';
const app = createApp({
  apiKey: API_KEY,
  shopOrigin: window.getUrlParameter('shop')
const client = new ApolloClient({
  link: new HttpLink({
    credentials: 'same-origin',
    fetch: authenticatedFetch(app), // ensures all apollo client triggered requests are authenticated
  cache: new InMemoryCache(),
1 Like
New Member
2 0 0

Hi @rezaansyed 

How would you set up the Apollo client version if importing the Provider component from '@shopify/app-bridge-react'?

For the code:

fetch: authenticatedFetch(app)

Can the app component be directly replaced by the Provider component? I tried the hook useAppBridge to access the app component as per the npm page for @shopify/app-bridge-react, but this didn't seem to work.

Appreciate your feedback.