We're constantly trying to improve your support experience, and your feedback is extremely valuable to us.

Please take a moment to tell us about your experience today.
Sign up for future Help Center user research studies.

Authenticating embedded apps with OAuth

Since embedded applications are loaded inside an iframe, it is critical that the initial OAuth redirect to Shopify occurs at the parent level, escaped from the iframe. Shopify returns the X-Frame-Options=DENY header and prevents any Shopify admin pages from being loaded inside an iframe. The Shopify App Bridge provides an action that can be used to perform a redirect within the parent window.

This means that where the OAuth process would normally begin with redirecting the merchant to the authorization prompt, it should instead return a page containing a script which escapes the frame.

Using modular JavaScript:

import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';

const apiKey = 'API key from Shopify Partner Dashboard';
const redirectUri = 'whitelisted redirect URI from Shopify Partner Dashboard';
const permissionUrl = `/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;

// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
  window.location.assign(`https://${shopOrigin}/admin${permissionUrl}`)

// If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
  const app = createApp({
    apiKey: apiKey,
    shopOrigin: shopOrigin,
  });

  Redirect.create(app).dispatch(Redirect.Action.ADMIN_PATH, permissionUrl);
}

Using ES5 and the CDN-hosted version:

var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;

const apiKey = 'API key from Shopify Partner Dashboard';
const redirectUri = 'whitelisted redirect URI from Shopify Partner Dashboard';
const permissionUrl = '/oauth/authorize?client_id=' + apiKey + '&scope=read_products,read_content&redirect_uri=' + redirectUri;

// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
  window.location.assign('https://' + shopOrigin + '/admin' + permissionUrl);

// If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
  const app = createApp({
    apiKey: apiKey,
    shopOrigin: shopOrigin,
  });

  Redirect.create(app).dispatch(Redirect.Action.ADMIN_PATH, permissionUrl);
}

What's next?

At the end of the authentication flow, the user will end up at the redirectUri you provided. It's highly recommended that you let App Bridge redirect the user back to Shopify. As part of the initialization process, App Bridge redirects the user if necessary to ensure your app is embedded in the Shopify admin.

Sign up for a Partner account to get started.

Sign up