Shopify / Shopify/shopify-app-template-react-router
Embedded app navigation redirects to /auth/login in production despite following official docs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 197
- Forks
- 68
- Avg merge
- 4d 21h
- Merged PRs (30d)
- 4
Description
Description
I've followed the official Shopify React Router template and documentation exactly, but navigation in production on Heroku redirects every click to /auth/login, even though the session token is present and App Bridge is initialized.
Environment
- @shopify/shopify-app-react-router: ^1.1.0
- @shopify/app-bridge-react: ^4.2.4
- react-router: ^7.12.0
- Node: 24.15.0
- Hosting: Heroku
- Distribution: AppStore
What Works
- App installation and OAuth flow
- Initial app load (GET /app works)
- Typing URL directly in address bar: /app/campaigns/{id} loads detail page correctly
- window.shopify App Bridge object is initialized
- GraphQL API calls work
- Loaders run correctly for direct URL requests
What Fails
Clicking ANY navigation element redirects to /auth/login:
- Link from react-router
- useNavigate hook
- s-link Polaris web component
- window.location.href
- window.top.location.href
Heroku Logs
GET /app/campaigns/{id} 302 - - 1.988 ms
GET /auth/login 200
Important: NO "[shopify-app/INFO] Authenticating admin request" log appears before the 302. The Shopify middleware rejects the request before reaching authenticate.admin().
Gotchas Checked
Per the Gotchas/Troubleshooting docs:
- Using Link from react-router (not )
- Using redirect from authenticate.admin
- Using useSubmit where needed
- App is embedded (default)
- unstable_newEmbeddedAuthStrategy: true enabled
- App Bridge script added in root.jsx
- shopify-api-key meta tag present
Expected
Clicking a Link should navigate to the target route with session preserved.
Actual
Every click redirects to /auth/login. Contacted Shopify support, they confirmed this is a framework issue and recommended opening a GitHub issue.
Please advise what specific configuration is missing in production deployments.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the production request path and Heroku logs for navigation to /app/campaigns/{id}, focusing on the Shopify middleware before authenticate.admin(). Review root.jsx and the documented embedded-auth configuration, then compare direct URL requests with client navigation. Done means production navigation preserves the session and no longer redirects to /auth/login.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- authentication, backend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100