Billing API request not authenticating

[carecare]

Hi there,

I've been following the existing solutions for setting up the billing API that seems to generally work (https://github.com/marktiddy/Shopify-Remix-Billing-Demo/blob/main/app/routes/app._index.jsx)

However, I'm getting a weird 302 error when I run the app, the header is making me think that there's some sort of authentication error (location: '/auth/exit-iframe?shop=).

app._index.js

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // Authenticate with Shopify
  const { admin, billing, session } = await authenticate.admin(request);
  const {shop} = session;
  const subscriptions = await getSubscriptionStatus(admin.graphql);
  const { activeSubscriptions } = subscriptions.data.app.installation;

  const returnUrl = `https://admin.shopify.com/store/${shop}/apps/[APP]/app`
  console.log("Return URL: ", returnUrl);

  if (activeSubscriptions.length < 1) {
    console.log("billing: ", billing)
    console.log("billing.request: ", billing.request)
    await billing.require({
      plans: [MONTHLY_PLAN],
      isTest: true,
      onFailure: async () => { 
        billing.request({ 
          plan: MONTHLY_PLAN, 
          isTest: true,
          returnUrl: returnUrl
        }).catch(error => {
          console.error('An error occurred:', error);
        });
      },
      returnUrl: returnUrl
    });
  }

from shopify.server

billing: {
    [MONTHLY_PLAN]: {
      amount: 300,
      currencyCode: "USD",
      interval: BillingInterval.Every30Days,
      trialDays: 45,
      isTest: true,
    }
  }

 In the tutorials, I expects that when I refreshed my app a subscription page would open up automatically; however, instead, my app seems to get caught in some sort of loop and then errors out. 

Does anyone have an idea of what may be going awry? 

Thanks!