App Bridge redirection to payment page not working

[Growthfamily]

Hello,

When my application is installed, the user is redirected to its home page.

I would like to redirect the user to the payment page.

To do this, I seem to have to use the App Bridge React component.

So I've added to my page:

<Provider config={appBridgeConfig}>
<Page title="Complete Your Payment">
<RedirectHandler redirectUrl={redirectUrl} />
</Page>
</Provider>

The redirection is ONLY effective when I reload the page with the following url:
https:// {shop} /admin/oauth/redirect_from_cli?client_id=APP_API_KEY

However, I want to redirect the user just after installation.

How can I ensure that the redirection is effective as soon as my application loads?

My RedirectHandler is :

function RedirectHandler({ redirectUrl }) {
const app = useAppBridge();
useEffect(() => {
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, redirectUrl);
}, [app, redirectUrl]);

return null;
}

Thanks! 

[Growthfamily · Accepted solution]

Solved!

My host variable was setup in my loader with :

export const loader = async ({ request, endCursor }) => {
const { admin } = await authenticate.admin(request);
const host = admin.rest.session.shop 



//code

}

But this variable is only in the {shop}.myshopify.com format. Shopify is moving from that kind of urls to another backoffice url: https://admin.shopify.com/store/{shop}/

So I tried to initiate the host variable on the client side with : 

const host = new URLSearchParams(window.location.search).get('host');

The only solution to make that working properly is to include that code into a useEffect as below : 

 useEffect(() => {
    if (typeof window !== "undefined") {
      const queryParams = new URLSearchParams(window.location.search);
      const hostParam = queryParams.get('host');

      if (hostParam) {
        setAppBridgeConfig({
          apiKey: apiKey,
          host: hostParam,
        });
      }
    }
  }, [apiKey]);

Then use that code in order to wait for the config to be ready: 

 if (!appBridgeConfig) {
    return (<div>Loading...</div>);
  }

 
Otherwize the page is loading before the appBridgeConfig is ready and we incounter an host is undefined error.