Build an embedded app with Rails, React, and Shopify App Bridge
This tutorial shows you how to build an embedded Shopify app with Rails 6 using the Shopify App gem, React, and Shopify App Bridge authentication.
The app uses session tokens to authenticate requests from the app frontend to the app backend. When you've completed this tutorial, any requests made to the protected
/graphql endpoint of the app will be authenticated with an
Authorization: Bearer <session-token> header.
RequirementsAnchor link to section titled "Requirements"
- You've created a public app or custom app from your Partner Dashboard.
- The app is embedded in Shopify admin.
- Your app uses App Bridge.
Your app has the Shopify App gem version 17.1.0 or higher installed. The Shopify App gem version 17.0.5 and higher creates a JSON Web Token (JWT)-enabled app by default when you run the following terminal command:
Step 1: Generate credentials from your Partner DashboardAnchor link to section titled "Step 1: Generate credentials from your Partner Dashboard"
If you haven't done so already, then note the app's Shopify API key and secret found on your Shopify Partner Dashboard. These credentials are used to implement OAuth so that the app can access Shopify APIs.
Step 2: Make authenticated requests using App BridgeAnchor link to section titled "Step 2: Make authenticated requests using App Bridge"
To make authenticated requests using App Bridge, you need to configure the backend and frontend of your app.
Configure the backendAnchor link to section titled "Configure the backend"
Add an expected message to the
To handle changes in access scopes requested by your app, add the following configuration to
/app/config/initializers/shopify_app.rb. For more information on handling changes in access scopes, refer to the Shopify App gem.
Configure the frontendAnchor link to section titled "Configure the frontend"
Your app's frontend uses
authenticatedFetch to attach a session token as an authorization header when making requests to your app's backend.
authenticatedFetch() method does the following:
Authorization: Bearer <session token>header to all the requests made by this Apollo Client. Tokens are automatically cached and updated as needed by this method.
Takes an App Bridge instance as an argument. An instance is provided to all embedded apps by
This header authenticates that the request was made by your app embedded in a shop.
authenticatedFetchas the fetch method:
TestDatacomponent to query the
/graphqlendpoint of the app:
Step 3: Embed the app in ShopifyAnchor link to section titled "Step 3: Embed the app in Shopify"
During OAuth, Shopify redirects from the app authorization prompt back to the allow-listed redirect URL specified in your Shopify Partner Dashboard. The app needs an HTTPS address to be able to do this. Because your
localhost:3000 isn't public, you need to use a tool like ngrok to create a secure tunnel from the public internet to your local machine.
Initialize ngrok to use port 3000 using the following console command:
Start the app using the following console command:
https://<ngrok-id>.ngrok.ioand specify the shop where you want to install your app.
After the app is installed, you're redirected to the embedded app. The app displays the following message:
"Congratulations! Your requests are now authorized using App Bridge Authentication."
- Convert a multi-page, server-side rendered (SSR) app to use Shopify App Bridge authentication with Turbolinks.
- Consult the GraphQL Admin API or REST Admin API references.