App reviews, troubleshooting, and recommendations
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;
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024