Missing support for programmatic top-level external navigation

[mathhulk]

Describe the bug

@shopify/[email protected] provided a useNavigate hook permitting programmatic top-level external navigation without requiring user interaction:

const navigate = useNavigate();

useEffect(() => navigate(`https://external.com/api/oauth/shopify${location.search}`), []);

Such navigation enables external authorization.

Unfortunately, no such navigation seems to be available for @shopify/[email protected].

The following cases results in a cross-origin resource sharing (CORS) error, but seem to be the recommended use cases according to the documentation:

useEffect(() => window.open(`https://external.com/api/oauth/shopify${location.search}`, "_top"), []);

useEffect(() => window.top.location.href = `https://external.com/api/oauth/shopify${location.search}`;

useEffect(() => {
  const anchor = document.createElement("a");
  anchor.href = `https://external.com/api/oauth/shopify${location.search}`;
  anchor.target = "_top";
  
  anchor.click();
}, []);

To Reproduce

Implement any of the above examples.

Expected behaviour

Programmatic top-level external navigation should be permitted.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge-react @ 4.X.X

Platform

• OS: macOS
• OS Version: 15.0
• App: Chrome

Additional context

I am using Vite and React.