feat: refactor example-app with a new config (#4569)

This is a preparation for KubeCon 2026:
1. Restyle the app
2. Refactor advanced configuration options
3. Move embedded templates and css to separate files

Signed-off-by: maksim.nabokikh <max.nabokih@gmail.com>

Author: nabokihms

examples/example-app/main.go

@@ -3,11 +3,8 @@ package main
 import (
 	"bytes"
 	"context"
-	"crypto/rand"
-	"crypto/sha256"
 	"crypto/tls"
 	"crypto/x509"
-	"encoding/base64"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -17,7 +14,7 @@ import (
 	"net/http/httputil"
 	"net/url"
 	"os"
-	"strings"
+	"slices"
 	"time"
 
 	"github.com/coreos/go-oidc/v3/oidc"
@@ -33,8 +30,8 @@ var (
 )
 
 func init() {
-	codeVerifier = generateCodeVerifier()
-	codeChallenge = generateCodeChallenge(codeVerifier)
+	codeVerifier = oauth2.GenerateVerifier()
+	codeChallenge = oauth2.S256ChallengeFromVerifier(codeVerifier)
 }
 
 type app struct {
@@ -43,8 +40,9 @@ type app struct {
 	pkce         bool
 	redirectURI  string
 
-	verifier *oidc.IDTokenVerifier
-	provider *oidc.Provider
+	verifier        *oidc.IDTokenVerifier
+	provider        *oidc.Provider
+	scopesSupported []string
 
 	// Does the provider use "offline_access" scope to request a refresh token
 	// or does it use "access_type=offline" (e.g. Google)?
@@ -188,7 +186,9 @@ func cmd() *cobra.Command {
 
 			a.provider = provider
 			a.verifier = provider.Verifier(&oidc.Config{ClientID: a.clientID})
+			a.scopesSupported = s.ScopesSupported
 
+			http.Handle("/static/", http.StripPrefix("/static/", staticHandler))
 			http.HandleFunc("/", a.handleIndex)
 			http.HandleFunc("/login", a.handleLogin)
 			http.HandleFunc(u.Path, a.handleCallback)
@@ -226,7 +226,10 @@ func main() {
 }
 
 func (a *app) handleIndex(w http.ResponseWriter, r *http.Request) {
-	renderIndex(w)
+	renderIndex(w, indexPageData{
+		ScopesSupported: a.scopesSupported,
+		LogoURI:         dexLogoDataURI,
+	})
 }
 
 func (a *app) oauth2Config(scopes []string) *oauth2.Config {
@@ -240,15 +243,19 @@ func (a *app) oauth2Config(scopes []string) *oauth2.Config {
 }
 
 func (a *app) handleLogin(w http.ResponseWriter, r *http.Request) {
-	var scopes []string
-	if extraScopes := r.FormValue("extra_scopes"); extraScopes != "" {
-		scopes = strings.Split(extraScopes, " ")
-	}
-	var clients []string
-	if crossClients := r.FormValue("cross_client"); crossClients != "" {
-		clients = strings.Split(crossClients, " ")
+	if err := r.ParseForm(); err != nil {
+		http.Error(w, fmt.Sprintf("failed to parse form: %v", err), http.StatusBadRequest)
+		return
 	}
+
+	// Only use scopes that are checked in the form
+	scopes := r.Form["extra_scopes"]
+
+	clients := r.Form["cross_client"]
 	for _, client := range clients {
+		if client == "" {
+			continue
+		}
 		scopes = append(scopes, "audience:server:client_id:"+client)
 	}
 	connectorID := ""
@@ -257,7 +264,7 @@ func (a *app) handleLogin(w http.ResponseWriter, r *http.Request) {
 	}
 
 	authCodeURL := ""
-	scopes = append(scopes, "openid", "profile", "email")
+	scopes = uniqueStrings(scopes)
 
 	var authCodeOptions []oauth2.AuthCodeOption
 
@@ -266,13 +273,28 @@ func (a *app) handleLogin(w http.ResponseWriter, r *http.Request) {
 		authCodeOptions = append(authCodeOptions, oauth2.SetAuthURLParam("code_challenge_method", "S256"))
 	}
 
-	a.oauth2Config(scopes)
-	if r.FormValue("offline_access") == "yes" {
-		authCodeOptions = append(authCodeOptions, oauth2.AccessTypeOffline)
+	// Check if offline_access scope is present to determine offline access mode
+	hasOfflineAccess := false
+	for _, scope := range scopes {
+		if scope == "offline_access" {
+			hasOfflineAccess = true
+			break
+		}
 	}
-	if a.offlineAsScope {
-		scopes = append(scopes, "offline_access")
+
+	if hasOfflineAccess && !a.offlineAsScope {
+		// Provider uses access_type=offline instead of offline_access scope
+		authCodeOptions = append(authCodeOptions, oauth2.AccessTypeOffline)
+		// Remove offline_access from scopes as it's not supported
+		filteredScopes := make([]string, 0, len(scopes))
+		for _, scope := range scopes {
+			if scope != "offline_access" {
+				filteredScopes = append(filteredScopes, scope)
+			}
+		}
+		scopes = filteredScopes
 	}
+
 	authCodeURL = a.oauth2Config(scopes).AuthCodeURL(exampleAppState, authCodeOptions...)
 
 	// Parse the auth code URL and safely add connector_id parameter if provided
@@ -369,23 +391,17 @@ func (a *app) handleCallback(w http.ResponseWriter, r *http.Request) {
 	}
 
 	buff := new(bytes.Buffer)
-	if err := json.Indent(buff, []byte(claims), "", "  "); err != nil {
+	if err := json.Indent(buff, claims, "", "  "); err != nil {
 		http.Error(w, fmt.Sprintf("error indenting ID token claims: %v", err), http.StatusInternalServerError)
 		return
 	}
 
-	renderToken(w, a.redirectURI, rawIDToken, accessToken, token.RefreshToken, buff.String())
+	renderToken(w, r.Context(), a.provider, a.redirectURI, rawIDToken, accessToken, token.RefreshToken, buff.String())
 }
 
-func generateCodeVerifier() string {
-	bytes := make([]byte, 64) // 86 symbols Base64URL
-	if _, err := rand.Read(bytes); err != nil {
-		log.Fatalf("rand.Read error: %v", err)
-	}
-	return base64.RawURLEncoding.EncodeToString(bytes)
-}
+func uniqueStrings(values []string) []string {
+	slices.Sort(values)
+	values = slices.Compact(values)
 
-func generateCodeChallenge(verifier string) string {
-	hash := sha256.Sum256([]byte(verifier))
-	return base64.RawURLEncoding.EncodeToString(hash[:])
+	return values
 }

examples/example-app/static/app.js

@@ -0,0 +1,106 @@
+(function() {
+    const crossClientInput = document.getElementById("cross_client_input");
+    const crossClientList = document.getElementById("cross-client-list");
+    const addClientBtn = document.getElementById("add-cross-client");
+    const scopesList = document.getElementById("scopes-list");
+    const customScopeInput = document.getElementById("custom_scope_input");
+    const addCustomScopeBtn = document.getElementById("add-custom-scope");
+
+    // Default scopes that should be checked by default
+    const defaultScopes = ["openid", "profile", "email", "offline_access"];
+
+    // Check default scopes on page load
+    document.addEventListener("DOMContentLoaded", function() {
+        const checkboxes = scopesList.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(cb => {
+            if (defaultScopes.includes(cb.value)) {
+                cb.checked = true;
+            }
+        });
+    });
+
+    function addCrossClient(value) {
+        const trimmed = value.trim();
+        if (!trimmed) return;
+
+        const chip = document.createElement("div");
+        chip.className = "chip";
+
+        const text = document.createElement("span");
+        text.textContent = trimmed;
+
+        const hidden = document.createElement("input");
+        hidden.type = "hidden";
+        hidden.name = "cross_client";
+        hidden.value = trimmed;
+
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.textContent = "×";
+        remove.onclick = () => crossClientList.removeChild(chip);
+
+        chip.append(text, hidden, remove);
+        crossClientList.appendChild(chip);
+    }
+
+    function addCustomScope(scope) {
+        const trimmed = scope.trim();
+        if (!trimmed || !scopesList) return;
+
+        // Check if scope already exists
+        const existingCheckboxes = scopesList.querySelectorAll('input[type="checkbox"]');
+        for (const cb of existingCheckboxes) {
+            if (cb.value === trimmed) {
+                cb.checked = true;
+                return;
+            }
+        }
+
+        // Add new scope checkbox
+        const scopeItem = document.createElement("div");
+        scopeItem.className = "scope-item";
+
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.name = "extra_scopes";
+        checkbox.value = trimmed;
+        checkbox.id = "scope_custom_" + trimmed;
+        checkbox.checked = true;
+
+        const label = document.createElement("label");
+        label.htmlFor = checkbox.id;
+        label.textContent = trimmed;
+
+        scopeItem.append(checkbox, label);
+        scopesList.appendChild(scopeItem);
+    }
+
+    addClientBtn?.addEventListener("click", () => {
+        addCrossClient(crossClientInput.value);
+        crossClientInput.value = "";
+        crossClientInput.focus();
+    });
+
+    crossClientInput?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            addCrossClient(crossClientInput.value);
+            crossClientInput.value = "";
+        }
+    });
+
+    addCustomScopeBtn?.addEventListener("click", () => {
+        addCustomScope(customScopeInput.value);
+        customScopeInput.value = "";
+        customScopeInput.focus();
+    });
+
+    customScopeInput?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            addCustomScope(customScopeInput.value);
+            customScopeInput.value = "";
+        }
+    });
+})();
+