Skip to content

Migrate Nuxt keycloak-js example to Nuxt 4 and keycloak-js 26 - #33

Closed
Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/nuxt-keycloak-js
Closed

Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/nuxt-keycloak-js

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 with the Nuxt 4 app/ directory layout, TypeScript 6.0 (nuxt typecheck), @nuxt/eslint with ESLint 10, and Tailwind CSS 4 through @tailwindcss/vite. The PostCSS setup, tailwind.config.js and the pnpm shamefully-hoist .npmrc are gone, and @nuxt/devtools: "latest" is no longer pinned.
  • Auth library: keycloak-js 25 → 26.2.
  • app/plugins/keycloak.client.ts:
    • Now awaits init before the app renders, so the logged-out UI no longer flashes.
    • Uses check-sso with a silent check page (public/silent-check-sso.html) instead of a full-page round trip on every load, plus PKCE S256 and checkLoginIframe: false.
    • Refreshes the token on onTokenExpired; it was never refreshed before.
    • Exposes the adapter through provide.
  • Config: comes from runtimeConfig.public (NUXT_PUBLIC_KEYCLOAK_URL, _REALM, _CLIENT_ID) instead of hardcoded values. .env.example targets the local Keycloak from Add shared CI workflows, local Keycloak and contributing guide #28.
  • Reactive state: useKeycloak() holds it in useState, and logout redirects back to the app.
  • Rendering: app.vue renders <NuxtLayout><NuxtPage/>. Before, the pages and layout were dead code.
  • UI:
    • Shared layout with inline SVG icons (drops iconify-icon and jwt-decode, since keycloak-js already provides parsed tokens).
    • <script setup> everywhere, and the htmlFor React-isms are fixed.
  • Tooling: pnpm 10.34 via packageManager (with onlyBuiltDependencies), Node 24. 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; the build produces .vercel/output.
  • tools/e2e-smoke passes against the local Keycloak: log in, decoded tokens shown, log out.
  • Reloading while logged in keeps the session through the silent check-sso.
  • 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