Redirect to subscription confirmation URL

[sandeepOngraph]

Hi, I'm created shopify app in remix js, and implementing user usages based subscription and want to redirect to subscription confirmation URL just after installing app in store. 

The below code is app.js file in remix js, createSubscriptions is graphql api to create CreateSubscription, and successfully got confirmationUrl

Issues
1. - If I added redirect in loader function like
      return redirect(confirmationUrl);
   the confirmation url will append to my base shop url like this
     https://secretariat-dated-discounts-acts.trycloudflare.com/app/https://d 
2. - If I redirect in frontend using js then it will not redirect to confirmation url and also didn't get any error in catch block

export const loader = async ({ request }) => {

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

  const url = new URL(request.url);

  const pathname = url.pathname;

  try {

    const isSubscribed = await checkBillingStatus(admin);

    let createSubscriptionsData = null;

    if (!isSubscribed) {

      createSubscriptionsData = await createSubscriptions(admin);

      if (pathname !== "/app/help") {

        return redirect("/app/help");

      }

    }

    return json({

      apiKey: process.env.SHOPIFY_API_KEY || "",

      createSubscriptionsData: createSubscriptionsData?.data,

    });

  } catch (error) {

    console.error("Error: ", error);

    return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });

  }

};

export default function App() {

  const { apiKey, createSubscriptionsData } = useLoaderData();

  useEffect(() => {

    if (createSubscriptionsData) {

      try {

        window.open(

          createSubscriptionsData?.appSubscriptionCreate?.confirmationUrl,

        );

      } catch (error) {

        console.log("Error: ", error);

      }

    }

  }, [createSubscriptionsData]);

  return (

    <AppProvider isEmbeddedApp apiKey={apiKey}>

      <ui-nav-menu>

        <Link to="/app" rel="home">

          Home

        </Link>

      </ui-nav-menu>

      <Header />

      <Frame>

        <ToastProvider>

          <Outlet />

        </ToastProvider>

      </Frame>

    </AppProvider>

  );

}