fix(oidc): add PKCE support for keycloak login flow

frontend/src/pages/LoginPage.vue

@@ -64,9 +64,15 @@ async function handleLogin() {
 }
 
 async function redirectToOidc(options = {}) {
+  const pkce = await generatePkcePair()
+  sessionStorage.setItem('oidc_pkce_verifier', pkce.codeVerifier)
   sessionStorage.setItem('post_login_redirect', getPostLoginRedirect())
   const callbackUrl = `${window.location.origin}/auth/callback`
-  const res = await getOidcAuthorizeUrl(callbackUrl, options)
+  const res = await getOidcAuthorizeUrl(callbackUrl, {
+    ...options,
+    codeChallenge: pkce.codeChallenge,
+    codeChallengeMethod: 'S256'
+  })
   const authorizeUrl = res.data.authorize_url
   const parsed = new URL(authorizeUrl)
   const state = parsed.searchParams.get('state')
@@ -75,4 +81,21 @@ async function redirectToOidc(options = {}) {
   }
   window.location.href = authorizeUrl
 }
+
+async function generatePkcePair() {
+  const randomBytes = new Uint8Array(32)
+  window.crypto.getRandomValues(randomBytes)
+  const codeVerifier = toBase64Url(randomBytes)
+  const digest = await window.crypto.subtle.digest('SHA-256', new TextEncoder().encode(codeVerifier))
+  const codeChallenge = toBase64Url(new Uint8Array(digest))
+  return { codeVerifier, codeChallenge }
+}
+
+function toBase64Url(bytes) {
+  let binary = ''
+  for (let i = 0; i < bytes.length; i += 1) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
 </script>