koa-shopify-auth: update redirection page to use App Bridge action

packages/koa-shopify-auth/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+- Updated redirect script to use App Bridge [1242](https://github.com/Shopify/quilt/pull/1242)
+
 ## 3.1.37 - 2019-09-23
 
 ### Fixed

packages/koa-shopify-auth/src/auth/create-enable-cookies-redirect.ts

@@ -4,8 +4,11 @@ import createTopLevelRedirect from './create-top-level-redirect';
 
 import {TEST_COOKIE_NAME} from './index';
 
-export default function createEnableCookiesRedirect(path: string) {
-  const redirect = createTopLevelRedirect(path);
+export default function createEnableCookiesRedirect(
+  apiKey: string,
+  path: string,
+) {
+  const redirect = createTopLevelRedirect(apiKey, path);
 
   return function topLevelOAuthRedirect(ctx: Context) {
     // This is to avoid a redirect loop if the app doesn't use verifyRequest or set the test cookie elsewhere.

packages/koa-shopify-auth/src/auth/create-top-level-oauth-redirect.ts

@@ -4,8 +4,11 @@ import createTopLevelRedirect from './create-top-level-redirect';
 
 import {TOP_LEVEL_OAUTH_COOKIE_NAME} from './index';
 
-export default function createTopLevelOAuthRedirect(path: string) {
-  const redirect = createTopLevelRedirect(path);
+export default function createTopLevelOAuthRedirect(
+  apiKey: string,
+  path: string,
+) {
+  const redirect = createTopLevelRedirect(apiKey, path);
 
   return function topLevelOAuthRedirect(ctx: Context) {
     ctx.cookies.set(TOP_LEVEL_OAUTH_COOKIE_NAME, '1');

packages/koa-shopify-auth/src/auth/create-top-level-redirect.ts

@@ -4,7 +4,7 @@ import {Context} from 'koa';
 
 import redirectionPage from './redirection-page';
 
-export default function createTopLevelRedirect(path: string) {
+export default function createTopLevelRedirect(apiKey: string, path: string) {
   return function topLevelRedirect(ctx: Context) {
     const {host, query} = ctx;
     const {shop} = query;
@@ -13,8 +13,9 @@ export default function createTopLevelRedirect(path: string) {
     const queryString = querystring.stringify(params);
 
     ctx.body = redirectionPage({
-      origin: `https://${shop}`,
+      origin: shop,
       redirectTo: `https://${host}${path}?${queryString}`,
+      apiKey,
     });
   };
 }

packages/koa-shopify-auth/src/auth/index.ts

@@ -40,11 +40,17 @@ export default function createShopifyAuth(options: OAuthStartOptions) {
   const oAuthCallback = createOAuthCallback(config);
 
   const inlineOAuthPath = `${prefix}/auth/inline`;
-  const topLevelOAuthRedirect = createTopLevelOAuthRedirect(inlineOAuthPath);
+  const topLevelOAuthRedirect = createTopLevelOAuthRedirect(
+    config.apiKey,
+    inlineOAuthPath,
+  );
 
   const enableCookiesPath = `${oAuthStartPath}/enable_cookies`;
   const enableCookies = createEnableCookies(config);
-  const enableCookiesRedirect = createEnableCookiesRedirect(enableCookiesPath);
+  const enableCookiesRedirect = createEnableCookiesRedirect(
+    config.apiKey,
+    enableCookiesPath,
+  );
 
   return async function shopifyAuth(ctx: Context, next: NextFunction) {
     if (ctx.path === oAuthStartPath && !hasCookieAccess(ctx)) {

packages/koa-shopify-auth/src/auth/redirection-page.ts

@@ -1,18 +1,21 @@
-export default function redirectionScript({origin, redirectTo}) {
+export default function redirectionScript({origin, redirectTo, apiKey}) {
   return `
-    <script type="text/javascript">
+    <script src="https://unpkg.com/@shopify/app-bridge@^1"></script> <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', function() {
         if (window.top === window.self) {
           // If the current window is the 'parent', change the URL by setting location.href
           window.location.href = '${redirectTo}';
         } else {
           // If the current window is the 'child', change the parent's URL with postMessage
-          data = JSON.stringify({
-            message: 'Shopify.API.remoteRedirect',
-            data: { location: '${redirectTo}' }
+          var AppBridge = window['app-bridge'];
+          var createApp = AppBridge.default;
+          var Redirect = AppBridge.actions.Redirect;
+          var app = createApp({
+            apiKey: '${apiKey}',
+            shopOrigin: '${origin}',
           });
-
-          window.parent.postMessage(data, '${origin}');
+          var redirect = Redirect.create(app);
+          redirect.dispatch(Redirect.Action.REMOTE, '${redirectTo}');
         }
       });
     </script>

packages/koa-shopify-auth/src/auth/test/enable-cookies-redirect.test.ts

@@ -14,10 +14,11 @@ const query = querystring.stringify.bind(querystring);
 const baseUrl = 'myapp.com/auth';
 const shop = 'shop1.myshopify.io';
 const path = '/auth/enable_cookies';
+const apiKey = 'somekey';
 
 describe('CreateEnableCookiesRedirect', () => {
   it('sets the test cookie', () => {
-    const enableCookiesRedirect = createEnableCookiesRedirect(path);
+    const enableCookiesRedirect = createEnableCookiesRedirect(apiKey, path);
     const ctx = createMockContext({
       url: `https://${baseUrl}?${query({shop})}`,
     });
@@ -28,14 +29,14 @@ describe('CreateEnableCookiesRedirect', () => {
   });
 
   it('sets up and calls the top level redirect', () => {
-    const enableCookiesRedirect = createEnableCookiesRedirect(path);
+    const enableCookiesRedirect = createEnableCookiesRedirect(apiKey, path);
     const ctx = createMockContext({
       url: `https://${baseUrl}?${query({shop})}`,
     });
 
     enableCookiesRedirect(ctx);
 
-    expect(createTopLevelRedirect).toHaveBeenCalledWith(path);
+    expect(createTopLevelRedirect).toHaveBeenCalledWith(apiKey, path);
     expect(mockTopLevelRedirect).toHaveBeenCalledWith(ctx);
   });
 });

packages/koa-shopify-auth/src/auth/test/index.test.ts

@@ -47,6 +47,7 @@ describe('Index', () => {
         await shopifyAuth(ctx, nextFunction);
 
         expect(createEnableCookiesRedirect).toHaveBeenCalledWith(
+          'myapikey',
           '/auth/enable_cookies',
         );
         expect(mockEnableCookiesRedirect).toHaveBeenCalledWith(ctx);
@@ -64,6 +65,7 @@ describe('Index', () => {
         await shopifyAuth(ctx, nextFunction);
 
         expect(createTopLevelOAuthRedirect).toHaveBeenCalledWith(
+          'myapikey',
           '/auth/inline',
         );
         expect(mockTopLevelOAuthRedirect).toHaveBeenCalledWith(ctx);

packages/koa-shopify-auth/src/auth/test/top-level-oauth-redirect.test.ts

@@ -14,10 +14,11 @@ const query = querystring.stringify.bind(querystring);
 const baseUrl = 'myapp.com/auth';
 const shop = 'shop1.myshopify.io';
 const path = '/auth/inline';
+const apiKey = 'somekey';
 
 describe('CreateTopLevelOAuthRedirect', () => {
   it('sets the test cookie', () => {
-    const topLevelOAuthRedirect = createTopLevelOAuthRedirect(path);
+    const topLevelOAuthRedirect = createTopLevelOAuthRedirect(apiKey, path);
     const ctx = createMockContext({
       url: `https://${baseUrl}?${query({shop})}`,
     });
@@ -28,14 +29,14 @@ describe('CreateTopLevelOAuthRedirect', () => {
   });
 
   it('sets up and calls the top level redirect', () => {
-    const topLevelOAuthRedirect = createTopLevelOAuthRedirect(path);
+    const topLevelOAuthRedirect = createTopLevelOAuthRedirect(apiKey, path);
     const ctx = createMockContext({
       url: `https://${baseUrl}?${query({shop})}`,
     });
 
     topLevelOAuthRedirect(ctx);
 
-    expect(createTopLevelRedirect).toHaveBeenCalledWith(path);
+    expect(createTopLevelRedirect).toHaveBeenCalledWith(apiKey, path);
     expect(mockTopLevelRedirect).toHaveBeenCalledWith(ctx);
   });
 });

packages/koa-shopify-auth/src/auth/test/top-level-redirect.test.ts

@@ -9,11 +9,12 @@ const query = querystring.stringify.bind(querystring);
 const baseUrl = 'myapp.com/auth';
 const path = '/path';
 const shop = 'shop1.myshopify.io';
-const shopOrigin = 'https://shop1.myshopify.io';
+const shopOrigin = 'shop1.myshopify.io';
+const apiKey = 'fakekey';
 
 describe('TopLevelRedirect', () => {
   it('redirects to the provided path with shop parameter', () => {
-    const topLevelRedirect = createTopLevelRedirect(path);
+    const topLevelRedirect = createTopLevelRedirect(apiKey, path);
     const ctx = createMockContext({
       url: `https://${baseUrl}?${query({shop})}`,
     });
@@ -24,6 +25,7 @@ describe('TopLevelRedirect', () => {
       redirectionPage({
         redirectTo: `https://myapp.com/path?${query({shop})}`,
         origin: shopOrigin,
+        apiKey,
       }),
     );
   });