I am trying to implement app bridge v2 without next.js in a stand-alone front-end app that uses react only. However, the app is neither embedded in the Shopify admin nor there is any sign of session token. Also, the callback URL I've configured in shopify is the tunnel version of my app.
For some reason, I'm also not getting the host in Shopify's query URL. There are only three params - hmac, shop and timestamp.
Here is my code:
import './App.css';
import Home from "./pages/Home"
import enTranslations from '@shopify/polaris/locales/en.json';
import {AppProvider, Page} from '@shopify/polaris';
import {Provider} from '@shopify/app-bridge-react';
import {useEffect} from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import FreshInstall from "./pages/FreshInstall";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import { useAppBridge } from "@shopify/app-bridge-react";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { Redirect } from "@shopify/app-bridge/actions";
function userLoggedInFetch(app) {
const fetchFunction = authenticatedFetch(app);
return async (uri, options) => {
const response = await fetchFunction(uri, options);
if (
response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1"
) {
const authUrlHeader = response.headers.get(
"X-Shopify-API-Request-Failure-Reauthorize-Url"
);
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
return null;
}
return response;
};
}
function MyProvider(props) {
console.log("in my provider");
const app = useAppBridge();
const client = new ApolloClient({
fetch: userLoggedInFetch(app),
fetchOptions: {
credentials: "include",
},
});
const Component = props.Component;
return (
<ApolloProvider client={client}>
<Router>
<Page>
<Switch>
<Route path="/home">
<Home/>
</Route>
<Route path="/">
<FreshInstall/>
</Route>
</Switch>
</Page>
</Router>
</ApolloProvider>
);
}
const config = {
apiKey: '',
host: '',
forceRedirect: false
};
function App() {
let search = window.location.search;
let params = new URLSearchParams(search);
let host = params.get('shop');
config.host = btoa(host);
return (
<AppProvider i18n={enTranslations}>
<Provider config={config}>
<MyProvider></MyProvider>
</Provider>
</AppProvider>
);
}
export default App;
