App Bridge Redirect for Embedded app

jaypay
Visitor
2 0 4

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!

Replies 7 (7)

Trish_Ta
Shopify Staff
58 13 27

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`, it will automatically redirect to `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?

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jaypay
Visitor
2 0 4

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
Visitor
2 0 0

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
Trailblazer
174 13 39

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
Tourist
6 0 1

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

uchandra
Visitor
2 0 0

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
Shopify Partner
11 0 3

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.