App Bridge Redirect for Embedded app

Highlighted
New Member
2 0 0

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!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
28 7 10

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?

0 Likes
Highlighted
New Member
2 0 0

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!

0 Likes