Solved

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

SiteChat
Shopify Partner
5 1 0

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.

Screenshot 2024-01-28 at 19.46.19.png

 

 

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



Accepted Solution (1)
SiteChat
Shopify Partner
5 1 0

This is an accepted solution.

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.

 

View solution in original post

Replies 3 (3)

Liam
Shopify Staff
2731 299 769

 

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,

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

SiteChat
Shopify Partner
5 1 0

This is an accepted solution.

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
Shopify Partner
15 0 1

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