@@ -423,7 +66,7 @@ export default function createEnableCookies({apiKey}: OAuthStartOptions) {
Redirecting…
+
+
+
+
+
+
+
+`;
+ };
+}
diff --git a/packages/koa-shopify-auth/src/auth/index.ts b/packages/koa-shopify-auth/src/auth/index.ts
index 527fb67616..a1d25ae80e 100644
--- a/packages/koa-shopify-auth/src/auth/index.ts
+++ b/packages/koa-shopify-auth/src/auth/index.ts
@@ -5,19 +5,25 @@ import {OAuthStartOptions, AccessMode, NextFunction} from '../types';
import createOAuthStart from './create-oauth-start';
import createOAuthCallback from './create-oauth-callback';
import createEnableCookies from './create-enable-cookies';
-import createEnableCookiesRedirect from './create-enable-cookies-redirect';
import createTopLevelOAuthRedirect from './create-top-level-oauth-redirect';
+import createRequestStorageAccess from './create-request-storage-access';
const DEFAULT_MYSHOPIFY_DOMAIN = 'myshopify.com';
const DEFAULT_ACCESS_MODE: AccessMode = 'online';
export const TOP_LEVEL_OAUTH_COOKIE_NAME = 'shopifyTopLevelOAuth';
export const TEST_COOKIE_NAME = 'shopifyTestCookie';
+export const GRANTED_STORAGE_ACCESS_COOKIE_NAME =
+ 'shopify.granted_storage_access';
function hasCookieAccess({cookies}: Context) {
return Boolean(cookies.get(TEST_COOKIE_NAME));
}
+function grantedStorageAccess({cookies}: Context) {
+ return Boolean(cookies.get(GRANTED_STORAGE_ACCESS_COOKIE_NAME));
+}
+
function shouldPerformInlineOAuth({cookies}: Context) {
return Boolean(cookies.get(TOP_LEVEL_OAUTH_COOKIE_NAME));
}
@@ -47,15 +53,17 @@ export default function createShopifyAuth(options: OAuthStartOptions) {
const enableCookiesPath = `${oAuthStartPath}/enable_cookies`;
const enableCookies = createEnableCookies(config);
- const enableCookiesRedirect = createEnableCookiesRedirect(
- config.apiKey,
- enableCookiesPath,
- );
+ const requestStorageAccess = createRequestStorageAccess(config);
return async function shopifyAuth(ctx: Context, next: NextFunction) {
ctx.cookies.secure = true;
- if (ctx.path === oAuthStartPath && !hasCookieAccess(ctx)) {
- await enableCookiesRedirect(ctx);
+
+ if (
+ ctx.path === oAuthStartPath &&
+ !hasCookieAccess(ctx) &&
+ !grantedStorageAccess(ctx)
+ ) {
+ await requestStorageAccess(ctx);
return;
}
diff --git a/packages/koa-shopify-auth/src/auth/test/enable-cookies-redirect.test.ts b/packages/koa-shopify-auth/src/auth/test/enable-cookies-redirect.test.ts
deleted file mode 100644
index 6ff08dc1cb..0000000000
--- a/packages/koa-shopify-auth/src/auth/test/enable-cookies-redirect.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import querystring from 'querystring';
-
-import {createMockContext} from '@shopify/jest-koa-mocks';
-
-import createEnableCookiesRedirect from '../create-enable-cookies-redirect';
-import createTopLevelRedirect from '../create-top-level-redirect';
-
-const mockTopLevelRedirect = jest.fn();
-jest.mock('../create-top-level-redirect', () =>
- jest.fn(() => mockTopLevelRedirect),
-);
-
-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(apiKey, path);
- const ctx = createMockContext({
- url: `https://${baseUrl}?${query({shop})}`,
- });
-
- enableCookiesRedirect(ctx);
-
- expect(ctx.cookies.set).toHaveBeenCalledWith('shopifyTestCookie', '1', {});
- });
-
- it('sets up and calls the top level redirect', () => {
- const enableCookiesRedirect = createEnableCookiesRedirect(apiKey, path);
- const ctx = createMockContext({
- url: `https://${baseUrl}?${query({shop})}`,
- });
-
- enableCookiesRedirect(ctx);
-
- expect(createTopLevelRedirect).toHaveBeenCalledWith(apiKey, path);
- expect(mockTopLevelRedirect).toHaveBeenCalledWith(ctx);
- });
-});
diff --git a/packages/koa-shopify-auth/src/auth/test/enable-cookies.test.ts b/packages/koa-shopify-auth/src/auth/test/enable-cookies.test.ts
index 0e6becb9df..604a6ef6a1 100644
--- a/packages/koa-shopify-auth/src/auth/test/enable-cookies.test.ts
+++ b/packages/koa-shopify-auth/src/auth/test/enable-cookies.test.ts
@@ -26,6 +26,6 @@ describe('CreateEnableCookies', () => {
expect(ctx.body).toContain('CookiePartitionPrompt');
expect(ctx.body).toContain(baseConfig.apiKey);
expect(ctx.body).toContain(shopOrigin);
- expect(ctx.body).toContain(`window.location.href = "/auth?shop=${shop}"`);
+ expect(ctx.body).toContain(`redirectUrl: "/auth?shop=${shop}"`);
});
});
diff --git a/packages/koa-shopify-auth/src/auth/test/index.test.ts b/packages/koa-shopify-auth/src/auth/test/index.test.ts
index 68fd5c79e4..4ace23bb57 100644
--- a/packages/koa-shopify-auth/src/auth/test/index.test.ts
+++ b/packages/koa-shopify-auth/src/auth/test/index.test.ts
@@ -2,7 +2,7 @@ import {createMockContext} from '@shopify/jest-koa-mocks';
import createShopifyAuth from '../index';
import createTopLevelOAuthRedirect from '../create-top-level-oauth-redirect';
-import createEnableCookiesRedirect from '../create-enable-cookies-redirect';
+import createRequestStorageAccess from '../create-request-storage-access';
import {OAuthStartOptions} from '../../types';
const mockTopLevelOAuthRedirect = jest.fn();
@@ -10,9 +10,9 @@ jest.mock('../create-top-level-oauth-redirect', () =>
jest.fn(() => mockTopLevelOAuthRedirect),
);
-const mockEnableCookiesRedirect = jest.fn();
-jest.mock('../create-enable-cookies-redirect', () =>
- jest.fn(() => mockEnableCookiesRedirect),
+const mockRequestStorageAccess = jest.fn();
+jest.mock('../create-request-storage-access', () => () =>
+ mockRequestStorageAccess,
);
const mockOAuthStart = jest.fn();
@@ -38,7 +38,7 @@ function nextFunction() {}
describe('Index', () => {
describe('with the /auth path', () => {
describe('with no test cookie', () => {
- it('redirects to enable cookies', async () => {
+ it('redirects to request storage access', async () => {
const shopifyAuth = createShopifyAuth(baseConfig);
const ctx = createMockContext({
url: `https://${baseUrl}`,
@@ -46,11 +46,25 @@ describe('Index', () => {
await shopifyAuth(ctx, nextFunction);
- expect(createEnableCookiesRedirect).toHaveBeenCalledWith(
+ expect(mockRequestStorageAccess).toHaveBeenCalledWith(ctx);
+ });
+ });
+
+ describe('with no test cookie but a granted storage access cookie', () => {
+ it('redirects to /auth/inline at the top-level', async () => {
+ const shopifyAuth = createShopifyAuth(baseConfig);
+ const ctx = createMockContext({
+ url: `https://${baseUrl}`,
+ cookies: {'shopify.granted_storage_access': '1'},
+ });
+
+ await shopifyAuth(ctx, nextFunction);
+
+ expect(createTopLevelOAuthRedirect).toHaveBeenCalledWith(
'myapikey',
- '/auth/enable_cookies',
+ '/auth/inline',
);
- expect(mockEnableCookiesRedirect).toHaveBeenCalledWith(ctx);
+ expect(mockTopLevelOAuthRedirect).toHaveBeenCalledWith(ctx);
});
});
-
diff --git a/packages/koa-shopify-auth/src/auth/create-request-storage-access.ts b/packages/koa-shopify-auth/src/auth/create-request-storage-access.ts
new file mode 100644
index 0000000000..7c67b2389c
--- /dev/null
+++ b/packages/koa-shopify-auth/src/auth/create-request-storage-access.ts
@@ -0,0 +1,82 @@
+import {Context} from 'koa';
+
+import {OAuthStartOptions} from '../types';
+
+import css from './client/polaris-css';
+import itpHelper from './client/itp-helper';
+import requestStorageAccess from './client/request-storage-access';
+import storageAccessHelper from './client/storage-access-helper';
+import Error from './errors';
+
+const HEADING = 'This app needs access to your browser data';
+const BODY =
+ 'Your browser is blocking this app from accessing your data. To continue using this app, click Continue, then click Allow if the browser prompts you.';
+const ACTION = 'Continue';
+
+export default function createRequestStorageAccess({
+ apiKey,
+}: OAuthStartOptions) {
+ return function requestStorage(ctx: Context) {
+ const {query} = ctx;
+ const {shop} = query;
+
+ if (shop == null) {
+ ctx.throw(400, Error.ShopParamMissing);
+ return;
+ }
+
+ ctx.body = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${HEADING}
+
+
+ ${BODY}
+
+
+
+
+
+
+
+