Skip to content

Redesign store auth callback page to match Identity UI#7278

Merged
PhilMcClelland merged 2 commits intomainfrom
river-improve-auth-callback-page
Apr 17, 2026
Merged

Redesign store auth callback page to match Identity UI#7278
PhilMcClelland merged 2 commits intomainfrom
river-improve-auth-callback-page

Conversation

@PhilMcClelland
Copy link
Copy Markdown
Contributor

@PhilMcClelland PhilMcClelland commented Apr 13, 2026

Redesign 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).

Before: Plain light-gray page with inline styles, a basic white card, and no branding.

After:

  • 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
  • Copy cleanup: contractions, dropped trailing periods, tighter success message
  • 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.

image image

Closes #7276

@PhilMcClelland PhilMcClelland requested a review from a team as a code owner April 13, 2026 20:10
@PhilMcClelland PhilMcClelland disabled auto-merge April 13, 2026 20:26
@gonzaloriestra gonzaloriestra force-pushed the river-improve-auth-callback-page branch from a8d2311 to 72985b0 Compare April 17, 2026 08:34
Copy link
Copy Markdown
Contributor

@gonzaloriestra gonzaloriestra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@PhilMcClelland
Copy link
Copy Markdown
Contributor Author

Thanks, @isaacroldan + @gonzaloriestra !

River and others added 2 commits April 17, 2026 10:17
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 <phil.mcclelland@shopify.com>
- Remove "Shopify CLI" footer (unnecessary, caused fixed-position overlap on short viewports)
- Use contractions in error messages per CLI design guidelines
- Drop trailing periods on single-sentence copy
- Tighten success message to imperative form

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@PhilMcClelland PhilMcClelland force-pushed the river-improve-auth-callback-page branch from 72985b0 to cf966e2 Compare April 17, 2026 14:22
@PhilMcClelland PhilMcClelland added this pull request to the merge queue Apr 17, 2026
Merged via the queue into main with commit dcdfa3b Apr 17, 2026
24 of 25 checks passed
@PhilMcClelland PhilMcClelland deleted the river-improve-auth-callback-page branch April 17, 2026 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve CLI store auth confirmation page

3 participants