Shopify remix app route goes to auth.login route

Shopify Apps
1

I’ve the below code in my app where I delete the frame and redirect to /app/frame but instead it redirects to the auth.login page. The routes don’t seem to work as expected

if (action === ‘delete’) {
const id = formData.get(‘id’);
await prisma.frame.delete({
where: { id: Number(id) }
});
return redirect(/app/frame?shop=${shop});
}

Divya_0-1723468020917.png
Divya_0-1723468020917.png1050×285 6.59 KB

2

Hey, just because I got your post high out in the google search, I’m going to share what solved it for me, except my problem was more i nthe loader, but if someone has this problem:

I was importing

import { json, redirect } from "@remix-run/node";

Turns out you don’t have to use that one, you should use it like this:

const { admin, redirect  } = await authenticate.admin(request);

if (!hasPlan) {
  return redirect('/app/selectplan');
}

That made it for me, hope it helps someone.

3

I am using as you suggestion redirect from **await authenticate.admin(request);** but it’s still not working

4

@mason225 Did you found any solution?

5

@Divya_3 Did you found any solution?

6

As this is the first result in Google when searching for info on unwanted redirects to /auth/login I’m going to include what I found when investigating my particular use case.

I imagine it’s pretty commonplace, in that when a user lands on page X of your embedded app you check their app subscription in loader() and redirect to a plans/billing page when no subscription is found.

There are two ways that authentication is provided, either via a bearer token or by appending auth data to the request URL.

Bearer token = if you’re already on an app page and click an internal app link to go to e.g. a settings page
Auth in URL = when you come to the app directly or from another admin page that’s not part of your app

If you’re landing on an app page directly, then do redirect('/app/billing') you are wiping the auth data from the URL, which is still required at that point.

The solution for me was to check for this and ensure it’s still appended to the URL in the redirect.

My final loader function looks like this:

export const loader = async ({ request, context }) => {
  const { billing, session } = await initShopifyApp(context).authenticate.admin(request);
  const hasSubscription = await checkAppSubscription(billing, request);

  if (!hasSubscription) {
    const isUrlAuth = !request.headers.get('authorization');
    const redirectUrl = isUrlAuth
      ? `/app/billing?${new URLSearchParams(new URL(request.url).search)}`
      : '/app/billing';

    return redirect(redirectUrl);
  }

  return json({ shop: session.shop });
};
7

This works for me. Thanks buddy!