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
50 10 16

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
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(),
});
1 Like
Highlighted
New Member
4 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.

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
7 0 3

Hi @eCreateStudio ,

What are the errors you are seeing on your end?

0 Likes
Highlighted
New Member
4 0 0

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
Highlighted
New Member
8 0 0

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
Highlighted
New Member
4 0 0

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

0 Likes