Problems with authentication with remix template non-embedded app

[jeremyLiu97418]

Hello everyone, I'm currently building a non-embedded app for my company using the remix template.

What the app will do is, prompt the user to install the app, afterwards the app would be redirected offsite.

Before redirecting, I would retrieve the offline access token and use GraphQL to extract some information to be forwarded to the third-party site using the admin object like so:

const { admin, session } = await authenticate.admin(request);
const query = await admin.graphql(`
      {
      shop {
        url
      }
    }`);

//...

Now, the kicker is when I'm running my project locally (npm run dev), everything is fine, authentication and authorization is done by the Shopify Library, no additional code needed. However, when I tried to use my app in production (npm run build and hosted it), it suddenly says: 

"Error: No route matches URL "/admin/oauth/authorize".

I tried to implement this route by passing the previous request and use it as a parameter for

authenticate.admin. However, it now states:

"[shopify-app/INFO] Could not find a shop, can't authenticate request".

I'm actually quite confused why in dev mode I have no such problems, but when in production mode, I would need to implement the auth logic myself.

I need some guidance on what to implement for the "/admin/oauth/authorize" route and how to continue proceeding forward with the app. 

Thanks in advance for the help!

[Kudosi-Carlos]

Hello @jeremyLiu97418 

This “No route matches URL /admin/oauth/authorize” error just means your production Remix build isn’t exposing the same auth endpoints that the Shopify library wires up for you in dev. In dev mode the Shopify Remix template auto-generates those routes, but once you do npm run build you need to actually have matching files in your app/routes folder (and the right env vars) so Remix can serve them.

Here’s a quick checklist to get your OAuth flow working in Production:

1. Add the auth route files
In your Remix app, make sure you have these files (matching Shopify’s template exactly):

bash
app/routes/auth.tsx
app/routes/auth/callback.tsx

• auth.tsx kicks off the redirect to /admin/oauth/authorize
• auth/callback.tsx handles the shop & hmac query params and calls authenticate.admin

2. Double-check your env vars
In production you must have:

kotlin

SHOPIFY_API_KEY
SHOPIFY_API_SECRET
SHOPIFY_SCOPES
SHOPIFY_APP_URL ← this must exactly match the App URL in your Partner Dashboard

If SHOPIFY_APP_URL is wrong, Shopify’s redirect URI check will fail.

3. Ensure your hosting adapter passes through /admin/oauth/authorize
If you’re running behind a reverse proxy or a serverless function, make sure any wildcard (/*) or API route config includes /admin/oauth/* so Remix actually sees that request.

4. Test your /auth route directly
Hit https://your-app.com/auth?shop=my-shop.myshopify.com in production. You should get a 302 redirect to Shopify’s oauth URL. If you still get “no route,” Remix isn’t seeing your auth.tsx.

Once those files exist and your host is forwarding those paths, your production OAuth flow will mirror dev.

[jeremyLiu97418]

Thank you so much for your speedy reply @Kudosi-Carlos ! I will definitely test out what you've mentioned now.

[jeremyLiu97418]

Hello @Kudosi-Carlos 

So, a few small questions

1) For implementing app/routes/auth.tsx, the remix template already includes an auth.$.jsx, do I still have to implement this route?

2) For implementing app/routes/auth/callback.tsx, what do you mean by handling the shop & hmac query params exactly? 

Again, many thanks !

[appaza]

I fixed this issue. The main issue here was ShopURL. Our deal was for $500. After fixing these issues, he will pay me. But when I sent him the code, he said he won't give me USD. He will give me HKD. This is a big scam.