FROM CACHE - en_header

App Bridge React and the new auth method

andreiasdfg
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

Replies 10 (10)
Trish_Ta
Shopify Staff
Shopify Staff
58 13 27

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

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

rezaansyed
Shopify Staff
Shopify Staff
7 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(),
});
eCreateStudio
Tourist
4 0 2

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.

 

rezaansyed
Shopify Staff
Shopify Staff
7 0 3

Hi @eCreateStudio ,

What are the errors you are seeing on your end?

eCreateStudio
Tourist
4 0 2

Hi @rezaansyed ,

I wasn't seeing the authorized header in my app calls, but I think I misunderstood the purpose of the Apollo client. On further reading it looks like this is only for GraphQL calls, and was in my code from the original NodeJS and React example I followed.

I was able to successfully obtain a JWT token from the App Bridge using getSessionToken(app). Since I use REST API calls instead of GraphQL, can I use the JWT token for an authorization header for the REST calls, or can I only use an Access Token for REST?

I can't get the shopify-koa-auth module to work correctly with Safari, so trying to rework my app for JWT tokens.

Appreciate your feedback, Scott.

MilesLawrence
Tourist
12 1 4

Hey @eCreateStudio 

I just wanted to ask since I'm having trouble setting up App Bridge React myself, how did you get the JWT token in _app.js while using the app-bridge-react's Provider component? Did you change the app into a functional component? Or something else?

eCreateStudio
Tourist
4 0 2

Hi @MilesLawrence 

I used the Context.Consumer from @shopify/app-bridge-react to give access to the App Bridge app element. The code I used, which just prints the JWT session token to screen is:

     <Provider config={config}>
        <AppProvider i18n={translations}>
          <Context.Consumer>
            {app => {
              getSessionToken(app)
                .then ( response => {
                  console.log('Session token: ', response);
                });
              console.log('Page props: ', pageProps);
              return (
                  <Component {...pageProps} />
              )
            }}
          </Context.Consumer>
        </AppProvider>
      </Provider>

 

Hope this helps 🙂

assafl
Excursionist
13 0 3

Hi @rezaansyed, @eCreateStudio  thank you for your inputs, 

My api calls are done from an external file where the bridge is not defined

How can I access the app variable that should be a parameter to the function call

authenticatedFetch(app)(uri, options)

 

My calls so far are based on the fetch api were no special app reference is required:

return fetch('/some/uri')
        .then(res => res.json());

 

My app definition goes like that:

<Provider config={config}>
          <AppProvider i18n={translations}>
              <Component {...pageProps} />
          </AppProvider>
</Provider>
Antonio84
Shopify Partner
35 1 2

How to use the authenticatedFetch in script tag?

If I pass the header with a custom ajax call it is rejected by shopify, because I can do it in the admin URL. 

Louise_Elmose_H
Shopify Partner
78 2 19

I have the same setup as assafl 

 

-Louise