Extract routes to getRoutes() function

Address review feedback to eliminate duplicated route configuration
and prevent potential inconsistencies.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/auth/main.go

@@ -0,0 +1,418 @@
+//go:build js && wasm
+
+// Package main demonstrates OIDC authentication with Iris.
+//
+// This example shows:
+//   - OIDC client setup
+//   - Login/logout flow
+//   - Protected routes with auth guard
+//   - Displaying user info
+//   - Token handling
+package main
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"strings"
+	"syscall/js"
+
+	"git.flowmade.one/flowmade-one/iris/auth"
+	"git.flowmade.one/flowmade-one/iris/navigation"
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Configuration - in production, these would come from environment/config
+const (
+	// OIDC provider configuration
+	// Update these values for your OIDC provider (e.g., Dex, Keycloak, Auth0)
+	OIDCIssuer  = "https://dex.example.com"
+	ClientID    = "iris-example-app"
+	RedirectURI = "http://localhost:8080/callback"
+)
+
+var (
+	// Global OIDC client
+	oidcClient *auth.OIDCClient
+
+	// Reactive state for authentication
+	isAuthenticated = reactive.NewSignal(false)
+	currentUser     = reactive.NewSignal[*UserDisplay](nil)
+	authError       = reactive.NewSignal("")
+	isLoading       = reactive.NewSignal(false)
+
+	// Font presets
+	fontTitle   = ui.NewFont().Size("32px").Weight("700")
+	fontHeading = ui.NewFont().Size("20px").Weight("600")
+)
+
+// UserDisplay holds user information for display
+type UserDisplay struct {
+	Email string
+	Name  string
+	Sub   string
+}
+
+func main() {
+	// Initialize OIDC client
+	oidcClient = auth.NewOIDCClient(OIDCIssuer, ClientID, RedirectURI)
+
+	// Check for existing tokens on startup
+	checkExistingSession()
+
+	// Check if this is an OAuth callback
+	if isCallbackPath() {
+		handleOAuthCallback()
+		return
+	}
+	router := navigation.NewRouter(getRoutes())
+	router.SetNotFoundHandler(notFoundView)
+	navigation.SetGlobalRouter(router)
+
+	// Create the main app with router
+	ui.NewAppWithRouter(router)
+
+	// Keep the application running
+	select {}
+}
+
+// getRoutes returns the route configuration for the application
+func getRoutes() []navigation.Route {
+	return []navigation.Route{
+		{
+			Path:    "/",
+			Handler: homeView,
+		},
+		{
+			Path:    "/callback",
+			Handler: callbackView,
+		},
+		{
+			Path:    "/profile",
+			Handler: profileView,
+			Guards:  []navigation.RouteGuard{authGuard()},
+		},
+		{
+			Path:    "/protected",
+			Handler: protectedView,
+			Guards:  []navigation.RouteGuard{authGuard()},
+		},
+	}
+}
+
+// checkExistingSession checks for existing valid tokens
+func checkExistingSession() {
+	if oidcClient.IsAuthenticated() {
+		isAuthenticated.Set(true)
+		loadUserFromToken()
+	}
+}
+
+// isCallbackPath checks if current path is the OAuth callback
+func isCallbackPath() bool {
+	pathname := js.Global().Get("window").Get("location").Get("pathname").String()
+	search := js.Global().Get("window").Get("location").Get("search").String()
+	return pathname == "/callback" && strings.Contains(search, "code=")
+}
+
+// handleOAuthCallback processes the OAuth callback
+func handleOAuthCallback() {
+	isLoading.Set(true)
+
+	// Discover OIDC configuration and handle callback
+	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
+		if err != nil {
+			authError.Set("Failed to load OIDC configuration: " + err.Error())
+			isLoading.Set(false)
+			renderApp()
+			return
+		}
+
+		// Exchange code for tokens
+		tokens, err := oidcClient.HandleCallback(OIDCIssuer)
+		if err != nil {
+			authError.Set("Authentication failed: " + err.Error())
+			isLoading.Set(false)
+			renderApp()
+			return
+		}
+
+		// Store tokens
+		oidcClient.StoreTokens(tokens)
+		isAuthenticated.Set(true)
+		loadUserFromToken()
+		isLoading.Set(false)
+
+		// Clear URL parameters and redirect to home
+		js.Global().Get("window").Get("history").Call("replaceState", nil, "", "/")
+		renderApp()
+	})
+}
+
+// renderApp initializes and renders the app after callback processing
+func renderApp() {
+	router := navigation.NewRouter(getRoutes())
+	router.SetNotFoundHandler(notFoundView)
+	navigation.SetGlobalRouter(router)
+
+	ui.NewAppWithRouter(router)
+
+	select {}
+}
+
+// loadUserFromToken extracts user info from the ID token
+func loadUserFromToken() {
+	tokens := oidcClient.GetStoredTokens()
+	if tokens == nil || tokens.IDToken == "" {
+		return
+	}
+
+	// Parse the ID token to get user info (JWT payload is the second part)
+	parts := strings.Split(tokens.IDToken, ".")
+	if len(parts) != 3 {
+		return
+	}
+
+	// Decode the payload
+	payload, err := base64.RawURLEncoding.DecodeString(parts[1])
+	if err != nil {
+		return
+	}
+
+	var claims struct {
+		Sub   string `json:"sub"`
+		Email string `json:"email"`
+		Name  string `json:"name"`
+	}
+	if err := json.Unmarshal(payload, &claims); err != nil {
+		return
+	}
+
+	currentUser.Set(&UserDisplay{
+		Email: claims.Email,
+		Name:  claims.Name,
+		Sub:   claims.Sub,
+	})
+}
+
+// authGuard creates a route guard that checks authentication
+func authGuard() navigation.RouteGuard {
+	return navigation.AuthGuard(func() bool {
+		return isAuthenticated.Get()
+	})
+}
+
+// login initiates the OIDC login flow
+func login() {
+	isLoading.Set(true)
+	authError.Set("")
+
+	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
+		if err != nil {
+			authError.Set("Failed to connect to authentication provider: " + err.Error())
+			isLoading.Set(false)
+			return
+		}
+
+		if err := oidcClient.StartAuthFlow(); err != nil {
+			authError.Set("Failed to start login: " + err.Error())
+			isLoading.Set(false)
+		}
+		// Note: If successful, the browser will redirect to the OIDC provider
+	})
+}
+
+// logout clears authentication state
+func logout() {
+	oidcClient.Logout()
+	isAuthenticated.Set(false)
+	currentUser.Set(nil)
+	navigation.Navigate("/")
+}
+
+// View functions
+
+func homeView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Iris Auth Example").
+				Font(fontTitle).
+				Margin("20px 0"),
+			ui.TextFromString("This example demonstrates OIDC authentication with protected routes.").
+				Color("#666"),
+			ui.TextFromFunction(func() string {
+				if authError.Get() != "" {
+					return "Error: " + authError.Get()
+				}
+				return ""
+			}).Color("#ff4444"),
+			authSection(),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func header() ui.View {
+	return ui.HorizontalGroup(
+		ui.TextFromString("Auth Example").Font(fontHeading),
+		navigation.Link("/", ui.TextFromString("Home")),
+		navigation.Link("/profile", ui.TextFromString("Profile")),
+		navigation.Link("/protected", ui.TextFromString("Protected")),
+		ui.Spacer(),
+		authButton(),
+	).Padding("16px 24px").Background("#f5f5f5").BorderBottom("1px solid #ddd")
+}
+
+func authSection() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromFunction(func() string {
+			if isLoading.Get() {
+				return "Loading..."
+			}
+			if isAuthenticated.Get() {
+				user := currentUser.Get()
+				if user != nil {
+					return "Welcome, " + user.Name + "!"
+				}
+				return "You are logged in."
+			}
+			return "You are not logged in."
+		}).Margin("20px 0"),
+
+		ui.TextFromFunction(func() string {
+			if isAuthenticated.Get() {
+				return "Navigate to Profile or Protected pages to see authenticated content."
+			}
+			return "Click Login to authenticate with your OIDC provider."
+		}).Color("#666"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("20px 0")
+}
+
+func authButton() ui.View {
+	return ui.Button(func() {
+		if isAuthenticated.Get() {
+			logout()
+		} else {
+			login()
+		}
+	}, ui.TextFromFunction(func() string {
+		if isLoading.Get() {
+			return "Loading..."
+		}
+		if isAuthenticated.Get() {
+			return "Logout"
+		}
+		return "Login"
+	})).Padding("8px 16px").Background("#007bff").Foreground("#fff").
+		Border("none").BorderRadius("4px").Cursor("pointer")
+}
+
+func callbackView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Processing login...").Font(fontHeading),
+			ui.TextFromString("Please wait while we complete authentication.").Color("#666"),
+		).Padding("40px"),
+	).Gap("0")
+}
+
+func profileView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("User Profile").Font(fontTitle).Margin("20px 0"),
+			userInfoCard(),
+			tokenInfoCard(),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func userInfoCard() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("User Information").Font(fontHeading),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return "No user information available"
+			}
+			return "Name: " + user.Name
+		}),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return ""
+			}
+			return "Email: " + user.Email
+		}),
+		ui.TextFromFunction(func() string {
+			user := currentUser.Get()
+			if user == nil {
+				return ""
+			}
+			return "Subject: " + user.Sub
+		}).Color("#888"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
+}
+
+func tokenInfoCard() ui.View {
+	return ui.VerticalGroup(
+		ui.TextFromString("Token Information").Font(fontHeading),
+		ui.TextFromFunction(func() string {
+			tokens := oidcClient.GetStoredTokens()
+			if tokens == nil {
+				return "No tokens available"
+			}
+			return "Access Token: " + truncateToken(tokens.AccessToken)
+		}),
+		ui.TextFromFunction(func() string {
+			tokens := oidcClient.GetStoredTokens()
+			if tokens == nil {
+				return ""
+			}
+			return "ID Token: " + truncateToken(tokens.IDToken)
+		}),
+		ui.TextFromFunction(func() string {
+			authHeader := oidcClient.GetAuthHeader()
+			if authHeader == "" {
+				return ""
+			}
+			return "Auth Header: " + truncateToken(authHeader)
+		}).Color("#888"),
+	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
+}
+
+func protectedView(params map[string]string) ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("Protected Content").Font(fontTitle).Margin("20px 0"),
+			ui.TextFromString("This page is only visible to authenticated users.").Color("#666"),
+			ui.VerticalGroup(
+				ui.TextFromString("Access Granted").Font(fontHeading).Color("#28a745"),
+				ui.TextFromString("You have successfully accessed a protected route."),
+				ui.TextFromString("The auth guard verified your authentication status before allowing access.").Color("#888"),
+			).Padding("20px").Background("#e8f5e9").BorderRadius("8px").Margin("20px 0"),
+		).Padding("20px").MaxWidth("800px"),
+	).Gap("0")
+}
+
+func notFoundView() ui.View {
+	return ui.VerticalGroup(
+		header(),
+		ui.VerticalGroup(
+			ui.TextFromString("404 - Page Not Found").Font(fontTitle).Color("#ff4444"),
+			ui.TextFromString("The requested page could not be found.").Color("#666"),
+			navigation.Link("/", ui.TextFromString("Go to Home").Color("#007bff")),
+		).Padding("40px"),
+	).Gap("0")
+}
+
+// Helper functions
+
+func truncateToken(token string) string {
+	if len(token) <= 20 {
+		return token
+	}
+	return token[:10] + "..." + token[len(token)-10:]
+}

examples/todo/main.go

@@ -1,195 +0,0 @@
-//go:build js && wasm
-
-package main
-
-import (
-	"fmt"
-	"syscall/js"
-
-	"git.flowmade.one/flowmade-one/iris/reactive"
-	"git.flowmade.one/flowmade-one/iris/ui"
-)
-
-// Todo represents a single todo item
-type Todo struct {
-	ID        int
-	Text      string
-	Completed bool
-}
-
-func main() {
-	// Signal holding the list of todos
-	todos := reactive.NewSignal([]Todo{})
-
-	// Signal for the input field
-	inputText := reactive.NewSignal("")
-
-	// Counter for generating unique IDs
-	nextID := reactive.NewSignal(1)
-
-	// Create the main app view
-	view := ui.VerticalGroup(
-		// Title
-		ui.TextFromString("Todo List").Padding("16px 0"),
-
-		// Input row: text input + add button
-		inputRow(&inputText, func() {
-			text := inputText.Get()
-			if text == "" {
-				return
-			}
-
-			// Add new todo
-			id := nextID.Get()
-			nextID.Set(id + 1)
-
-			currentTodos := todos.Get()
-			newTodos := append(currentTodos, Todo{
-				ID:        id,
-				Text:      text,
-				Completed: false,
-			})
-			todos.Set(newTodos)
-
-			// Clear input
-			inputText.Set("")
-		}),
-
-		// Todo list
-		todoList(&todos),
-
-		// Summary text showing completed count
-		ui.TextFromFunction(func() string {
-			allTodos := todos.Get()
-			if len(allTodos) == 0 {
-				return "No todos yet"
-			}
-
-			completed := 0
-			for _, t := range allTodos {
-				if t.Completed {
-					completed++
-				}
-			}
-			return fmt.Sprintf("%d of %d completed", completed, len(allTodos))
-		}).Padding("16px 0"),
-	).MaxWidth("400px").Padding("24px")
-
-	ui.NewApp(view)
-
-	select {}
-}
-
-// inputRow creates the input field and add button
-func inputRow(inputText *reactive.Signal[string], onAdd func()) ui.View {
-	row := ui.NewView()
-	row.Display("flex").Gap("8px").Width("100%")
-
-	// Text input
-	input := ui.TextInput(inputText, "What needs to be done?")
-	input.Width("100%")
-
-	// Handle Enter key to add todo
-	input.Element().OnWithEvent("keypress", func(event js.Value) {
-		if event.Get("key").String() == "Enter" {
-			onAdd()
-		}
-	})
-
-	// Add button
-	addBtn := ui.Button(onAdd, ui.TextFromString("Add"))
-	addBtn.Padding("8px 16px")
-
-	row.Child(input)
-	row.Child(addBtn)
-
-	return row
-}
-
-// todoList renders the list of todos reactively
-func todoList(todos *reactive.Signal[[]Todo]) ui.View {
-	container := ui.NewView()
-	container.Width("100%")
-
-	// Effect that re-renders the list when todos change
-	reactive.NewEffect(func() {
-		allTodos := todos.Get()
-
-		// Clear existing children
-		container.Element().ClearChildren()
-
-		// Render each todo item
-		for _, todo := range allTodos {
-			item := todoItem(todo, todos)
-			container.Child(item)
-		}
-
-		// Show empty state if no todos
-		if len(allTodos) == 0 {
-			emptyText := ui.TextFromString("Add your first todo above")
-			emptyText.Color("#666").Padding("16px 0").TextAlign("center")
-			container.Child(emptyText)
-		}
-	})
-
-	return container
-}
-
-// todoItem renders a single todo item with toggle and delete
-func todoItem(todo Todo, todos *reactive.Signal[[]Todo]) ui.View {
-	row := ui.NewView()
-	row.Display("flex").Gap("12px").Padding("8px 0").Width("100%").AlignItems("center")
-	row.BorderBottom("1px solid #eee")
-
-	// Completed checkbox using public ui.RawCheckbox
-	checkbox := ui.RawCheckbox(todo.Completed, func(isChecked bool) {
-		toggleTodo(todos, todo.ID, isChecked)
-	})
-
-	// Todo text with strikethrough if completed
-	textView := ui.NewView()
-	textView.Display("flex").Width("100%")
-	text := ui.Span(todo.Text)
-	if todo.Completed {
-		text.TextDecoration("line-through").Color("#999")
-	}
-	textView.Child(text)
-
-	// Delete button
-	deleteBtn := ui.Button(func() {
-		deleteTodo(todos, todo.ID)
-	}, ui.TextFromString("X"))
-	deleteBtn.Padding("4px 8px")
-
-	row.Child(checkbox)
-	row.Child(textView)
-	row.Child(deleteBtn)
-
-	return row
-}
-
-// toggleTodo updates the completed status of a todo
-func toggleTodo(todos *reactive.Signal[[]Todo], id int, completed bool) {
-	currentTodos := todos.Get()
-	newTodos := make([]Todo, len(currentTodos))
-	for i, t := range currentTodos {
-		if t.ID == id {
-			newTodos[i] = Todo{ID: t.ID, Text: t.Text, Completed: completed}
-		} else {
-			newTodos[i] = t
-		}
-	}
-	todos.Set(newTodos)
-}
-
-// deleteTodo removes a todo from the list
-func deleteTodo(todos *reactive.Signal[[]Todo], id int) {
-	currentTodos := todos.Get()
-	newTodos := make([]Todo, 0, len(currentTodos))
-	for _, t := range currentTodos {
-		if t.ID != id {
-			newTodos = append(newTodos, t)
-		}
-	}
-	todos.Set(newTodos)
-}

ui/input.go

@@ -205,23 +205,4 @@ func NumberInput(value *reactive.Signal[float64], placeholder string) View {
 	})
 
 	return View{input}
-}
+}
-// RawCheckbox creates a plain checkbox input without a label wrapper.
-// The onChange callback is called with the new checked state when the user clicks.
-func RawCheckbox(checked bool, onChange func(bool)) View {
-	checkbox := element.NewElement("input")
-	checkbox.Attr("type", "checkbox")
-
-	// Set initial state
-	if checked {
-		checkbox.Set("checked", true)
-	}
-
-	// Call onChange when user clicks
-	checkbox.On("change", func() {
-		newValue := checkbox.Get("checked").Bool()
-		onChange(newValue)
-	})
-
-	return View{checkbox}
-}

ui/modifiers.go

@@ -170,8 +170,3 @@ func (v View) PointerEvents(value string) View {
 	v.e.PointerEvents(value)
 	return v
 }
-
-func (v View) TextDecoration(value string) View {
-	v.e.Get("style").Call("setProperty", "text-decoration", value)
-	return v
-}

ui/text.go

@@ -21,10 +21,3 @@ func TextFromFunction(fn func() string) View {
 
 	return View{textNode}
 }
-
-// Span creates a span element with the given text content.
-func Span(text string) View {
-	v := View{element.NewElement("span")}
-	v.e.Set("textContent", text)
-	return v
-}