Unable to authenticate Remix template app in production

Shopify CLI and Libraries
1

Hi, I’m in the process of building a Shopify app via the Remix template. The app seems to work in production, but after building and starting the app for production/(staging) as described here the app and authentication work poorly.

The embedded app root does load, but has a few problems, most importantly:

  1. Any sub page selected via the embedded side menu wants re-authentication. (After calling the ‘await authenticate.admin(request)’ method in the loader from the ‘shopify-app-remix’ included in the Remix template)
    Authentication form
    Authentication form769×207 3.32 KB

    Filling the above form results in the following error and a browser console error about showing the frame. A session record was created in the database
The loading of “https://accounts.shopify.com/select?rid=63be12ac-d797-44a3-b9f8-18255dd1d824” in a frame is denied by “X-Frame-Options“ directive set to “deny“.
  1. Translations are not being loaded, even though the resources are available at their respective urls. (Tested by visiting the resource urls directly)
  2. < Button > element not firing its onClick anymore.

So I have the following question:
What could cause my Shopify Remix app to have authentication problems and more in the production environment but not in the development environment?

Thanks.

2

Hi there :waving_hand:

Could you turn on debug level logging an take a look at the error messages. It should give us a few more details why you are getting redirected.

You can turn on debug level logging in the shopifyApp config object

//shopify.server
const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  logger: {
    level: LogSeverity.Debug,
  }
4

Update: while the log was caught in the spam filter and never posted here I continued debugging and found a few references to redirect from @remix-run/node.
Changing these to the redirect helper returned from authenticate.admin solved the authentication problems.

Do not use redirect from @remix-run/node (and check your IDE’s sneaky imports, that is how they got me)

For the other two problems:

  1. Translations are not being loaded, even though the resources are available at their respective urls.
  2. < Button > element not firing its onClick anymore.

Both problems stem from a solution to another problem.
When deploying my application to the staging environment I received a Response.json is not a function error. The shopify forums presented a solution of changing a featureflag as described here: Error when upgrading Remix, Response.json is not a function - #5 by maxidr

However, this caused the aforementioned problems and was solved this by setting the v3_singleFetch back to false, and changing the Response.json calls to returning pure objects or using the data function from @remix-run/node, this seems to be working for me for now.

As an example for future visitors on how I resolved the Response.json error:

import {data} from "@remix-run/node";

export async function action({request, params}: ActionFunctionArgs) {

  if (request.method === "POST") {
    return { hello:'world'}
  }

  if (request.method === "DELETE") {
    return data({goodbye:'world'},{status:410})
  }
}

Also, I recommend changing the shopify logging code to something like this:

//shopify.server
const shopify = shopifyApp({
  logger: {
    level: process.env.LOG_LEVEL ?? LogSeverity.Warning
  }
// And the rest of the configuration
}

It allows for enabling/disabling of logging via your environment or .env file via the LOG_LEVEL variable without having to rebuild your application, with the values being:

#    Error = 0,
#    Warning = 1,
#    Info = 2,
#    Debug = 3
1 Like