From a8d23114a4722d08d1eb63590f8c7ef96fc4ea29 Mon Sep 17 00:00:00 2001 From: River Date: Mon, 13 Apr 2026 20:08:23 +0000 Subject: [PATCH] Redesign store auth callback page to match Identity UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adapt the OAuth callback page served during `shopify store auth` to match the visual design of accounts.shopify.com/activate (Shopify Identity's device authorization flow). Changes: - Dark background with radial gradient matching Identity login pages - Shopify bag icon SVG centered above the card (same asset as Identity) - White card with 24px border-radius, 40px padding, and Identity's exact box-shadow treatment - Typography matching Identity: 24px/600 heading, 14px subdued body - Vertically centered layout with fixed "Shopify CLI" footer - Fully self-contained — no external CSS, fonts, or CDN dependencies The page is served from localhost during the PKCE OAuth flow, so all styles and assets must be inline. The Shopify bag SVG is the same one used by accounts.shopify.com/activate. Co-authored-by: Phil McClelland --- .../src/cli/services/store/auth/callback.ts | 86 +++++++++++++++++-- 1 file changed, 79 insertions(+), 7 deletions(-) diff --git a/packages/cli/src/cli/services/store/auth/callback.ts b/packages/cli/src/cli/services/store/auth/callback.ts index 4e3735da45..e5d86b313c 100644 --- a/packages/cli/src/cli/services/store/auth/callback.ts +++ b/packages/cli/src/cli/services/store/auth/callback.ts @@ -18,20 +18,92 @@ function renderAuthCallbackPage(title: string, message: string): string { const safeTitle = title.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"') const safeMessage = message.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"') + // Shopify bag icon SVG — same asset used by accounts.shopify.com/activate + const shopifyLogo = `` + return ` ${safeTitle} + - -
-
-

${safeTitle}

-

${safeMessage}

-
-
+ +
+
${shopifyLogo}
+
+

${safeTitle}

+

${safeMessage}

+
+
+ ` }