Skip to content

Migrate Nuxt oidc-client-ts example to Nuxt 4, oidc-client-ts 3 and Pinia 4 - #34

Closed
Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/nuxt-oidc-client-ts
Closed

Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/nuxt-oidc-client-ts

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

  • Stack: Nuxt 3.20 → 4.5 (app/ layout), TypeScript 6.0, @nuxt/eslint with ESLint 10, and Tailwind CSS 4 through @tailwindcss/vite. Same scaffold as the Nuxt keycloak-js example (Migrate Nuxt keycloak-js example to Nuxt 4 and keycloak-js 26 #33).
  • Libraries: oidc-client-ts 2 → 3.5, pinia 2 → 4, @pinia/nuxt 0.4 → 1.0.
  • Broken build fixed: services/application-service.ts imported a ./keycloak-config file that was deleted in 2024.
  • app/plugins/oidc.client.ts: a single UserManager. Before, every useServices() call created a new one, each with its own silent-renew timer.
  • app/stores/auth.ts: a Pinia setup store driven by oidc-client-ts events, with signIn, signOut and the callback handlers. Components read it with storeToRefs; the old component copied authStore.user and lost reactivity.
  • app/middleware/auth.global.ts: loads the stored user once, before any page renders.
  • Config:
    • Comes from runtimeConfig.public (NUXT_PUBLIC_OIDC_ISSUER_URI, NUXT_PUBLIC_OIDC_CLIENT_ID), replacing the require("dotenv") call (dotenv wasn't a declared dependency).
    • The issuer is now a full realm URL instead of a domain with /auth/realms/ appended.
    • The unused client secret is removed; this is a public SPA.
  • Storage: tokens use the library's default session storage. The old explicit WebStorageStateStore used localStorage.
  • Removed: the /logout page (logout is signOutRedirect from the store), overrides: { vue: "latest" }, and @nuxt/devtools: "latest".
  • .env.example: targets the local Keycloak from Add shared CI workflows, local Keycloak and contributing guide #28. It used to contain the retired usw2.auth.ac host and the wrong client (remix-example).
  • UI: shared layout with inline SVG icons, <script setup> everywhere, and the fixed "[oidc-client-js]" label.

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.
  • Reloading while logged in keeps the session.
  • Vercel preview deploy. It's skipped for PRs from forks, so it first runs after merge. The old KEYCLOAK_* env vars on the Vercel project become unused and can be removed.

@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