quilt: Embedding of app inside Shopify admin UI with @shopify/koa-shopify-auth not working / redirect occurs

Overview

What I want to achieve

use @shopify/koa-shopify-auth for authentication flow
load an embedded app inside Shopify admin UI

What’s happening

authentication works fine, token is being exchanged
as soon as my app loads, it escapes the Shopify admin UI and the browser redirects to my app url

What I implemented and tried

created an app and set it as embedded via extensions menu
implemented simple koa server according to @shopify/koa-shopify-auth
serve an app
1. via sending markup directly from my koa server that handles the auth flow according to app.ejs as being used in shopify-node-app after successful authentication
2. instead of serving the markup directly (for testing purposes), I actually want (and tried) to redirect to a static web app on another subdomain. This app is based on polaris where I also set shopOrigin and forceRedirect via the AppProvider. But this doesn’t work either.

set the following headers

ctx.response.set('X-Frame-Options', `allow-from https://${shop}`);
ctx.response.set('Content-Security-Policy', `frame-ancestors *.myshopify.com`);

What makes me curious / Questions

Docs are saying that we should escape the iframe before authentication is happening, which @shopify/koa-shopify-auth seems to be doing in redirection-page. I assume the containing script is what the shopify browser lib is doing under the hood?

If I serve a polaris app instead of the markup that also disables the forceRedirect, what happens if my react app takes some time to load? Documentation is also saying that ShopifyApp.init(shopifyAppConfig); should happen immediately.

A comment in app.ejs also mentions that the redirect will only happen during development if it’s not disabled. Does this mean it will at least work when my app is published?

I do remember that I had implemented a test app a few months ago with the express version of the auth flow and the app was being displayed inside the admin UI during development. Although I don’t have the code anymore 😕

Am I missing something or is this really a bug? I’m really desperate and your opinion is very much appreciated! I can also give you access to my private repo if that might be of help.

Consuming repo

https://github.com/Shopify/quilt

Additional resources

test app being served after successful auth

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>woop</title>
  </head>
  <body>
    <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>

    <script>
      window.apiKey = ${API_KEY}
      window.shopOrigin = "https://${shop}"
      const shopifyAppConfig = {
        apiKey: window.apiKey,
        shopOrigin: window.shopOrigin,
      }
   
        shopifyAppConfig.forceRedirect = false;
  
      ShopifyApp.init(shopifyAppConfig);
    </script>

    <div id="root">🙆‍♂️</div>
  </body>
</html>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 17 (12 by maintainers)

Most upvoted comments

A bit late to the thread but I just figured out what is the solution to make your app rendered inside the Shopify admin without a redirect.

There is a setting that is not well documented in the repo nor the partners’ documentation.

When you define the App URL in your app’s settings page, you can simply switch the URL to e.g. https://kdkf92n34.ngrok.io/auth/inline and that makes your app to not trigger a top-level redirect.

Also check the screenshot: CleanShot 2019-08-17 at 17 25 22@2x

Here is the source code of this: https://github.com/Shopify/quilt/blob/22a1ce062d95c425b390ffbd0919fc03594da072/packages/koa-shopify-auth/src/auth/index.ts#L41

I hope it will help any future developer that is having the same issue.

+18

andrewckor on Aug 17, 2019

Thanks for the update!

This error happens because your app thinks the merchant is still logged in (due to the cookie), but in reality the app has been uninstalled, so Shopify refuses to load the app.

I’m aware of some apps that listen to the app/uninstalled webhook (https://help.shopify.com/en/api/reference/events/webhook) and then remove the shop token for that shop when their app is uninstalled. That way the app knows that the shop has uninstalled the app, and redirects to the OAuth flow instead of redirecting to the Shopify embedded app URL.

Since the original issue has been resolved, I’m going to close out this issue. Thanks again for participating!

ragalie on Oct 3, 2018

@ragalie I finally found the root cause of my issue. What I wanted to do was passing all app config data dynamically to the authentication middleware of koa-shopify-auth to use the middleware for multiple shopify apps while having a single point of authentication. Therefore, I was wrapping all middleware into a (ctx, next) => ... koaShopifyMiddleware(config)(ctx,next) function. And obviously I did not use async for all my middlewares. So when the fetch for the access token occurred, koa already ended the request because the request.path logging finished long before the authCallback resolved as it was synchronous.

When we however add an async to each and every middleware / wrapper, everything works as it should.

I’m also usually using express and am quite new to koa. Lesson learned 😄

Thanks again so much !!!

bastiankistner on Oct 4, 2018