Implementing App Bridge without Next.js

Reeti
New Member
2 0 0

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;
Reply 1 (1)
ElanaK
Shopify Staff
11 2 1

Hi Reeti,

I'm happy to help you troubleshoot. Just to clarify a bit, have you gone through the setup on the Partner's portal to install the app in a dev store? If you have a custom app, you can generate an installation link or with a public app you can test it in your own dev shop. Click "Test your app" on the App Details page to install in your dev shop. That should take care of embedding the app. In your code, you will also want to set the "forceRedirect" option in your config to "true", so your app redirects back to Admin, where you should have access to the "host" param.

Re: the callback URL. It should be <your-ngrok-tunnel>/auth/callback

Please let me know if that helps and you run into any other issues.

Best,

Elana