When installing the app the first time using a test store - I see that this Provider from app-bridge-react redirects the application to the Shopify admin URL..
https://admin.shopify.com/store/postprodigy2/apps/fba84766627cb9c79563e270e0954568/?hmac=f0c5a10dd6e83e912ebe5ae4238b66dfc9aa03ea64695b20a619d1fee8687426&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvcG9zdHByb2RpZ3ky&shop=postprodigy2.myshopify.com×tamp=1679817335
But the issue here is that I get a 404 from Shopify on app install and I have no idea why - My Express / Next.js server has no logs. It looks entirely browser redirects Shopify’s end bc there is no embedded iFrame for my app on this page.. This is all very confusing I have literally no clue how to debug what’s wrong here. I read some other discussions about clear DB which I did, just delete the SQLite sessions file. Can anyone help me figure out what the heck is going on here? I can’t find any documentation and there’s no readable source-code for @Shopify_77 /app-bridge-react? These tools and APIs are like the mother of all Rube Goldberg machines..
Here’s the Provider higher order component that wraps the Next.js _app.tsx file..
import React, { useEffect, useMemo, useRef } from "react";
import { useRouter } from "next/router";
import { Provider } from "@shopify/app-bridge-react";
import { getShopifyApiKey, isServerEnvironment } from "../config";
import { redirectToAuth } from "../helpers/redirect-and-reauthorize";
import { getQueryValue } from "../helpers/get-query-value";
declare global {
interface Window {
ENV: { SHOPIFY_API_KEY: string };
}
}
export function Host({ children }) {
const apiKey = getShopifyApiKey();
const hostRef = useRef