Hello,
Why is my app unable to get the embedded URL and shows a 404 error in the production environment, but after entering the URL multiple times in the browser, it works? Thank you in advance!
Topic summary
A Shopify Remix app is experiencing 404 errors when loading in production’s embedded environment, though the issue resolves after multiple URL entry attempts.
Primary Issue:
- App fails to retrieve embedded URL on initial load in production
- Works inconsistently, requiring multiple browser attempts
Likely Causes Identified:
- Session Token Problems - Improper authentication/refresh of Shopify session tokens preventing correct iframe embedding
- Browser Caching/Cookie Restrictions - Third-party cookie blocking may interfere with session management
- Environment Configuration - Production domain, redirect URIs, or App Bridge settings may be misconfigured in Shopify Partner Dashboard
- Middleware Issues - Session storage or authentication middleware not properly configured for production
Recommended Solutions:
- Implement proper session token handling using Shopify App Bridge and
@shopify/app-bridge-utils - Configure top-level redirects for authentication fallback
- Verify production domain and redirect URI settings in Partner Dashboard
- Check session storage mechanism (Redis/MongoDB) functionality
- Debug using browser network tools and enable app logging
Status: Awaiting original poster’s response to troubleshooting suggestions.
Hi @ZoeM_1
It sounds like your app is experiencing an issue with how Shopify handles embedded apps and session tokens. The 404 error usually occurs because the app isn’t properly loading the session or embedding itself correctly within Shopify’s iframe. Here are some possible reasons and solutions:
1. Missing or Misconfigured Session Tokens
Shopify apps rely on session tokens to authenticate and load the app properly. In production, if the session token isn’t properly set up or refreshed, the app can fail to embed and show a 404. Make sure you’ve implemented Shopify’s session token handling correctly:
- Check the Shopify App Bridge: Use App Bridge for session token handling. Ensure you’ve added middleware for session management in your backend.
- Refresh Session Tokens: Use the app-bridge-utils package to listen for and refresh session tokens when needed.
import { getSessionToken } from “@shopify/app-bridge-utils”;
// Example usage with App Bridge
const app = createApp({
apiKey: “your-api-key”,
shopOrigin: “your-shop-origin”,
});
getSessionToken(app).then((token) => {
// Use token to authenticate API requests
});
2. Browser Caching Issues
The behavior you described, where entering the URL multiple times eventually works, might be due to browser caching or how cookies are handled. Some browsers, especially when third-party cookies are restricted, might block session cookies.
Solution:
- Set up a fallback mechanism to redirect the user to the app’s auth page to refresh the session.
- Use a Top-Level Redirect to ensure the app loads properly inside the Shopify admin iframe.
import createApp from “@shopify/app-bridge”;
import Redirect from “@shopify/app-bridge/actions/Redirect”;
const app = createApp({
apiKey: “your-api-key”,
shopOrigin: “your-shop-origin”,
});
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, “your-auth-url”);
3. Production vs. Development Environment
In development, Shopify uses localhost or a tunneling service (like Ngrok), which handles sessions differently compared to production. Ensure you’ve accounted for these differences in production:
- Check if your production domain is properly configured in the App Setup in your Shopify Partner Dashboard.
- Ensure your app’s REDIRECT_URI and POST_LOGIN_REDIRECT_URI are correctly set for production.
4. Missing Middleware or App Setup
Sometimes, middleware isn’t configured properly to handle incoming requests in the production environment.
Solution:
- Ensure you’re using the correct middleware for the stack you’re using (e.g., koa-shopify-auth for Koa).
- Verify the session storage mechanism (e.g., Redis, MongoDB) is working as expected in production.
5. Debugging Steps
To narrow down the issue:
- Check the network requests in the browser developer tools for failed or missing requests.
- Enable debug logs in your app to trace session and token management.
- Test the app in incognito mode to rule out browser caching or cookie issues.
Let me know if you need more clarification or step-by-step guidance. I’m happy to help!
Best regards,
Daisy