Update your embedded app OAuth flow: Node and PHP

In this tutorial, you'll learn how to update an app to follow our OAuth performance best practices.

You'll perform the following tasks:

• Add code to check for and escape the iframe used to display your embedded app.
• Add code to redirect to the embedded app URL.

• Your app is embedded.
• Your app isn't built using Ruby. If it is, then follow the Ruby-specific tutorial.
• One of the following is true:
  • Your app was created before August 23, 2022, either using Shopify CLI, or using the Node or PHP app template.
  • Your app was created after August 23, 2022 using Shopify CLI, or using the Node or PHP app template, but you made significant changes to the OAuth flow.
  • Your app was created after August 23, 2022, but you didn't use Shopify CLI or a Shopify app template as a starting point.

To handle escaping the iframe using Shopify App Bridge, you need to add a new route to your application frontend. This route initializes App Bridge, then uses the App Bridge Redirect action to redirect to a URI defined in a new redirectURI parameter. You'll conditionally redirect to the new route in a later step.

Using our previous recommendations, your app might have loaded Shopify App Bridge from the Shopify CDN using an inline script tag. Loading Shopify App Bridge from your app bundle increases the chance that the user’s browser can attempt to access this code from the cache.

Using our previous recommendations, your app might attempt to escape an iframe whether or not it's present. In this step, you'll update your app's logic to escape the iframe only when needed.

To update the begin auth logic, add a utility that checks whether a request query parameter of embedded exists, and has a value of 1. If embedded=1, then the utility should render the route that you added to escape the iframe.

The following table includes cases where you should call your new utility, and examples of how and where this utility is called in Shopify Node and PHP templates.

After the user has granted access to your requested scopes, they should be returned to your app UI.

Using our previous recommendations, your app might use Shopify App Bridge to redirect to the embedded app URL. This would cause the app to load twice: once outside the iframe, and then again inside the iframe.

Instead of using App Bridge, you should use the Shopify Admin API library getEmbeddedAppUrl utility to build the embedded app URL. After you build the URL, you can perform a 3xx redirect to it.

The following table includes cases where you should 3xx redirect to the URL returned by the getEmbeddedAppUrl utility, and examples of how and where this utility is called in Shopify Node and PHP templates.

After you implement the changes to your OAuth flow, you can remove unused code. The following components were included in previous versions of Shopify app templates. If you didn't use an app template, then you might have components or code that fulfill similar functions.