App Bridge React and the new auth method

Highlighted
Tourist
11 0 1

Hello,

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 />
            </Provider>
        </AppProvider>
    );
}

. Currently I have my Providers wrapping  my Main component

0 Likes
Highlighted
Shopify Staff
Shopify Staff
49 10 15

Hi there,

The docs for the new auth can be found here: https://shopify.dev/tools/app-bridge/authentication.

There's an example of using the `authenticatedFetch` helper here: https://shopify.dev/tools/app-bridge/authentication#frontend-changes

0 Likes
Highlighted
Shopify Staff
Shopify Staff
6 0 3

@andreiasdfg 

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