[codex] Add emulated auth provider login buttons

[BLamy]

What changed

• Adds a /login page with buttons for Microsoft Entra ID, Apple Sign In, Login with Google, Clerk, and Okta / Auth0.
• Adds shared header sign-in links so shoppers can reach the login page from the catalog and cart flows.
• Adds Netlify functions for /api/auth/login/:provider and /api/auth/callback/:provider; each login endpoint redirects to the matching emulated OAuth/OIDC authorization page.
• Extends the local Playwright harness to start and seed the Google, Apple, Microsoft, Okta, and Clerk emulators with callback URLs for the current test server.
• Adds an auth spec that clicks every provider button and verifies the browser lands on the expected emulator auth page.

Validation

• npm run check
• npm run test -- tests/auth.spec.ts
• npm run test -- tests/checkout.spec.ts

Companion change

• [codex] Seed auth provider emulators for app callbacks replayio/loop-qa#27 seeds worker-started auth emulators with the emulated app callback URL and exposes common provider env vars.

Summary by CodeRabbit

• New Features

  • Added a new sign-in page with multiple identity provider options.
  • Added login links in the site header and support for provider-specific authentication redirects.
  • Expanded local test/emulator setup to support several auth providers.

• Bug Fixes

  • Added explicit routing so auth login and callback requests resolve correctly in Netlify environments.

• Tests

  • Added end-to-end coverage for login provider buttons and provider-specific sign-in flows.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f42d81d8-1683-4a86-9706-7fea5c6552aa

📥 Commits

Reviewing files that changed from the base of the PR and between 146dc55 and 5d46260.

📒 Files selected for processing (15)

• .env.example
• netlify.toml
• netlify/functions/auth-callback.ts
• netlify/functions/auth-login.ts
• netlify/functions/auth-providers.ts
• playwright.config.ts
• scripts/e2e-server.ts
• scripts/test.ts
• src/App.tsx
• src/components/AuthProviderButtons.tsx
• src/components/SiteHeader.tsx
• src/components/navigation/SiteHeader.tsx
• src/lib/authProviders.ts
• src/pages/Login.tsx
• tests/auth.spec.ts

---

📝 Walkthrough

Walkthrough

Adds a multi-provider OAuth login flow: a new /login React page with AuthProviderButtons, two Netlify serverless functions (auth-login, auth-callback), a shared auth-providers config module, Netlify redirect rules, e2e server wiring, a generalized emulator test harness in scripts/test.ts, and Playwright auth tests.

Changes

OAuth Provider Login Feature

Layer / File(s)	Summary
Provider config and types src/lib/authProviders.ts, netlify/functions/auth-providers.ts	AUTH_PROVIDERS list and AuthProviderId type for the frontend; AUTH_PROVIDER_CONFIGS with per-provider credentials, scopes, and authorization URL builders (including emulator fallbacks) for the serverless layer.
Login page and SiteHeader sign-in link src/components/AuthProviderButtons.tsx, src/pages/Login.tsx, src/App.tsx, src/components/SiteHeader.tsx, src/components/navigation/SiteHeader.tsx	AuthProviderButtons renders styled provider anchor links; Login page composes header, sign-in copy, and buttons; /login route added to App; sign-in link with LogIn icon inserted into both SiteHeader variants.
Netlify auth-login and auth-callback functions netlify/functions/auth-login.ts, netlify/functions/auth-callback.ts, netlify.toml	auth-login handles GET-only OAuth redirect construction; auth-callback handles GET/POST code receipt and renders an HTML confirmation; redirect rules added to netlify.toml for both endpoints.
e2e server and Playwright config wiring scripts/e2e-server.ts, playwright.config.ts, .env.example	Auth handlers registered in the local e2e server's routing; OKTA_EMULATOR_URL constant and additional provider env vars added to Playwright's webServer env; .env.example extended with emulator override variables.
Generalized emulator harness scripts/test.ts	EmulatorService/EMULATORS definitions covering all auth providers; requiredServices() derives needed emulators from spec filename; writeAuthSeedConfig() writes YAML seed; authEnv() builds provider env; startRequiredEmulators() starts all; concurrent shutdown via Promise.all.
Playwright auth spec tests/auth.spec.ts	Test suite iterates over all five providers, navigates to /login, clicks provider button, waits for authorization URL, and asserts page text.

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant auth-login as auth-login (Netlify fn)
  participant OAuthProvider as OAuth Provider / Emulator
  participant auth-callback as auth-callback (Netlify fn)

  Browser->>auth-login: GET /api/auth/login/:provider
  auth-login->>auth-login: resolveOrigin, buildAuthorizationUrl, buildAuthState
  auth-login-->>Browser: 302 → provider authorization URL
  Browser->>OAuthProvider: GET authorization URL
  OAuthProvider-->>Browser: redirect to /api/auth/callback/:provider?code=…
  Browser->>auth-callback: GET /api/auth/callback/:provider?code=…
  auth-callback->>auth-callback: providerFromPath, getAuthProvider, extract code
  auth-callback-->>Browser: HTML confirmation page

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐇 Hop, hop, who goes there?
Five providers in the air—
Google, Apple, Clerk, Okta too,
Microsoft waving, "Log in through!"
The rabbit set the emulators free,
And now the login page works with glee! 🎉

✨ 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 codex/add-auth-provider-buttons

---

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.}