Skip to content

feat(kanban-ui): optional PKCE OIDC auth gate - #20

Draft
Pjore wants to merge 1 commit into
mainfrom
feat/oidc-pkce-auth
Draft

feat(kanban-ui): optional PKCE OIDC auth gate#20
Pjore wants to merge 1 commit into
mainfrom
feat/oidc-pkce-auth

Conversation

@Pjore

@Pjore Pjore commented May 19, 2026

Copy link
Copy Markdown
Owner

Summary

Adds optional OIDC/PKCE authentication to kanban-ui using oidc-client-ts v3.5.0.
Auth is fully opt-in — omit VITE_ZITADEL_ISSUER and VITE_CLIENT_ID and
the app behaves exactly as before.

What was added

File Purpose
src/lib/auth.ts Singleton UserManager, getToken(), login(), logout(), handleCallback()
src/components/AuthGate.tsx Route guard — shows sign-in screen when unauthenticated
src/pages/AuthCallbackPage.tsx Handles /auth/callback, redirects to / on success
src/App.tsx /auth/callback route + <AuthGate> wrapper
src/providers/provider-factory.ts Passes getToken into createHttpProvider
src/app-shell/TopBar.tsx Sign out button (visible when auth is enabled)

Screenshots

Sign-in gate Sign-in gate
Authenticated (boards + sign out) Authenticated

Configuration

# apps/kanban-ui/.env
VITE_ZITADEL_ISSUER=https://your-oidc-provider.example.com
VITE_CLIENT_ID=<client-id>

Register http://localhost:5173/auth/callback (and /auth/callback on your
production domain) as redirect URIs in your OIDC provider.

Provider notes (Zitadel)

When testing locally with Zitadel, the app must be configured as Web type
(not User Agent / SPA) with Development Mode enabled so that HTTP redirect
URIs are accepted.

Testing

Tested end-to-end against a Zitadel instance: sign in → PKCE authorize redirect
→ login form → callback token exchange → boards page render → sign out. Flow
completes in ~1 s with no console errors.

Add oidc-client-ts v3.5.0 and wire a full PKCE authentication flow:

- auth.ts: singleton UserManager, getToken(), login(), logout(), handleCallback()
- AuthGate.tsx: route guard — shows sign-in screen when unauthenticated
- AuthCallbackPage.tsx: handles /auth/callback, redirects to / on success
- App.tsx: /auth/callback route + AuthGate wrapper
- provider-factory.ts: passes getToken into createHttpProvider
- TopBar.tsx: sign out button (visible when auth enabled)

Auth is opt-in: omit VITE_ZITADEL_ISSUER + VITE_CLIENT_ID to disable.
.env.example updated with generic placeholder (no private URLs).
README updated with auth quickstart and screenshots.
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