ganmahmud commented 6 months ago

Issue summary

I am building an embedded admin app where I am fetching some data from an external API in the app._index.tasx -

export const loader = async ({ request }: LoaderFunctionArgs) => {
 await authenticate.admin(request);
  const jwtToken = jwt.sign(payload, secret, { expiresIn });

  const response = await fetch(
    `https://some-end-point/`,
    {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json", // Optional, but good practice
      },
    },
  );

return json(await response.json());
};

export default function Index() {
  const {
    templates,
  } =
    useLoaderData<typeof loader>();

  return (
    <Page fullWidth>
      <Layout>
        {templates.map((template) => (
          <Layout.Section key={template._id} variant="oneThird">
            <Link to={`/app/template/${template._id}`}>
              <Card>
                 <Image
                    width={50}
                    height={50}
                    source={template.image}
                    alt={template.title}
                  />
                )}
                <Text as="h2" variant="headingLg" tone="magic-subdued">
                  {template.title}
                </Text>
                <Text as="p">{template.description}</Text>
              </Card>
            </Link>
          </Layout.Section>
        ))}
      </Layout>
    </Page>
  );
}

This page rederns properly without any issue. But when navigating within the embedded app, the routes don’t seem to work as expected. I expect the route to go to the app.template.$id.tsx route but instead it redirects to the auth.login page -

From the log (provided bellow) It seems that the app bridge does not consider the URL search params in the component url

?embedded=1&hmac=[REPLACE_WITH_HMAC]&host=[REPLACE_WITH_HOST]&id_token=[REPLACE_WITH_ID_TOKEN]&locale=[REPLACE_WITH_LOCALE]&session=[REPLACE_WITH_SESSION]&shop=[REPLACE_WITH_SHOP]&timestamp=[REPLACE_WITH_TIMESTAMP]

While debugging I found out that it does not happen when there is no data fetching or JWT sign happening in loader function.

Link component is supposed to take care of it and in my case it is acting as if I am not using Link component

App and System info

@shopify/shopify-app-remix version: ^2.5.0
Node version: v18.13.0
Operating system: macOS Monterey 12.0.1 (Apple M1 Pro)

Logs

09:17:19 │ remix      │ GET /app?embedded=1&hmac=9b0a69737e1e62c7ef6b5f4d12ae0e905c89b6a80f63ba656af10a01c3f0074e&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvbmVyZGRldnM&id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvbmVyZ
GRldnMubXlzaG9waWZ5LmNvbVwvYWRtaW4iLCJkZXN0IjoiaHR0cHM6XC9cL25lcmRkZXZzLm15c2hvcGlmeS5jb20iLCJhdWQiOiI4ZjUyNDE3YzJhODM5N2JjNjc1NzNhMDMzM2U4NWQ2OSIsInN1YiI6Ijg0ODg3ODk2MjMyIiwiZXhwIjoxNzA4MjI2MjkxLCJuYmYiOjE3MDgyMjYyMzEsImlhdCI6MTcwODIyNjI
zMSwianRpIjoiZmE2ZTAzZGEtOGYzMi00OWMzLTg4OGMtMzZkZmIwOTM2MTA0Iiwic2lkIjoiNzBjODZkMzgtYmZhOC00ZDBlLTg5ZGMtOGQ3YjhlMjNkYWRlIiwic2lnIjoiMTE5NDBhMDZmMzZkYTBkOWYyYTY4Mzg2YWVhNjI0OWE4ZmY3NzgxMmY4NDNiYTYxMDM1MTk3ZmM5YWU4OWU4YyJ9.GcFI7qKIUnmoT3K9
ECuKCL4PhCXOXsFAyzlBMWA-QaM&locale=en&session=ca415f17496c09374bc16a1293ca3eb3058ee0352d5a5e345ac21dced08dfe32&shop=nerddevs.myshopify.com&timestamp=1708226231 200 - - 778.632 ms
09:17:24 │ remix      │ GET /app/template/64ac030bd9acf002f04b94c1 302 - - 1.462 ms
09:17:24 │ remix      │ GET /auth/login 200 - - 5.597 ms
09:17:29 │ remix      │ GET /auth/login 200 - - 3.304 ms
09:17:30 │ remix      │ GET /auth/login 200 - - 3.577 ms
09:17:33 │ remix      │ GET /auth/login 200 - - 3.029 ms
09:17:34 │ remix      │ GET /auth/login 200 - - 3.000 ms

Expected behavior

Should go the app.template.$id.tsx route

Actual behavior

Page redirects to auth.login route -

Steps to reproduce the problem

Load data from external API using fetch in app._index.tsx
Populate template with component in app.template.$id.tsx (tried both react and Polaris Link component)
```
<Link to={`/app/template/${template._id}`}>
```
Click on the link

ganmahmud commented 6 months ago

Found the issue, it was due to how I was importing the jsonwebtoken package. Importing using CommonJS require syntax instead of ES6 import syntax, solved the problem.

ghussain08 commented 1 month ago

I'm facing the same issue, Couldn't find anything so far.

It randomly redirects to auth.login route from random routes. I don't have jsonwebtoken anywhere in the app, how do i figure out which package is causing the issue.

GET /app/settings?_data=routes%2Fapp.settings 200 - - 2034.964 ms
[shopify-app/INFO] Authenticating admin request
GET /app?_data=routes%2Fapp._index 200 - - 1729.648 ms
GET /app 302 - - 3.049 ms
GET /auth/login 200 - - 6.904 ms

Shopify / shopify-app-template-remix