Shopify / Shopify/shopify-app-template-react-router

Embedded app navigation redirects to /auth/login in production despite following official docs

Open
#237 1 comment 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.