App Bridge React and the new auth method

[andreiasdfg]

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

[Trish_Ta]

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

[rezaansyed]

@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]

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]

Hi @eCreateStudio ,

What are the errors you are seeing on your end?

[eCreateStudio]

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]

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]

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]

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>

[Louise_Elmose_H]

I have the same setup as assafl - hope that someone has some input to how to proceed.

Thanks,

-Louise

[Antonio84]

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. 

[1080]

@andreiasdfg  what was the current method you using I can't see the any link was active mention by the shopify staff.