Skip to content

Improve CLI store auth confirmation page #7276

@PhilMcClelland

Description

@PhilMcClelland

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.tsrenderAuthCallbackPage()
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions