Authenticating embedded apps with OAuth

Since the application is 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 Embedded App SDK provides a method 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.

<script>
  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}`;

  ShopifyApp.init({apiKey: apiKey, shopOrigin: `https://${shopOrigin}`});

  // 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 ShopifyApp.redirect
  } else {
    ShopifyApp.redirect(permissionUrl);
  }
</script>

Sign up for a Partner account to get started.

Sign up