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

Solved
shophelp20
Excursionist
11 0 4

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.

Replies 11 (11)
lucasgomide
New Member
1 0 0

I'm getting the same error, in my case: The react app is being loaded inside an Iframe. Until now I was not able to make my app works this way. 

Anyway, still not clear why the promise is not resolved or reject 

Kris_Doyle
Shopify Partner
91 0 20

I'm having the exact same issue described here, but it's intermittent. If I run two browsers with the same app locally, once in a while, Axios will hang since getSessionToken never resolves to anything, so the whole thing just hangs with no message. This is worst case because there's no way to know that something went wrong without wrapping the whole thing in some kind of weird hacky timer thing (which I'd like to avoid).

 

Mainly just wanted to mention that I'm also running into this problem as I'm converting from cookies to session tokens. Oddly enough, if I do a hard refresh, it starts working again, but if I only refresh the app frame, it doesn't.

 

Also, the app does meet the criteria of the origin URL matching and being inside the app frame.

 

Help