Implementing App Bridge without Next.js

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(

            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}>
                        <Route path="/home">
                        <Route path="/">

const config = {
    apiKey: '',
    host: '',
    forceRedirect: false

function App() {
    let search =;
    let params = new URLSearchParams(search);
    let host = params.get('shop'); = btoa(host);
    return (
        <AppProvider i18n={enTranslations}>
            <Provider config={config}>

export default App;
Replies 2 (2)
Shopify Staff
Shopify Staff
14 3 2

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.



Shopify Partner
5 0 0

I got host from nodejs.

But when,  I run the react app .

I got an error

Attempting to bind to HOST environment variable: cmVhY3RhcHA0MDQubXlzaG9waWZ5LmNvbS9hZG1pbg
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: