App Bridge Redirect for Embedded app

[jaypay]

Hello,

I’ve been following the docs here to create an embedded app. However I am stuck at the last paragraph where it says:

“At the end of the authentication flow, the user will end up at the redirectUri you provided. It’s highly recommended that you let App Bridge redirect the user back to Shopify. As part of the initialization process, App Bridge redirects the user if necessary to ensure your app is embedded in the Shopify admin.”

I am trying to have App Bridge redirect to my embedded app however it redirects the entire window to my app.

Is it possible to have it redirect directly within the Shopify admin? How do you “let App Bridge redirect the user back to Shopify”?

Here is my adapted code:

      var redirect_uri = "https://my-app-url/redirect"

      var permissionUrl =
        "/oauth/authorize?client_id=" +
        params.client_id +
        "&scope=" +
        params.scope +
        "&redirect_uri=" +
        redirect_uri;

      // If the current window is the 'parent', change the URL by setting location.href
      if (window.top == window.self) {
        window.location.assign(
          "https://" + params.shop_origin + "/admin" + permissionUrl
        );

        // If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
      } else {
        const app = createApp({
          apiKey: params.client_id,
          shopOrigin: params.shop_origin,
          forceRedirect: true
        });

        Redirect.create(app).dispatch(
          Redirect.Action.ADMIN_PATH,
          permissionUrl
        );
      }

Thanks!

[Trish_Ta]

Hi jaypay,

When creating an App Bridge app, setting the forceRedirect option to true would automatically redirect the browser to open your app inside Shopify Admin if it’s currently opened outside of Admin.

For example, if you’ve set up your app like this:

const app = createApp({
          apiKey: 'YOUR_API_KEY',
          shopOrigin: 'your-shop.com',
          forceRedirect: true
        });

When the current browser is displaying the page [https://yourapp.com/home](https://yourapp.com/home), it will automatically redirect to [https://your-shop.com/admin/YOUR_API_KEY/home](https://your-shop.com/admin/YOUR_API_KEY/home).

Having said that, the code you posted looks correct and should work as long as you’ve specified the correct shopDomain and apiKey. Can you double check these values?

[jaypay]

Thanks for the quick response.

The shopOrigin and apiKey were correct and the redirect was successful, however it was no longer embedded in the Shopify admin.

I ended up changing my redirect url to the following:

return redirect(f"https://{shop}/admin/apps/{API_KEY}/home_page.html")

Redirecting to the shop url instead of our app url allowed it to render inside the Shopify admin.

In order for App Bridge to know to redirect inside the admin do I need to use any associated frameworks on our server side? I’m assuming it did not work because we had implemented a custom backend. Thanks again!

[Alex973]

What about this note in the documentation?

Do not construct a Shopify admin URL manually (such as /admin/apps/${apiKey}) since it might not be compatible in the future.

I’m having a similar problem with forceRedirect: true ,it redirects but keep appending the query string params, instead I would like to be able to redirect to the embedded app root / without params, beside, sometime I’m on server side (php) and I need to redirect, but instead of the iframe only, the top window redirects.

Is there an official/supported way to redirect only the iframe from the server side?

Given the note above, is there a official/supported way to compose the embedded url of the application? Or there’s some API to call, query to do, to obtain the correct url to use?

[policenauts1]

I just want to confirm if I am doing it correctly - instead of doing

/admin/apps/\${apiKey})

After a successful OAuth, from my redirecturi it will then immediately redirect the user to:

"https://"+shopOrigin+"/admin/apps/{my app's name}"

In my testing this appears to work without issue, but can anyone confirm if there’s any issue with doing it this way?

[sucheth]

Hello,
Did you get this working ? I’m having a exact problem as yours.

[uchandra]

I have the same issue. See my app for the 5 menus, Dashboard, Product, Seller, Orderlist. Suppose I am on the order list menu and when i refresh the page its automatically redirects me to the dashboard page.

The same is applying to other menus and it always redirects me to the dashboard menu.

I am using Shopify app-bride and ohmybrew/basic-shopify-api laravel package.

Kindly help me with the same.

[manuelmontoya]

I could do it using:

const urlParams = new URLSearchParams(window.location.search);
const shopify_domain = urlParams.get('shop');
const host = window.btoa(shopify_domain + '/admin');

if (window.top == window.self) {  // I am out of shopify
   const shopifyApp = createApp({
       apiKey: "#{ShopifyApp.configuration.api_key}",
       shopOrigin: shopify_domain,
       forceRedirect: true,
       force_iframe: true,
       host
   });
}

apparently the Redirect part is unnecessary because at this point the browser is redirected to shopify from outside.