How to best perform top level redirects in App Bridge 3.0?

[ConspireAgency]

I'm wondering, what is the best way to do top level redirects from within the iFrame in App Bridge 3.0.  The documentation is very sparse, the only mention of programatic redirects saying to use native browser methods like history.pushState or history.replaceState and I'm not sure it solves the common need to redirectat the top level for things like new scope reauthentication or billing.

https://shopify.dev/docs/api/app-bridge-library/reference/navigation#example-updating-the-browser-ur...

Prior to App Bridge 3.0 it was common to use the react app bridge library with a page like "exitIFrame" that would use the redirect action from App Bridge 2 to redirect.

Here's an example of what I'm using now, having replaced App Bridge 2.0 but having kept the common exitIFrame page component:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { redirect } from 'next/navigation';

export default function Exitiframe() {
  const router = useRouter();
  console.log('exit iframe');

  const redirectUri = router.query.redirectUri as string;
  const hmac = router.query.hmac as string;
  const host = router.query.host as string;
  const shop = router.query.shop as string;
  const timestamp = router.query.timestamp as string;

  useEffect(() => {
    if (!!redirectUri) {
      // we have a redirectUri, so now we need to figure out if it's an auth or billing redirect

      if (!hmac || !host || !shop || !timestamp) {
        console.log('no hmac host shop or timestamp');
        // this is a billing redirect (we assume since missing the other params)
        const url = `${decodeURIComponent(redirectUri)}`;
        if (top) top.location.href = decodeURIComponent(url);
      } else {
        const url = `${decodeURIComponent(
          redirectUri
        )}?hmac=${hmac}&host=${host}&shop=${shop}&timestamp=${timestamp}`;

        console.log('redirecting to', url);

        // TODO fix exit iframe, for some reason this is throwing a type error - comes from Shopify App Bridge 3.0 new way of doing redirects
        if (top) top.location.href = url;
      }
    }
  }, [router.query]); // Here you should use router.query

  return <div>Loading...</div>;
}

However this throws security issues on some browsers.  Using the recommended implementation of history.pushState didn't seem to work as needed, so really not sure.  Seems like App Bridge 3.0 should have an equivalent of 2's redirect actions that work at the top level...