Skip to content

Migrate React oidc-spa example to Vite, React 19 and oidc-spa 10 - #30

Closed
Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/react-oidc-spa
Closed

Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/react-oidc-spa

Conversation

@Wictorgirardi

@Wictorgirardi Wictorgirardi commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Depends on #28: this branch includes its commit, so review the last commit only until #28 is merged.

Summary

  • Toolchain: Create React App → Vite 8, React 19.3, TypeScript 6.0, Tailwind CSS 4, ESLint 10 flat config and Prettier. Same scaffold as the oidc-client-ts example (Migrate React oidc-client-ts example to Vite, React 19 and react-oidc-context 3 #29).
  • Auth library: oidc-spa 5 → 10.2, following the pattern used in Phase Two's dashboard and idp-wizard.
  • src/oidc.ts:
    • oidcSpa from oidc-spa/react-spa, with a zod looseObject schema so decodedIdToken is typed and still shows every claim.
    • bootstrapOidc reads VITE_OIDC_* env vars, including a mock mode (VITE_OIDC_USE_MOCK=true) and debug logs.
    • fetchWithAuth for calling APIs with the access token.
  • Vite: the oidcSpa() plugin with browserRuntimeFreeze.
  • UI:
    • OidcInitializationGate around the status area.
    • Logout through Keycloak with logout({ redirectTo: "home" }).
    • A "Manage account" link to the Keycloak account console.
    • Decoded access token (oidc-spa/decode-jwt, refreshed on rotation) and ID token panels.
    • An auto-logout warning overlay.
  • Removed:
    • The v5 createReactOidc / publicUrl setup. process.env.BASE_URL was always undefined under CRA.
    • The token console.log and the circular import from the entry file.
  • Deploy: vercel.json pins the Vite preset. The workflow calls the shared CI and deploy workflows.

Test plan

  • pnpm install --frozen-lockfile && pnpm typecheck && pnpm lint && pnpm build pass on Node 24.
  • tools/e2e-smoke passes against the local Keycloak: log in, decoded tokens shown, log out.
  • Mock mode: the mock user logs in and out with no page errors.
  • Vercel preview deploy. It's skipped for PRs from forks, so it first runs after merge.

@Wictorgirardi

Copy link
Copy Markdown
Contributor Author

Combined into #44 with the other SPA examples. The changes are the same; only the commit SHAs differ.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant