Issue Embedded app: Polaris links redirect to login in production

Polaris
1

Hi all,

I’m building a Shopify embedded app using React Router and Polaris components (s-link, s-button) for internal navigation.

Everything works fine locally, but in production the links don’t work: clicking them redirects to /app/auth.

I even tried preserving the query string with useLocation to keep the host parameter, so the pages now render for about 1 second before redirecting to the login page.

Has anyone experienced this? Any tips for making internal navigation work reliably in a Shopify embedded app in production?

2

Hi @benjamin_bailly

What could be happeing here is that, in production, navigation via React Router or custom links may lose the host parameter, causing the app to think it’s not embedded, triggering a redirect.

Are you wrapping your app in the AppProvider from @shopify/shopify-app-react-router/react and passing the embedded prop as true and the correct apiKey? It should look something like:

import { useLoaderData } from 'react-router';
import { AppProvider } from '@shopify/shopify-app-react-router/react';

export default function App() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider embedded apiKey={apiKey}>
      <Outlet />
    </AppProvider>
  );
}
3

Hello there, sorry for the delayed response.
Regarding the Shopify auth: since the App do a POST request to the /auth URL on every navigation, and I was running on a Lambda that doesn’t allow that kind of request, I initially couldn’t see the issue. The documentation didn’t mention it (or I missed it), and because it happens under the hood, I didn’t notice it at first.
To solve this just accept post request on the /auth url
if you have this issue on dev environnement, you have to use polaris component to not break the embed app.
Anyway, it’s solved now, thanks for the help!