Context
The shopify store auth PKCE OAuth callback page served on localhost is bare-bones — a white card on a grey background with just a title and message. No icon, no branding, no visual distinction between success and failure states.
Flagged by Eytan Seidman as "a bit sad." Slack thread: https://shopify.slack.com/archives/C0AH9BNDWH3/p1775507616133679
Current state
- Code:
packages/cli/src/cli/services/store/auth/callback.ts → renderAuthCallbackPage()
- Self-contained inline HTML served from
127.0.0.1:{port}/auth/callback
- Success and failure pages are visually identical — no icon, no color, no branding
Precedent research
- Identity device auth success page (
//areas/platforms/identity/app/views/device_authorization_verification/success.html.erb) — closest functional cousin. Full Polaris layout with "Successfully logged in… You can close this tab." Phil prefers this direction.
- Identity 500.html — closest structural precedent (self-contained HTML, no external deps). Minimal, left-aligned, no card.
- CLI theme dev error page (
packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts) — uses Polaris CSS from CDN. Only other inline HTML page in the CLI.
Direction
- Model after the Identity device auth success page style
- Stay self-contained (no CDN deps) since it's served from localhost
- Add success/failure icon with color distinction
- Better typography and visual hierarchy
- Subtle Shopify CLI branding
Constraints
- Must remain self-contained inline HTML (no external assets)
- Served from localhost during PKCE flow — ephemeral/disposable page
- No server-side rendering available
Context
The
shopify store authPKCE OAuth callback page served on localhost is bare-bones — a white card on a grey background with just a title and message. No icon, no branding, no visual distinction between success and failure states.Flagged by Eytan Seidman as "a bit sad." Slack thread: https://shopify.slack.com/archives/C0AH9BNDWH3/p1775507616133679
Current state
packages/cli/src/cli/services/store/auth/callback.ts→renderAuthCallbackPage()127.0.0.1:{port}/auth/callbackPrecedent research
//areas/platforms/identity/app/views/device_authorization_verification/success.html.erb) — closest functional cousin. Full Polaris layout with "Successfully logged in… You can close this tab." Phil prefers this direction.packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts) — uses Polaris CSS from CDN. Only other inline HTML page in the CLI.Direction
Constraints