Shopify apps that will be installed on multiple shops must implement Shopfiy's OAuth process to get installed. Gadget provides a well-tested implementation of Shopify's OAuth out of the box for each Gadget app.
New to Gadget? Learn how to complete the OAuth process with Gadget in our Connecting to Shopify tutorial. This includes connecting to embedded apps using the Shopify CLI and custom or public apps built using the Partners dashboard.
Gadget implements Shopify OAuth on behalf of each Gadget application. To complete the OAuth process, your application needs to redirect merchant visits into Gadget's OAuth flow, and then handle the final request once the flow is complete.
Here's the OAuth process in detail:
- The OAuth process is initiated by the merchant when they install the app from the Shopify App Store or a given install link.
- The merchant is redirected to the App URL as set in the Shopify Partners dashboard for your application. If the merchant hasn't installed the app before, the app is responsible for initiating the OAuth process to install the application. Gadget provides a default App URL of
/api/shopify/install-or-renderwhich will do this automatically.
- The app initiates installation by redirecting the merchant to Gadget's OAuth kickoff endpoint. Gadget's generated frontend UI detects uninstalled merchants and does this automatically.
- Gadget's OAuth implementation redirects the merchant to Shopify's OAuth consent screen.
- The merchant views the app's requested permissions.
- The merchant confirms consent for these scopes, and clicks the Install button.
- Shopify marks the app as installed, and redirects the merchant to the OAuth Callback URL as set in the Shopify Partners dashboard for your application. If configured correctly, this will send the merchant back to Gadget's platform OAuth implementation at
- Gadget's platform OAuth implementation runs the
installaction on the
shopifyShopmodel, recording the given
access_tokenfrom Shopify and running any custom action code you've added to your app.
- Gadget's platform OAuth implementation redirects the merchant to your app embedded within the Shopify Admin.
- The merchant views the app's UI in the embedded iframe, rendering the frontend React application from your app's
Gadget provides a value for both the App URL and the OAuth Callback URL for saving in the Partners dashboard. Gadget recommends using the defaults provided when creating your application:
|App URL||The URL that Shopify will send each merchant to, both for installation and for rendering the app each time a merchant uses it.|
|OAuth Callback URL||The URL that Shopify will redirect merchants who have granted permission to your app. Part of the OAuth process. |
Find the values for your application in the Shopify section of your application's Shopify Connection page in the Gadget editor.
In the past, Gadget recommended that Shopify applications utilize the
/shopify/install URL as the configuration value for their App URL setting within Shopify. This URL served as the entry point where Shopify directed both newly uninstalled merchants looking to install an app and existing merchants seeking to use the application. The performance of this particular route was critical, as it represented the initial interaction each merchant had with your application.
Now, Gadget introduces a high-performance entry point tailored for Shopify applications, designed to enhance the Largest Contentful Paint (LCP) time of your app. This new route will initiate the OAuth and installation process for new merchants, while seamlessly redirecting existing merchants to the / route to render the frontend experience of your application. Gadget has optimized this route to deliver the fastest possible performance, and it doesn't require activating the serverless runtime for your application, ensuring consistently low latency.
For new applications, Gadget will automatically use this URL as the default setting. However, for existing applications, you can leverage this improved route by updating your App URL to
If you'd like to change the behavior of your application's OAuth implementation, you can take over the App URL by adding a custom route to your application. For example, you can add a custom route at
Here's an example route that implements the same behavior as Gadget's default that you can customize: