Server-render social login buttons with provider brand icons

[kentcdodds]

The provider buttons on /login and /signup popped in after hydration because the client fetched /auth/providers.json on mount. There was no good reason for that: the enabled-provider list is deployment configuration, not per-user data. This PR server-renders the buttons with the rest of the page and adds inline brand SVGs so they are recognizable.

Server-rendered buttons

• authProviders is a new AppLoaderData key; the login/signup page handler embeds the enabled providers during SSR, so the buttons are in the initial HTML (verified with curl /login — all three buttons and SVGs present in the document).
• The login route consumes the embedded payload via tryConsumeRouteLoaderData (works during SSR and at hydration), SPA navigations to /login / /signup prefetch through a new entry in clientRouteLoaders, and the old client fetch remains only as a fallback when neither source provided data. A failed providers fetch now yields no loader data (instead of masquerading as an empty provider list), so the fallback retries rather than hiding the buttons until a full reload.

Brand icons

• New client/provider-icons.tsx with inline SVG marks (GitHub octocat, multicolor Google G, X logo) sized in em so they scale with the button text and inherit currentColor where appropriate.
• Icons render on the login/signup buttons and in the /account Connected accounts card (connected rows and Connect buttons).

Also merges origin/main (resolving the routes-index conflict with the onboarding page) and fixes two pre-existing formatting drifts on main that format:check flags (d1-retry.ts, sentry-options.ts).

System recap — composes existing primitives (low risk)

Mode: recap · Base: main @ ecfeed79 · Head: ddf2f919

Classification: composes — wires the existing SSR loader-data mechanism to the existing social-login provider list and adds presentational SVG icons; no primitive contracts change.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	composes — login/signup buttons come from SSR loader data instead of a mount-time fetch; inline provider brand SVGs
app-sessions	auth	composes — login/signup page handler embeds the enabled-provider list as loader data (read-only reuse of getEnabledOauthProviders)

System map

flowchart LR
	appUi["app-ui"]:::touched
	appSessions["app-sessions"]:::touched
	d1AppDb["d1-app-db"]:::untouched
	appUi --> appSessions --> d1AppDb
	classDef touched fill:#1a7f37,color:#fff
	classDef extended fill:#9a6700,color:#fff
	classDef added fill:#cf222e,color:#fff
	classDef untouched fill:#57606a,color:#fff

Loading

  

Summary by CodeRabbit

• New Features
  • Added provider icons to the account “Connected accounts” list and to authentication sign-in/sign-up buttons.
  • Enabled server-preloaded authentication provider rendering for faster, smoother initial load.
• Bug Fixes
  • Reduced provider option “popping” by preferring preloaded server data during hydration when available.
  • Improved provider button styling for consistent icon/text alignment and spacing.
  • Updated provider fetching behavior to treat request failures as “no data” (instead of an empty list).

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds inline provider icons to login and account UIs, and preloads enabled auth providers through server-rendered loader data and a client route loader for login and signup routes.

Changes

Provider icons and auth provider preloading

Layer / File(s)	Summary
Provider icons packages/worker/client/provider-icons.tsx	Defines inline SVG renderers for GitHub, Google, and X, maps them by provider id, and exports ProviderIcon for handle-based selection.
Auth provider loader data packages/worker/src/app/loader-data.ts, packages/worker/src/app/handlers/auth-page.ts	Adds AuthProvidersLoaderData, extends AppLoaderData, and embeds enabled provider ids and labels into loaderData.authProviders during auth-page rendering.
Login route loader and preload flow packages/worker/client/routes/login.tsx, packages/worker/client/routes/index.tsx	Adds authProvidersRouteLoader, wires it to /login and /signup, and updates LoginRoute to consume loader data or fetch providers only when needed.
Provider icon UI integration packages/worker/client/routes/login.tsx, packages/worker/client/routes/account.tsx	Renders provider icons in login and connected-account controls, and adds inline-flex button styles for icon/label layout.
Auth provider fetch null contract packages/worker/client/social-sign-in.ts	Changes fetchEnabledAuthProviders to return null on request, parse, or non-OK failures instead of an empty array.
Estimated code review effort: 3 (Moderate)	~25 minutes

Possibly related PRs

• kentcdodds/kody#601: Covers the auth/login SSR and hydration data flow that this PR extends with authProviders loader payloads.
• kentcdodds/kody#678: Adds the enabled OAuth provider source and definitions that this PR reads when building auth provider payloads.
• kentcdodds/kody#683: Modifies the same social-login and connected-accounts client paths that this PR updates for provider fetching and rendering.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: server-rendered social login buttons with brand icons.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/ssr-social-buttons-247b

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🔎 Preview deployed: https://kody-pr-684.kody-a99.workers.dev

Worker: kody-pr-684
D1: kody-pr-684-db
KV: kody-pr-684-oauth-kv

Mocks:

• cloudflare: https://kody-pr-684-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-684-mock-cloudflare)

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1da1306. Configure here.}