Remix: authentication works in local dev mode but not in production (EC2)

[SiteChat]

Hi,

We build an App based on the Remix template and the Billing App.

The OAuth and Billing API works fine when we tested it locally (using yarn dev and build a cloudflare

tunnel.

However, when we host the server on AWS EC2 and start using npm run setup && PORT=8888 npm run start

1. the admin page of the test store loaded. i.e. https://admin.shopify.com/store/quickstart-b74cf95b/apps/site-chat-shop-extension where quickstart-b74cf95b is the name of the test store.
2. Authentication always failed, neither redirected to the login page (if open the host home page URL in a new tab and, outside the Admin panel, it will redirect me to the login page)

For reference

1. The followings are code snippet from the app/routes/_index/route.jsx.

export const loader = async ({ request }) => {
  try{
    console.log('home page, auth check:');
    const { billing } = await authenticate.admin(request);
    console.log('home page, billing check:', billing);
    // some other code
  } catch (error) {
    console.log('home page, billing check error')
    console.log('home page, billing check error details:', error)
    console.log('home page, billing check error apiKey:', process.env.SHOPIFY_API_KEY || "")
    return json({
      apiKey: process.env.SHOPIFY_API_KEY || "",
    });
 }

2. the log shows that authentication was attempted but failed.

As the only difference is how the server was launched in local test yarn dev and on server npm run setup && PORT=8888 npm run start (minor modification from the docker start command), could some suggest a fix?

With Thanks

[Liam]

Hi SiteChat,

The issue you described, where authentication fails and redirects do not work, could be due to the way your authentication and redirect logic is set up in your application. Some things you can check are:

• Ensure that your OAuth callback URL is correctly configured in your Shopify Partner Dashboard. It should match the URL where your app is hosted on AWS EC2.
• Double-check the way you handle authentication and redirects in your Remix application. Make sure you’re using the correct OAuth flow and that your app properly handles authentication failures.
• When running your app locally using yarn dev, it might have different CORS (Cross-Origin Resource Sharing) and firewall settings compared to your AWS EC2 instance.
• Check if your AWS EC2 instance allows incoming traffic on the necessary ports (e.g., port 8888) and if CORS policies are configured correctly to allow requests from the Shopify Admin panel.

Try these out and let us know if you’re still running into issues,

[SiteChat]

Thanks @Liam ,

Although the logs suggest an authentication-related issue, I discovered that the actual cause is the access scopes being out of sync between the .env file (used in production deployment) and the shopify.app.toml (since local testing didn’t check the .env file).

If anyone encounters a similar issue, consider:

• Check the scopes in both the shopify.app.toml file and the .env file.

• We’ve created an npm package: shopify-scopes-sync (available on npm and GitHub) that automatically syncs the scopes in the .env file as specified in shopify.app.toml.

Hope this helps.

[921Kiyo]

Thank you for sharing this post! It took almost a day to debug this!! Your post helped me resolve it

[khabibullokhon]

Hi there.

I am facing quite similar problem with authentication from shopify in ec2 instance, i am running shopify app env show to see the environment variables. When i run it, the shopify asks for authentication, i wait for shopify to provide the link and open in a new browser tab, then i log into my account and then when it comes to redirecting it fails. It tries to redirect to 127.0.0.1 but fails. How can I fix this?