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.
- 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.
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.
Create a backend using Rails
Run the following console command in your working directory:
In your new app, create a
.envfile in the root directory of
Open the app's Gemfile and add the following dependencies:
Run the following command to install the gems:
Run the following command to generate an embedded app using the Shopify App gem:
Run the following installer to create a GraphQL backend:
Run any outstanding database migrations:
Create a frontend using React
In the root folder of the app, run the following commands to install React using webpacker:
Add the following dependencies to your
Generate a default
app/views/home/index.html.erbto match the following code:
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 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 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:
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."