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

0 Likes
Trish_Ta
Shopify Staff
Shopify Staff
56 13 21

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
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.

 

0 Likes
rezaansyed
Shopify Staff
Shopify Staff
7 0 3

Hi @eCreateStudio ,

What are the errors you are seeing on your end?

0 Likes
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.

0 Likes
MilesLawrence
Tourist
12 1 2

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?

0 Likes
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
Tourist
9 0 2

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
Tourist
21 0 0

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. 

0 Likes