Need some help with session token authentication for Shopify Apps

[MilesLawrence]

Hello, I was having a bit of trouble with using session token authentication for my test app and could use some advice. For context, I am talking about the improved and faster way of loading apps as described here: https://www.shopify.com.au/partners/blog/embedded-apps 

I followed the tutorial as best as I could, but it seems the backend portion was written for ruby and I wasn't sure what to do there for my NodeJS app built via the shopify-cli.

So I skipped that part for now and got to work on the frontend changes, following the section for using session token helpers directly. I tried my best to fit the functional react code to work with the examples provided, and here is what my _app.js looks like right now:

import fetch from "node-fetch";
import ApolloClient from "apollo-client";
import { ApolloProvider } from "react-apollo";
import App, { Container } from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider, useAppBridge } from "@shopify/app-bridge-react";
import { getSessionToken, authenticatedFetch } from "@shopify/app-bridge-utils";
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Cookies from "js-cookie";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";

let app;

const AuthSettings = () => {
  app = useAppBridge();
  console.log(`app: ${app}`);
  return null;
}

const client = new ApolloClient({
  link: new HttpLink({
    credentials: 'same-origin',
    fetch: authenticatedFetch(app)
  }),
  cache: new InMemoryCache()
});

function MyApp({ Component, pageProps, router }) {
  if (typeof window === `undefined` || !router.query.shop) return null;

  const shopOrigin = Cookies.get("shopOrigin");

  const config = {
    apiKey: API_KEY,
    shopOrigin: shopOrigin,
    forceRedirect: true
  }

  window.shop = router.query.shop;

  return (
    <React.Fragment>
      <Provider config={config}>
        <AppProvider i18n={translations}>
          <AuthSettings />
          <ApolloProvider client={client}>
            <Component {...pageProps} />
          </ApolloProvider>
        </AppProvider>
      </Provider>
    </React.Fragment>
  );
}

export default MyApp;

It's not the cleanest at the moment, I just wanted to be able to implement the authentication so it doesn't redirect on first load. Currently it still redirects the first time, and the OAuth screen just turns white. However, the next time I open the app again, it works normally now and the console.log inside AuthSettings is finally working.

What am I doing wrong? Or what could I be doing better? Are the backend changes necessary to achieving the authentication described in the blog article I linked, and if so, how would I go about it in a nodeJS app? Thank you in advanced to anyone who can help.

[AppUser17]

Were you able to find any solution for it ?