Keycloak OIDC + Vite + Express

Progetto full-stack con login tramite OIDC/PKCE su Keycloak, usando openid-client. Serve il frontend Vite attraverso Express (middleware in dev, static build in prod).

Requisiti

• Node 18+
• Keycloak con realm e client configurati:
  • Client type: Public (PKCE)
  • Valid Redirect URIs: https://my.patachina2.casacam.net/auth/callback
  • Web Origins: https://my.patachina2.casacam.net

Setup

1. Copia file.env in '.env' e inserisci i tuoi valori (issuer discovery, client id, redirect).
2. Installa: npm install
3. Run dev npm run dev
4. Run public npm run build npm run preview

Keycloak setting

collegarsi con keycloak come amministratore

https://auth.patachina2.casacam.net/admin

create realm x esempio demo

sul menù a tendina di Admin pulsante create realm

inserire realm name demo e lasciare enabled on

se non va da solo andare su demo nello stesso menù a tendina e poi andate su Clients

create client "my-app"

Client type 			OpenID connect
Client_ID   			my-app
client authentication	on
Authorization 			off

rimangono spuntati

Standard Flow
Direct access grant

Valid redirect URIs url della mia app

https://my.patachina2.casacam.net/*

• significa che abiliti il redirect di qualsiasi route altrimenti metti /callback che è quella standard

Web origins

https://my.patachina2.casacam.net

lascia

Front channel logout	on
Backchannel logout		on

vai in credentials e copia Client Secret

questo va inserito nel file .env

vai su users e add/create new user

metti le info

Username	fabio
Email		fabio.micheluz@gmail.com
Fisrt name 	Fabio
Last name	Micheluz

se metti

Email verified	yes

devi settare tutto (vedi dopo)

vai su credientials e inserisci la password x es master66

questa verrà utilizzata dallo user fabio per autorizzare la connessione

se lasci

Temporary on

al primo collegamento chiede di cambiare password