Shopify App OAuth 

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.

Gadget's Shopify OAuth implementation 

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:

1. The OAuth process is initiated by the merchant when they install the app from the Shopify App Store or a given install link.
2. 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.
3. 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.
4. Gadget's OAuth implementation redirects the merchant to Shopify's OAuth consent screen.
5. The merchant views the app's requested permissions.
6. The merchant confirms consent for these scopes, and clicks the Install button.
7. 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 /api/connections/shopify/auth/callback.
8. Gadget's platform OAuth implementation runs the install action on the Shopify Shop model, recording the given access_token from Shopify and running any custom action code you've added to your app.
9. Gadget's platform OAuth implementation redirects the merchant to your app's /shopify/install route. This runs the routes/shopify/GET-install.js route inside your application.
10. If not customized, the routes/shopify/GET-install.js route will redirect the merchant back to the Shopify Admin to view the application in the embedded iframe.
11. The merchant views the app's UI in the embedded iframe, rendering the frontend React application from your app's frontend folder.

Configuration values 

Gadget provides a value for both the App URL and the OAuth Callback URL for saving in the Partners dashboard. Gadget generally recommends using your application's root URL for the App URL, and then Gadget provides one platform-powered URL at /api/connections/shopify/auth/callback for the OAuth Callback URL.

Find the values for your application in the Shopify section of your application's Shopify Connection page in the Gadget editor.

Customization 

If you'd like to change the behavior of your application's OAuth implementation, you can change the content of your routes/shopify/GET-install.js route. For example, if you don't want the default behavior of re-embedding your app after install you can remove the code which redirects to the Shopify Admin, and instead just redirect the merchant to the root of your application with await reply.redirect("/").