App Bridge functions app.getState() and getSessionToken(app) do not resolve

Solved
Highlighted
Tourist
10 0 2

We're running into an issue where app.getState() and getSessionToken(app) do not resolve - no results or errors are returned. authenticatedFetch has the same issue but we believe it is due to getSessionToken(app). We can can confirm that the app bridge is loaded and app exists.

Here is the code:

import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Router, Route, Switch } from 'react-router-dom';
import { Context, Provider } from '@shopify/app-bridge-react';
import { authenticatedFetch, getSessionToken } from '@shopify/app-bridge-utils';
import COMPONENT from 'app/component.jsx';


let component = COMPONENT;
let apiKey = 'XXXXXXXXXXXX';
let shop = 'YYYYYYYYYYY';

const MyApp = () => {
  const app = useContext(Context);
  if (app) {
    console.log(app)
    
    app.getState()
    .then((state) => console.log('state'))
    .catch((err) => console.log(err));

    getSessionToken(app)
    .then((result) => console.log(result))
    .catch((err) => console.log(err));

    authenticatedFetch(app)('https://www.espn.com/').then(response => console.log(response)).catch((err) => console.log(err))
  }

  return (
    <Router history={createBrowserHistory()}>
      <Switch>
        <Route path='/' component={component} />
      </Switch>
    </Router>
  );
};

ReactDOM.render(
  <Provider config={{ apiKey: apiKey, shopOrigin: shop }}>
    <MyApp />
  </Provider>
, document.getElementById('root'));

The app variable looks like this:

app.png

What are we doing wrong? We just want to grab the session token to replace the cookies for authenticated AJAX calls.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
33 2 9

This might be obvious, but just to be sure: you're trying to use App Bridge within the Shopify Admin, right? As in your app has been loaded as an embedded app in Shopify?

The most common reason why `app.getState()` wouldn't resolve is that our JS or the browser is blocking messages on the `postMessage` channel we use to communicate. This can happen if the app isn't running within the Shopify Admin, or if the shop you instantiated App Bridge with is wrong. I _think_ we might also enforce that the origin of the page that's running the app needs to match the origin of the app's application URL, but I'm not 100% sure on that.

Anyway, I'd check those things first.

0 Likes
Highlighted
Tourist
10 0 2

@Michael_RagalieYes, the app has been loaded as an embedded app in Shopify. We see the postMessage channel errors only when testing locally, but not in production. Presumably this is because the app is not loaded within the Shopify Admin in development. Ah, so the app is on a different subdomain than the application URL (abc.xxxxx.com vs def.xxxxx.com). Does that matter?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
33 2 9

You'll need to load the app in the Shopify Admin in development too in order to use App Bridge. You can use ngrok to make a public URL for your app, and then create a separate "draft" Shopify app to test against your local (development) app. Some instructions here: https://www.shopify.ca/partners/blog/shopify-admin-authenticate-app

Once you have your local app setup, you can install that app onto one of your test stores from the Partners Dashboard. More here: https://shopify.dev/concepts/app-store/getting-your-app-approved/testing-your-app-before-submitting#...

0 Likes
Highlighted
Tourist
10 0 2

Yup, I understand that is necessary for the development app.

However, I can confirm that the app is loaded within the Shopify Admin and the App Bridge is loaded in production (I can see the app instance with const app = useContext(Context);). Is there another reason why app.getState()and getSessionToken(app) do not resolve? When I set app = null, these two functions resolve to an error, but nothing is resolved when the actual app is used.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
50 8 17

Are you loading your app from a different domain than the one you supplied in Partners Dashboard as your app's URL (under 'App Setup')? App Bridge will only accept messages from the domain specified in Partners Dashboard.

0 Likes
Highlighted
Tourist
10 0 2

Hi @iain-campbell,

Yes, the app is hosted on a CDN with a different subdomain (def.xxxx.com) than the one specified on the app URL field (abc.xxxx.com). Is there a way to allow messages from multiple subdomains?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
50 8 17

This is an accepted solution.

Is there a way to allow messages from multiple subdomains?

Unfortunately not; the entire URL origin must match.

1 Like