CSP fixes

Consolidate all the error messages - add some stimulus controller.
Fix CSP reporting endpoitn. Fix the SER for CSP
2025-11-08 20:01:07 +11:00 · 2025-11-07 16:58:28 +11:00 · 2025-11-04 23:22:15 +11:00 · 2025-11-04 23:16:28 +11:00 · 2025-11-04 22:58:32 +11:00 · 2025-11-04 21:33:52 +11:00
37 changed files with 1338 additions and 208 deletions
--- a/.env.example
+++ b/.env.example
@@ -68,3 +68,27 @@ CLINCH_ALLOW_LOCALHOST=true

 # Optional: Set custom port
 # PORT=9000
+
+# Sentry Configuration (Optional)
+# Enable error tracking and performance monitoring
+# Leave SENTRY_DSN empty to disable Sentry completely
+#
+# Production: Get your DSN from https://sentry.io/settings/projects/
+# SENTRY_DSN=https://your-dsn@sentry.io/project-id
+#
+# Optional: Override Sentry environment (defaults to Rails.env)
+# SENTRY_ENVIRONMENT=production
+#
+# Optional: Override Sentry release (defaults to Git commit hash)
+# SENTRY_RELEASE=v1.0.0
+#
+# Optional: Performance monitoring sample rate (0.0 to 1.0, default 0.2)
+# Higher values provide more data but cost more
+# SENTRY_TRACES_SAMPLE_RATE=0.2
+#
+# Optional: Continuous profiling sample rate (0.0 to 1.0, default 0.0)
+# Very resource intensive, only enable for performance investigations
+# SENTRY_PROFILES_SAMPLE_RATE=0.0
+#
+# Development: Enable Sentry in development for testing
+# SENTRY_ENABLED_IN_DEVELOPMENT=true
--- a/4
+++ b/4
@@ -37,6 +37,10 @@ gem "webauthn", "~> 3.0"
 # Public Suffix List for domain parsing
 gem "public_suffix", "~> 6.0"

+# Error tracking and performance monitoring (optional, configured via SENTRY_DSN)
+gem "sentry-ruby", "~> 5.18"
+gem "sentry-rails", "~> 5.18"
+
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "tzinfo-data", platforms: %i[ windows jruby ]

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -333,6 +333,12 @@ GEM
      rexml (~> 3.2, >= 3.2.5)
      rubyzip (>= 1.2.2, < 4.0)
      websocket (~> 1.0)
+    sentry-rails (5.28.0)
+      railties (>= 5.0)
+      sentry-ruby (~> 5.28.0)
+    sentry-ruby (5.28.0)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.0.2)
    solid_cable (3.0.12)
      actioncable (>= 7.2)
      activejob (>= 7.2)
@@ -443,6 +449,8 @@ DEPENDENCIES
  rqrcode (~> 3.1)
  rubocop-rails-omakase
  selenium-webdriver
+  sentry-rails (~> 5.18)
+  sentry-ruby (~> 5.18)
  solid_cable
  solid_cache
  sqlite3 (>= 2.1)
--- a/README.md
+++ b/README.md
@@ -3,9 +3,25 @@
 > [!NOTE]
 > This software is experiemental. If you'd like to try it out, find bugs, security flaws and improvements, please do. 

-**A lightweight, self-hosted identity & SSO portal**
+**A lightweight, self-hosted identity & SSO / IpD portal**

-Clinch gives you one place to manage users and lets any web app authenticate against it without maintaining its own user table.
+Clinch gives you one place to manage users and lets any web app authenticate against it without maintaining its own user table. 
+
+I've completed all planned features: 
+
+* Create Admin user on first login
+* TOTP ( QR Code ) 2FA, with backup codes ( encrypted at rest )
+* Passkey generation and login, with detection of Passkey during login
+* Forward Auth configured and working
+* OIDC provider with auto discovery working
+* Invite users by email, assign to groups
+* Self managed password reset by email
+* Use Groups to assign Applications ( Family group can access Kavita, Developers can access Gitea )
+* Configurable Group and User custom claims for OIDC token
+* Display all Applications available to the user on their Dashboard
+* Display all logged in sessions and OIDC logged in sessions
+
+What remains now is ensure test coverage, 

 ## Why Clinch?

--- a/app/controllers/admin/applications_controller.rb
+++ b/app/controllers/admin/applications_controller.rb
@@ -100,7 +100,10 @@ module Admin
      params.require(:application).permit(
        :name, :slug, :app_type, :active, :redirect_uris, :description, :metadata,
        :domain_pattern, :landing_url, headers_config: {}
-      )
+      ).tap do |whitelisted|
+        # Remove client_secret from params if present (shouldn't be updated via form)
+        whitelisted.delete(:client_secret)
+      end
    end
  end
 end
--- a/app/controllers/api/csp_controller.rb
+++ b/app/controllers/api/csp_controller.rb
@@ -8,19 +8,38 @@ module Api
    def violation_report
      # Parse CSP violation report
      report_data = JSON.parse(request.body.read)
+      csp_report = report_data['csp-report']

      # Log the violation for security monitoring
      Rails.logger.warn "CSP Violation Report:"
-      Rails.logger.warn "  Blocked URI: #{report_data.dig('csp-report', 'blocked-uri')}"
-      Rails.logger.warn "  Document URI: #{report_data.dig('csp-report', 'document-uri')}"
-      Rails.logger.warn "  Referrer: #{report_data.dig('csp-report', 'referrer')}"
-      Rails.logger.warn "  Violated Directive: #{report_data.dig('csp-report', 'violated-directive')}"
-      Rails.logger.warn "  Original Policy: #{report_data.dig('csp-report', 'original-policy')}"
+      Rails.logger.warn "  Blocked URI: #{csp_report['blocked-uri']}"
+      Rails.logger.warn "  Document URI: #{csp_report['document-uri']}"
+      Rails.logger.warn "  Referrer: #{csp_report['referrer']}"
+      Rails.logger.warn "  Violated Directive: #{csp_report['violated-directive']}"
+      Rails.logger.warn "  Original Policy: #{csp_report['original-policy']}"
      Rails.logger.warn "  User Agent: #{request.user_agent}"
      Rails.logger.warn "  IP Address: #{request.remote_ip}"

-      # In production, you might want to send this to a security monitoring service
-      # For now, we'll just log it and return a success response
+      # Emit structured event for CSP violation
+      # This allows multiple subscribers to process the event (Sentry, local logging, etc.)
+      Rails.event.notify("csp.violation", {
+        blocked_uri: csp_report['blocked-uri'],
+        document_uri: csp_report['document-uri'],
+        referrer: csp_report['referrer'],
+        violated_directive: csp_report['violated-directive'],
+        original_policy: csp_report['original-policy'],
+        disposition: csp_report['disposition'],
+        effective_directive: csp_report['effective-directive'],
+        source_file: csp_report['source-file'],
+        line_number: csp_report['line-number'],
+        column_number: csp_report['column-number'],
+        status_code: csp_report['status-code'],
+        user_agent: request.user_agent,
+        ip_address: request.remote_ip,
+        current_user_id: Current.user&.id,
+        timestamp: Time.current,
+        session_id: Current.session&.id
+      })

      head :no_content
    rescue JSON::ParserError => e
--- a/app/controllers/api/forward_auth_controller.rb
+++ b/app/controllers/api/forward_auth_controller.rb
@@ -137,7 +137,7 @@ module Api

      # Get the redirect URL from query params or construct default
      redirect_url = validate_redirect_url(params[:rd])
-      base_url = redirect_url || "https://clinch.aapamilne.com"
+      base_url = determine_base_url(redirect_url)

      # Set the original URL that user was trying to access
      # This will be used after authentication
@@ -214,5 +214,25 @@ module Api
        app.matches_domain?(domain.downcase)
      end
    end
+
+    def determine_base_url(redirect_url)
+      # If we have a valid redirect URL, use it
+      return redirect_url if redirect_url.present?
+
+      # Try CLINCH_HOST environment variable first
+      if ENV['CLINCH_HOST'].present?
+        "https://#{ENV['CLINCH_HOST']}"
+      else
+        # Fallback to the request host
+        request_host = request.host || request.headers['X-Forwarded-Host']
+        if request_host.present?
+          Rails.logger.warn "ForwardAuth: CLINCH_HOST not set, using request host: #{request_host}"
+          "https://#{request_host}"
+        else
+          # No host information available - raise exception to force proper configuration
+          raise StandardError, "ForwardAuth: CLINCH_HOST environment variable not set and no request host available. Please configure CLINCH_HOST properly."
+        end
+      end
+    end
  end
 end
--- a/app/javascript/controllers/application_form_controller.js
+++ b/app/javascript/controllers/application_form_controller.js
@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["appTypeSelect", "oidcFields", "forwardAuthFields"]
+
+  connect() {
+    this.updateFieldVisibility()
+  }
+
+  updateFieldVisibility() {
+    const appType = this.appTypeSelectTarget.value
+
+    if (appType === 'oidc') {
+      this.oidcFieldsTarget.classList.remove('hidden')
+      this.forwardAuthFieldsTarget.classList.add('hidden')
+    } else if (appType === 'forward_auth') {
+      this.oidcFieldsTarget.classList.add('hidden')
+      this.forwardAuthFieldsTarget.classList.remove('hidden')
+    } else {
+      this.oidcFieldsTarget.classList.add('hidden')
+      this.forwardAuthFieldsTarget.classList.add('hidden')
+    }
+  }
+}
--- a/app/javascript/controllers/backup_codes_controller.js
+++ b/app/javascript/controllers/backup_codes_controller.js
@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    codes: Array
+  }
+
+  download() {
+    const content = "Clinch Backup Codes\n" +
+                    "===================\n\n" +
+                    this.codesValue.join("\n") +
+                    "\n\nSave these codes in a secure location."
+
+    const blob = new Blob([content], { type: 'text/plain' })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'clinch-backup-codes.txt'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }
+
+  print() {
+    window.print()
+  }
+}
--- a/app/javascript/controllers/flash_controller.js
+++ b/app/javascript/controllers/flash_controller.js
@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Manages flash message display, auto-dismissal, and user interactions
+ * Supports different flash types with appropriate styling and behavior
+ */
+export default class extends Controller {
+  static values = {
+    autoDismiss: String, // "false" or delay in milliseconds
+    type: String
+  }
+
+  connect() {
+    // Auto-dismiss if enabled
+    if (this.autoDismissValue && this.autoDismissValue !== "false") {
+      this.scheduleAutoDismiss()
+    }
+
+    // Smooth entrance animation
+    this.element.classList.add('transition-all', 'duration-300', 'ease-out')
+    this.element.style.opacity = '0'
+    this.element.style.transform = 'translateY(-10px)'
+
+    // Animate in
+    requestAnimationFrame(() => {
+      this.element.style.opacity = '1'
+      this.element.style.transform = 'translateY(0)'
+    })
+  }
+
+  /**
+   * Dismisses the flash message with smooth animation
+   */
+  dismiss() {
+    // Add dismiss animation
+    this.element.classList.add('transition-all', 'duration-300', 'ease-in')
+    this.element.style.opacity = '0'
+    this.element.style.transform = 'translateY(-10px)'
+
+    // Remove from DOM after animation
+    setTimeout(() => {
+      this.element.remove()
+    }, 300)
+  }
+
+  /**
+   * Schedules auto-dismissal based on the configured delay
+   */
+  scheduleAutoDismiss() {
+    const delay = parseInt(this.autoDismissValue)
+    if (delay > 0) {
+      setTimeout(() => {
+        this.dismiss()
+      }, delay)
+    }
+  }
+
+  /**
+   * Pause auto-dismissal on hover (for user reading)
+   */
+  mouseEnter() {
+    if (this.autoDismissTimer) {
+      clearTimeout(this.autoDismissTimer)
+      this.autoDismissTimer = null
+    }
+  }
+
+  /**
+   * Resume auto-dismissal when hover ends
+   */
+  mouseLeave() {
+    if (this.autoDismissValue && this.autoDismissValue !== "false") {
+      this.scheduleAutoDismiss()
+    }
+  }
+
+  /**
+   * Handle keyboard interactions
+   */
+  keydown(event) {
+    if (event.key === 'Escape' || event.key === 'Enter') {
+      this.dismiss()
+    }
+  }
+}
--- a/app/javascript/controllers/form_errors_controller.js
+++ b/app/javascript/controllers/form_errors_controller.js
@@ -0,0 +1,89 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Manages form error display and dismissal
+ * Provides consistent error handling across all forms
+ */
+export default class extends Controller {
+  static targets = ["container"]
+
+  /**
+   * Dismisses the error container with a smooth fade-out animation
+   */
+  dismiss() {
+    if (!this.hasContainerTarget) return
+
+    // Add transition classes
+    this.containerTarget.classList.add('transition-all', 'duration-300', 'opacity-0', 'transform', 'scale-95')
+
+    // Remove from DOM after animation completes
+    setTimeout(() => {
+      this.containerTarget.remove()
+    }, 300)
+  }
+
+  /**
+   * Shows server-side validation errors after form submission
+   * Auto-focuses the first error field for better accessibility
+   */
+  connect() {
+    // Auto-focus first error field if errors exist
+    this.focusFirstErrorField()
+
+    // Scroll to errors if needed
+    this.scrollToErrors()
+  }
+
+  /**
+   * Focuses the first field with validation errors
+   */
+  focusFirstErrorField() {
+    if (!this.hasContainerTarget) return
+
+    // Find first form field with errors (look for error classes or aria-invalid)
+    const form = this.element.closest('form')
+    if (!form) return
+
+    const errorField = form.querySelector('[aria-invalid="true"], .border-red-500, .ring-red-500')
+    if (errorField) {
+      setTimeout(() => {
+        errorField.focus()
+        errorField.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }, 100)
+    }
+  }
+
+  /**
+   * Scrolls error container into view if it's not visible
+   */
+  scrollToErrors() {
+    if (!this.hasContainerTarget) return
+
+    const rect = this.containerTarget.getBoundingClientRect()
+    const isInViewport = rect.top >= 0 && rect.left >= 0 &&
+                        rect.bottom <= window.innerHeight &&
+                        rect.right <= window.innerWidth
+
+    if (!isInViewport) {
+      setTimeout(() => {
+        this.containerTarget.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest'
+        })
+      }, 100)
+    }
+  }
+
+  /**
+   * Auto-dismisses success messages after a delay
+   * Can be called from other controllers
+   */
+  autoDismiss(delay = 5000) {
+    if (!this.hasContainerTarget) return
+
+    setTimeout(() => {
+      this.dismiss()
+    }, delay)
+  }
+}
--- a/app/javascript/controllers/hello_controller.js
+++ b/app/javascript/controllers/hello_controller.js
@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}
--- a/app/javascript/controllers/json_validator_controller.js
+++ b/app/javascript/controllers/json_validator_controller.js
@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["textarea", "status"]
+  static classes = ["valid", "invalid", "validStatus", "invalidStatus"]
+
+  connect() {
+    this.validate()
+  }
+
+  validate() {
+    const value = this.textareaTarget.value.trim()
+
+    if (!value) {
+      this.clearStatus()
+      return true
+    }
+
+    try {
+      JSON.parse(value)
+      this.showValid()
+      return true
+    } catch (error) {
+      this.showInvalid(error.message)
+      return false
+    }
+  }
+
+  format() {
+    const value = this.textareaTarget.value.trim()
+
+    if (!value) return
+
+    try {
+      const parsed = JSON.parse(value)
+      const formatted = JSON.stringify(parsed, null, 2)
+      this.textareaTarget.value = formatted
+      this.showValid()
+    } catch (error) {
+      this.showInvalid(error.message)
+    }
+  }
+
+  clearStatus() {
+    this.textareaTarget.classList.remove(...this.invalidClasses)
+    this.textareaTarget.classList.remove(...this.validClasses)
+    if (this.hasStatusTarget) {
+      this.statusTarget.textContent = ""
+      this.statusTarget.classList.remove(...this.validStatusClasses, ...this.invalidStatusClasses)
+    }
+  }
+
+  showValid() {
+    this.textareaTarget.classList.remove(...this.invalidClasses)
+    this.textareaTarget.classList.add(...this.validClasses)
+    if (this.hasStatusTarget) {
+      this.statusTarget.textContent = "✓ Valid JSON"
+      this.statusTarget.classList.remove(...this.invalidStatusClasses)
+      this.statusTarget.classList.add(...this.validStatusClasses)
+    }
+  }
+
+  showInvalid(errorMessage) {
+    this.textareaTarget.classList.remove(...this.validClasses)
+    this.textareaTarget.classList.add(...this.invalidClasses)
+    if (this.hasStatusTarget) {
+      this.statusTarget.textContent = `✗ Invalid JSON: ${errorMessage}`
+      this.statusTarget.classList.remove(...this.validStatusClasses)
+      this.statusTarget.classList.add(...this.invalidStatusClasses)
+    }
+  }
+
+  insertSample(event) {
+    event.preventDefault()
+    const sample = event.params.json || event.target.dataset.jsonSample
+    if (sample) {
+      this.textareaTarget.value = sample
+      this.format()
+    }
+  }
+}
--- a/app/javascript/controllers/mobile_sidebar_controller.js
+++ b/app/javascript/controllers/mobile_sidebar_controller.js
@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["sidebarOverlay"];
+
+  connect() {
+    // Initialize mobile sidebar functionality
+    // Add escape key listener to close sidebar
+    this.boundHandleEscape = this.handleEscape.bind(this);
+    document.addEventListener('keydown', this.boundHandleEscape);
+  }
+
+  disconnect() {
+    // Clean up event listeners
+    document.removeEventListener('keydown', this.boundHandleEscape);
+  }
+
+  openSidebar() {
+    if (this.hasSidebarOverlayTarget) {
+      this.sidebarOverlayTarget.classList.remove('hidden');
+      // Prevent body scroll when sidebar is open
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  closeSidebar() {
+    if (this.hasSidebarOverlayTarget) {
+      this.sidebarOverlayTarget.classList.add('hidden');
+      // Restore body scroll
+      document.body.style.overflow = '';
+    }
+  }
+
+  // Close sidebar when clicking on the overlay background
+  closeOnBackgroundClick(event) {
+    // Check if the click is on the overlay background (the semi-transparent layer)
+    if (event.target === this.sidebarOverlayTarget || event.target.classList.contains('bg-gray-900/80')) {
+      this.closeSidebar();
+    }
+  }
+
+  // Handle escape key to close sidebar
+  handleEscape(event) {
+    if (event.key === 'Escape' && this.hasSidebarOverlayTarget && !this.sidebarOverlayTarget.classList.contains('hidden')) {
+      this.closeSidebar();
+    }
+  }
+}
--- a/app/javascript/controllers/role_management_controller.js
+++ b/app/javascript/controllers/role_management_controller.js
@@ -1,51 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["userSelect", "assignLink", "editForm"]
-
-  connect() {
-    console.log("Role management controller connected")
-  }
-
-  assignRole(event) {
-    event.preventDefault()
-
-    const link = event.currentTarget
-    const roleId = link.dataset.roleId
-    const select = document.getElementById(`assign-user-${roleId}`)
-
-    if (!select.value) {
-      alert("Please select a user")
-      return
-    }
-
-    // Update the href with the selected user ID
-    const originalHref = link.href
-    const newHref = originalHref.replace("PLACEHOLDER", select.value)
-
-    // Navigate to the updated URL
-    window.location.href = newHref
-  }
-
-  toggleEdit(event) {
-    event.preventDefault()
-
-    const roleId = event.currentTarget.dataset.roleId
-    const editForm = document.getElementById(`edit-role-${roleId}`)
-
-    if (editForm) {
-      editForm.classList.toggle("hidden")
-    }
-  }
-
-  hideEdit(event) {
-    event.preventDefault()
-
-    const roleId = event.currentTarget.dataset.roleId
-    const editForm = document.getElementById(`edit-role-${roleId}`)
-
-    if (editForm) {
-      editForm.classList.add("hidden")
-    }
-  }
-}
--- a/app/models/application.rb
+++ b/app/models/application.rb
@@ -13,7 +13,7 @@ class Application < ApplicationRecord
  validates :app_type, presence: true,
                      inclusion: { in: %w[oidc forward_auth] }
  validates :client_id, uniqueness: { allow_nil: true }
-  validates :client_secret, presence: true, if: :oidc?
+  validates :client_secret, presence: true, on: :create, if: -> { oidc? }
  validates :domain_pattern, presence: true, uniqueness: { case_sensitive: false }, if: :forward_auth?
  validates :landing_url, format: { with: URI::regexp(%w[http https]), allow_nil: true, message: "must be a valid URL" }

--- a/app/views/admin/applications/_form.html.erb
+++ b/app/views/admin/applications/_form.html.erb
@@ -1,22 +1,5 @@
-<%= form_with(model: [:admin, application], class: "space-y-6", data: { controller: "application-form" }) do |form| %>
-  <% if application.errors.any? %>
-    <div class="rounded-md bg-red-50 p-4">
-      <div class="flex">
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-800">
-            <%= pluralize(application.errors.count, "error") %> prohibited this application from being saved:
-          </h3>
-          <div class="mt-2 text-sm text-red-700">
-            <ul class="list-disc pl-5 space-y-1">
-              <% application.errors.full_messages.each do |message| %>
-                <li><%= message %></li>
-              <% end %>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% end %>
+<%= form_with(model: [:admin, application], class: "space-y-6", data: { controller: "application-form form-errors" }) do |form| %>
+  <%= render "shared/form_errors", form: form %>

  <div>
    <%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
@@ -73,12 +56,25 @@
      <p class="mt-1 text-sm text-gray-500">Domain pattern to match. Use * for wildcard subdomains (e.g., *.example.com matches app.example.com, api.example.com, etc.)</p>
    </div>

-    <div>
+    <div data-controller="json-validator" data-json-validator-valid-class="border-green-500 focus:border-green-500 focus:ring-green-500" data-json-validator-invalid-class="border-red-500 focus:border-red-500 focus:ring-red-500" data-json-validator-valid-status-class="text-green-600" data-json-validator-invalid-status-class="text-red-600">
      <%= form.label :headers_config, "Custom Headers Configuration (JSON)", class: "block text-sm font-medium text-gray-700" %>
-      <%= form.text_area :headers_config, rows: 10, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono", placeholder: '{"user": "Remote-User", "groups": "Remote-Groups"}' %>
+      <%= form.text_area :headers_config, value: (application.headers_config.present? && application.headers_config.any? ? JSON.pretty_generate(application.headers_config) : ""), rows: 10,
+          class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono",
+          placeholder: '{"user": "Remote-User", "groups": "Remote-Groups"}',
+          data: {
+            action: "input->json-validator#validate blur->json-validator#format",
+            json_validator_target: "textarea"
+          } %>
      <div class="mt-2 text-sm text-gray-600 space-y-1">
-        <p class="font-medium">Optional: Customize header names sent to your application.</p>
+        <div class="flex items-center justify-between">
+          <p class="font-medium">Optional: Customize header names sent to your application.</p>
+          <div class="flex items-center gap-2">
+            <button type="button" data-action="json-validator#format" class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">Format JSON</button>
+            <button type="button" data-action="json-validator#insertSample" data-json-sample='{"user": "Remote-User", "groups": "Remote-Groups", "email": "Remote-Email", "name": "Remote-Name", "admin": "Remote-Admin"}' class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded">Insert Example</button>
+          </div>
+        </div>
        <p><strong>Default headers:</strong> X-Remote-User, X-Remote-Email, X-Remote-Name, X-Remote-Groups, X-Remote-Admin</p>
+        <div data-json-validator-target="status" class="text-xs font-medium"></div>
        <details class="mt-2">
          <summary class="cursor-pointer text-blue-600 hover:text-blue-800">Show available header keys and what data they send</summary>
          <div class="mt-2 ml-4 space-y-1 text-xs">
--- a/app/views/admin/groups/_form.html.erb
+++ b/app/views/admin/groups/_form.html.erb
@@ -1,22 +1,5 @@
-<%= form_with(model: [:admin, group], class: "space-y-6") do |form| %>
-  <% if group.errors.any? %>
-    <div class="rounded-md bg-red-50 p-4">
-      <div class="flex">
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-800">
-            <%= pluralize(group.errors.count, "error") %> prohibited this group from being saved:
-          </h3>
-          <div class="mt-2 text-sm text-red-700">
-            <ul class="list-disc pl-5 space-y-1">
-              <% group.errors.full_messages.each do |message| %>
-                <li><%= message %></li>
-              <% end %>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% end %>
+<%= form_with(model: [:admin, group], class: "space-y-6", data: { controller: "form-errors" }) do |form| %>
+  <%= render "shared/form_errors", form: form %>

  <div>
    <%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
@@ -49,10 +32,25 @@
    <p class="mt-1 text-sm text-gray-500">Select which users should be members of this group.</p>
  </div>

-  <div>
+  <div data-controller="json-validator" data-json-validator-valid-class="border-green-500 focus:border-green-500 focus:ring-green-500" data-json-validator-invalid-class="border-red-500 focus:border-red-500 focus:ring-red-500" data-json-validator-valid-status-class="text-green-600" data-json-validator-invalid-status-class="text-red-600">
    <%= form.label :custom_claims, "Custom Claims (JSON)", class: "block text-sm font-medium text-gray-700" %>
-    <%= form.text_area :custom_claims, value: (group.custom_claims.present? ? JSON.pretty_generate(group.custom_claims) : ""), rows: 8, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono", placeholder: '{"roles": ["admin", "editor"]}' %>
-    <p class="mt-1 text-sm text-gray-500">Optional: Custom claims to add to OIDC tokens for all members. These will be merged with user-level claims.</p>
+    <%= form.text_area :custom_claims, value: (group.custom_claims.present? ? JSON.pretty_generate(group.custom_claims) : ""), rows: 8,
+        class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono",
+        placeholder: '{"roles": ["admin", "editor"]}',
+        data: {
+          action: "input->json-validator#validate blur->json-validator#format",
+          json_validator_target: "textarea"
+        } %>
+    <div class="mt-2 text-sm text-gray-600 space-y-1">
+      <div class="flex items-center justify-between">
+        <p>Optional: Custom claims to add to OIDC tokens for all members. These will be merged with user-level claims.</p>
+        <div class="flex items-center gap-2">
+          <button type="button" data-action="json-validator#format" class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">Format JSON</button>
+          <button type="button" data-action="json-validator#insertSample" data-json-sample='{"roles": ["admin", "editor"], "permissions": ["read", "write"], "team": "backend"}' class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded">Insert Example</button>
+        </div>
+      </div>
+      <div data-json-validator-target="status" class="text-xs font-medium"></div>
+    </div>
  </div>

  <div class="flex gap-3">
--- a/app/views/admin/users/_form.html.erb
+++ b/app/views/admin/users/_form.html.erb
@@ -1,22 +1,5 @@
-<%= form_with(model: [:admin, user], class: "space-y-6") do |form| %>
-  <% if user.errors.any? %>
-    <div class="rounded-md bg-red-50 p-4">
-      <div class="flex">
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-800">
-            <%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:
-          </h3>
-          <div class="mt-2 text-sm text-red-700">
-            <ul class="list-disc pl-5 space-y-1">
-              <% user.errors.full_messages.each do |message| %>
-                <li><%= message %></li>
-              <% end %>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% end %>
+<%= form_with(model: [:admin, user], class: "space-y-6", data: { controller: "form-errors" }) do |form| %>
+  <%= render "shared/form_errors", form: form %>

  <div>
    <%= form.label :email_address, class: "block text-sm font-medium text-gray-700" %>
@@ -52,10 +35,25 @@
    <% end %>
  </div>

-  <div>
+  <div data-controller="json-validator" data-json-validator-valid-class="border-green-500 focus:border-green-500 focus:ring-green-500" data-json-validator-invalid-class="border-red-500 focus:border-red-500 focus:ring-red-500" data-json-validator-valid-status-class="text-green-600" data-json-validator-invalid-status-class="text-red-600">
    <%= form.label :custom_claims, "Custom Claims (JSON)", class: "block text-sm font-medium text-gray-700" %>
-    <%= form.text_area :custom_claims, value: (user.custom_claims.present? ? JSON.pretty_generate(user.custom_claims) : ""), rows: 8, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono", placeholder: '{"department": "engineering", "level": "senior"}' %>
-    <p class="mt-1 text-sm text-gray-500">Optional: User-specific custom claims to add to OIDC tokens. These override group-level claims.</p>
+    <%= form.text_area :custom_claims, value: (user.custom_claims.present? ? JSON.pretty_generate(user.custom_claims) : ""), rows: 8,
+        class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono",
+        placeholder: '{"department": "engineering", "level": "senior"}',
+        data: {
+          action: "input->json-validator#validate blur->json-validator#format",
+          json_validator_target: "textarea"
+        } %>
+    <div class="mt-2 text-sm text-gray-600 space-y-1">
+      <div class="flex items-center justify-between">
+        <p>Optional: User-specific custom claims to add to OIDC tokens. These override group-level claims.</p>
+        <div class="flex items-center gap-2">
+          <button type="button" data-action="json-validator#format" class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">Format JSON</button>
+          <button type="button" data-action="json-validator#insertSample" data-json-sample='{"department": "engineering", "level": "senior", "location": "remote"}' class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded">Insert Example</button>
+        </div>
+      </div>
+      <div data-json-validator-target="status" class="text-xs font-medium"></div>
+    </div>
  </div>

  <div class="flex gap-3">
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -25,27 +25,29 @@

  <body>
    <% if authenticated? %>
-      <%= render "shared/sidebar" %>
-      <div class="lg:pl-64" data-controller="mobile-sidebar">
-        <!-- Mobile menu button -->
-        <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:hidden">
-          <button type="button"
-                  class="-m-2.5 p-2.5 text-gray-700"
-                  id="mobile-menu-button"
-                  data-action="click->mobile-sidebar#openSidebar">
-            <span class="sr-only">Open sidebar</span>
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-            </svg>
-          </button>
-        </div>
-
-        <main class="py-10">
-          <div class="px-4 sm:px-6 lg:px-8">
-            <%= render "shared/flash" %>
-            <%= yield %>
+      <div data-controller="mobile-sidebar">
+        <%= render "shared/sidebar" %>
+        <div class="lg:pl-64">
+          <!-- Mobile menu button -->
+          <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:hidden">
+            <button type="button"
+                    class="-m-2.5 p-2.5 text-gray-700"
+                    id="mobile-menu-button"
+                    data-action="click->mobile-sidebar#openSidebar">
+              <span class="sr-only">Open sidebar</span>
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </button>
          </div>
-        </main>
+
+          <main class="py-10">
+            <div class="px-4 sm:px-6 lg:px-8">
+              <%= render "shared/flash" %>
+              <%= yield %>
+            </div>
+          </main>
+        </div>
      </div>
    <% else %>
      <!-- Public layout (signup/signin) -->
--- a/app/views/passwords/new.html.erb
+++ b/app/views/passwords/new.html.erb
@@ -5,7 +5,7 @@

  <h1 class="font-bold text-4xl">Forgot your password?</h1>

-  <%= form_with url: passwords_path, class: "contents" do |form| %>
+  <%= form_with url: passwords_path, class: "contents", data: { controller: "form-errors" } do |form| %>
    <div class="my-5">
      <%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 focus:outline-solid focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
    </div>
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -3,7 +3,7 @@
    <h1 class="font-bold text-4xl">Sign in to Clinch</h1>
  </div>

-  <%= form_with url: signin_path, class: "contents" do |form| %>
+  <%= form_with url: signin_path, class: "contents", data: { controller: "form-errors" } do |form| %>
    <%= hidden_field_tag :rd, params[:rd] if params[:rd].present? %>
    <div class="my-5">
      <%= form.label :email_address, "Email Address", class: "block font-medium text-sm text-gray-700" %>
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@@ -1,29 +1,86 @@
-<% if flash[:alert] %>
-  <div class="mb-4 rounded-lg bg-red-50 p-4" role="alert">
+<%# Enhanced Flash Messages with Support for Multiple Types and Auto-Dismiss %>
+<% flash.each do |type, message| %>
+  <% next if message.blank? %>
+
+  <%
+    # Map flash types to styling
+    case type.to_s
+    when 'notice'
+      bg_class = 'bg-green-50'
+      text_class = 'text-green-800'
+      icon_class = 'text-green-400'
+      icon_path = 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
+      auto_dismiss = true
+    when 'alert', 'error'
+      bg_class = 'bg-red-50'
+      text_class = 'text-red-800'
+      icon_class = 'text-red-400'
+      icon_path = 'M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z'
+      auto_dismiss = false
+    when 'warning'
+      bg_class = 'bg-yellow-50'
+      text_class = 'text-yellow-800'
+      icon_class = 'text-yellow-400'
+      icon_path = 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'
+      auto_dismiss = false
+    when 'info'
+      bg_class = 'bg-blue-50'
+      text_class = 'text-blue-800'
+      icon_class = 'text-blue-400'
+      icon_path = 'M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'
+      auto_dismiss = true
+    else
+      # Default styling for unknown types
+      bg_class = 'bg-gray-50'
+      text_class = 'text-gray-800'
+      icon_class = 'text-gray-400'
+      icon_path = 'M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'
+      auto_dismiss = false
+    end
+  %>
+
+  <div class="mb-4 rounded-lg <%= bg_class %> p-4 border border-opacity-20 <%= border_class_for(type) %>"
+       role="alert"
+       data-controller="flash"
+       data-flash-auto-dismiss-value="<%= auto_dismiss ? '5000' : 'false' %>"
+       data-flash-type-value="<%= type %>">
    <div class="flex">
-      <div class="flex-shrink-0">
-        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+      <div class="shrink-0">
+        <svg class="h-5 w-5 <%= icon_class %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="<%= icon_path %>" clip-rule="evenodd"/>
        </svg>
      </div>
-      <div class="ml-3">
-        <p class="text-sm font-medium text-red-800"><%= flash[:alert] %></p>
+      <div class="ml-3 flex-1">
+        <p class="text-sm font-medium <%= text_class %>"><%= message %></p>
      </div>
+      <% if auto_dismiss || type.to_s != 'alert' %>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button type="button"
+                    data-action="click->flash#dismiss"
+                    class="inline-flex rounded-md <%= bg_class %> p-1.5 <%= icon_class %> hover:bg-opacity-70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-<%= bg_class.gsub('bg-', '') %>"
+                    aria-label="Dismiss">
+              <span class="sr-only">Dismiss</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      <% end %>
    </div>
  </div>
 <% end %>

-<% if flash[:notice] %>
-  <div class="mb-4 rounded-lg bg-green-50 p-4" role="alert">
-    <div class="flex">
-      <div class="flex-shrink-0">
-        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-        </svg>
-      </div>
-      <div class="ml-3">
-        <p class="text-sm font-medium text-green-800"><%= flash[:notice] %></p>
-      </div>
-    </div>
-  </div>
-<% end %>
+<%# Helper method for border colors %>
+<%
+def border_class_for(type)
+  case type.to_s
+  when 'notice' then 'border-green-200'
+  when 'alert', 'error' then 'border-red-200'
+  when 'warning' then 'border-yellow-200'
+  when 'info' then 'border-blue-200'
+  else 'border-gray-200'
+  end
+end
+%>
--- a/app/views/shared/_form_errors.html.erb
+++ b/app/views/shared/_form_errors.html.erb
@@ -1,23 +1,36 @@
-<% if form.object.errors.any? %>
-  <div class="rounded-md bg-red-50 p-4">
+<%# Usage: <%= render "shared/form_errors", object: @user %> %>
+<%# Usage: <%= render "shared/form_errors", form: form %> %>
+
+<% form_object = form.respond_to?(:object) ? form.object : (object || form) %>
+<% if form_object&.errors&.any? %>
+  <div class="rounded-md bg-red-50 p-4 mb-6 border border-red-200" role="alert" aria-labelledby="form-errors-title" data-form-errors-target="container">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
        </svg>
      </div>
-      <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800">
-          There were <%= pluralize(form.object.errors.count, "error") %> with your submission:
+      <div class="ml-3 flex-1">
+        <h3 id="form-errors-title" class="text-sm font-medium text-red-800">
+          <%= pluralize(form_object.errors.count, "error") %> prohibited this <%= form_object.class.name.downcase.gsub(/^admin::/, '') %> from being saved:
        </h3>
-        <div class="mt-2 text-sm text-red-700">
-          <ul class="list-disc space-y-1 pl-5">
-            <% form.object.errors.full_messages.each do |message| %>
+        <div class="mt-2">
+          <ul class="list-disc space-y-1 pl-5 text-sm text-red-700">
+            <% form_object.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      </div>
+      <div class="ml-auto pl-3">
+        <div class="-mx-1.5 -my-1.5">
+          <button type="button" data-action="click->form-errors#dismiss" class="inline-flex rounded-md bg-red-50 p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-50" aria-label="Dismiss">
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+            </svg>
+          </button>
+        </div>
+      </div>
    </div>
  </div>
 <% end %>
--- a/app/views/shared/_sidebar.html.erb
+++ b/app/views/shared/_sidebar.html.erb
@@ -90,7 +90,7 @@

              <!-- Sign Out -->
              <li>
-                <%= link_to signout_path, data: { turbo_method: :delete }, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-red-600 hover:text-red-700 hover:bg-red-50" do %>
+                <%= link_to signout_path, data: { turbo_method: :delete, action: "click->mobile-sidebar#closeSidebar" }, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-red-600 hover:text-red-700 hover:bg-red-50" do %>
                  <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                  </svg>
@@ -105,7 +105,10 @@
  </div>

  <!-- Mobile sidebar overlay -->
-  <div class="relative z-50 lg:hidden hidden" data-mobile-sidebar-target="sidebarOverlay" id="mobile-sidebar-overlay">
+  <div class="relative z-50 lg:hidden hidden"
+       data-mobile-sidebar-target="sidebarOverlay"
+       id="mobile-sidebar-overlay"
+       data-action="click->mobile-sidebar#closeOnBackgroundClick">
    <div class="fixed inset-0 bg-gray-900/80"></div>
    <div class="fixed inset-0 flex">
      <div class="relative mr-16 flex w-full max-w-xs flex-1">
@@ -141,7 +144,7 @@
            <!-- Same nav items as desktop -->
            <ul role="list" class="-mx-2 space-y-1">
              <li>
-                <%= link_to root_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                <%= link_to root_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path == '/' ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                  <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                  </svg>
@@ -150,7 +153,7 @@
              </li>
              <% if user.admin? %>
                <li>
-                  <%= link_to admin_users_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                  <%= link_to admin_users_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path.start_with?('/admin/users') ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                    <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                    </svg>
@@ -158,7 +161,7 @@
                  <% end %>
                </li>
                <li>
-                  <%= link_to admin_applications_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                  <%= link_to admin_applications_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path.start_with?('/admin/applications') ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                    <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                    </svg>
@@ -166,7 +169,7 @@
                  <% end %>
                </li>
                <li>
-                  <%= link_to admin_groups_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                  <%= link_to admin_groups_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path.start_with?('/admin/groups') ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                    <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
                    </svg>
@@ -175,7 +178,7 @@
                </li>
              <% end %>
              <li>
-                <%= link_to profile_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                <%= link_to profile_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path == '/profile' ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                  <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
@@ -183,7 +186,7 @@
                <% end %>
              </li>
              <li>
-                <%= link_to active_sessions_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:text-blue-600 hover:bg-gray-50" do %>
+                <%= link_to active_sessions_path, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 #{ current_path == '/active_sessions' ? 'bg-gray-50 text-blue-600' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-50' }", data: { action: "click->mobile-sidebar#closeSidebar" } do %>
                  <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                  </svg>
@@ -191,7 +194,7 @@
                <% end %>
              </li>
              <li>
-                <%= link_to signout_path, data: { turbo_method: :delete }, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-red-600 hover:text-red-700 hover:bg-red-50" do %>
+                <%= link_to signout_path, data: { turbo_method: :delete, action: "click->mobile-sidebar#closeSidebar" }, class: "group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-red-600 hover:text-red-700 hover:bg-red-50" do %>
                  <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                  </svg>
--- a/app/views/totp/regenerate_backup_codes.html.erb
+++ b/app/views/totp/regenerate_backup_codes.html.erb
@@ -0,0 +1,45 @@
+<div class="max-w-2xl mx-auto">
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900">Regenerate Backup Codes</h1>
+    <p class="mt-2 text-sm text-gray-600">
+      This will invalidate all existing backup codes and generate new ones.
+    </p>
+  </div>
+
+  <div class="bg-white shadow sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+      <div class="rounded-md bg-yellow-50 p-4 mb-6">
+        <div class="flex">
+          <svg class="h-5 w-5 text-yellow-400 mr-3 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+          </svg>
+          <div class="text-sm text-yellow-800">
+            <p class="font-medium">Important Security Notice</p>
+            <p class="mt-1">All your current backup codes will become invalid after this action. Make sure you're ready to save the new codes.</p>
+          </div>
+        </div>
+      </div>
+
+      <%= form_with(url: create_new_backup_codes_totp_path, method: :post, class: "space-y-6") do |form| %>
+        <div>
+          <%= form.label :password, "Enter your password to confirm", class: "block text-sm font-medium text-gray-700" %>
+          <div class="mt-1">
+            <%= form.password_field :password, required: true,
+                class: "block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm" %>
+          </div>
+          <p class="mt-2 text-sm text-gray-500">
+            This is required to verify your identity before regenerating backup codes.
+          </p>
+        </div>
+
+        <div class="flex gap-3">
+          <%= form.submit "Generate New Backup Codes",
+              class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
+
+          <%= link_to "Cancel", profile_path,
+              class: "inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -4,17 +4,8 @@
    <p class="mt-2 text-gray-600">Create your admin account to get started</p>
  </div>

-  <%= form_with model: @user, url: signup_path, class: "contents" do |form| %>
-    <% if @user.errors.any? %>
-      <div class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-        <h2><%= pluralize(@user.errors.count, "error") %> prohibited this account from being saved:</h2>
-        <ul class="list-disc list-inside">
-          <% @user.errors.each do |error| %>
-            <li><%= error.full_message %></li>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
+  <%= form_with model: @user, url: signup_path, class: "contents", data: { controller: "form-errors" } do |form| %>
+    <%= render "shared/form_errors", form: form %>

    <div class="my-5">
      <%= form.label :email_address, class: "block font-medium text-sm text-gray-700" %>
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -83,4 +83,14 @@ Rails.application.configure do

  # Apply autocorrection by RuboCop to files generated by `bin/rails generate`.
  # config.generators.apply_rubocop_autocorrect_after_generate!
+
+  # Sentry configuration for development
+  # Only enabled if SENTRY_DSN environment variable is set and explicitly enabled
+  if ENV["SENTRY_DSN"].present? && ENV["SENTRY_ENABLED_IN_DEVELOPMENT"] == "true"
+    config.sentry.enabled = true
+
+    # High sample rates for development debugging
+    config.sentry.traces_sample_rate = ENV.fetch("SENTRY_TRACES_SAMPLE_RATE", 0.5).to_f
+    config.sentry.profiles_sample_rate = ENV.fetch("SENTRY_PROFILES_SAMPLE_RATE", 0.2).to_f
+  end
 end
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -133,4 +133,18 @@ Rails.application.configure do

  # Skip DNS rebinding protection for the default health check endpoint.
  config.host_authorization = { exclude: ->(request) { request.path == "/up" } }
+
+  # Sentry configuration for production
+  # Only enabled if SENTRY_DSN environment variable is set
+  if ENV["SENTRY_DSN"].present?
+    config.sentry.enabled = true
+
+    # Performance monitoring: sample 20% of transactions for traces
+    # Adjust based on your traffic volume and Sentry plan limits
+    config.sentry.traces_sample_rate = ENV.fetch("SENTRY_TRACES_SAMPLE_RATE", 0.2).to_f
+
+    # Continuous profiling: disabled by default in production due to cost
+    # Enable temporarily for performance investigations if needed
+    config.sentry.profiles_sample_rate = ENV.fetch("SENTRY_PROFILES_SAMPLE_RATE", 0.0).to_f
+  end
 end
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -50,4 +50,8 @@ Rails.application.configure do

  # Raise error when a before_action's only/except options reference missing actions.
  config.action_controller.raise_on_missing_callback_actions = true
+
+  # Disable Sentry in test environment to avoid interference with tests
+  # Sentry can be explicitly enabled for integration testing if needed
+  config.sentry.enabled = false
 end
--- a/config/initializers/content_security_policy.rb
+++ b/config/initializers/content_security_policy.rb
@@ -0,0 +1,65 @@
+# Be sure to restart your server when you modify this file.
+
+# Define an application-wide content security policy.
+# See the Securing Rails Applications Guide for more information:
+# https://guides.rubyonrails.org/security.html#content-security-policy-header
+
+Rails.application.configure do
+  config.content_security_policy do |policy|
+    # Default to self for everything, plus blob: for file downloads
+    policy.default_src :self, "blob:"
+
+    # Scripts: Allow self, importmaps, unsafe-inline for Turbo/StimulusJS, and blob: for downloads
+    # Note: unsafe_inline is needed for Stimulus controllers and Turbo navigation
+    policy.script_src :self, :unsafe_inline, :unsafe_eval, "blob:"
+
+    # Styles: Allow self and unsafe_inline for TailwindCSS dynamic classes
+    # and Stimulus controller style manipulations
+    policy.style_src :self, :unsafe_inline
+
+    # Images: Allow self, data URLs, and https for external images
+    policy.img_src :self, :data, :https
+
+    # Fonts: Allow self and data URLs
+    policy.font_src :self, :data
+
+    # Connect: Allow self for API calls, WebAuthn, and ActionCable if needed
+    # WebAuthn endpoints are on the same domain, so self is sufficient
+    policy.connect_src :self, "wss:"
+
+    # Media: Allow self
+    policy.media_src :self
+
+    # Object and embed sources: Disallow for security (no Flash/etc)
+    policy.object_src :none
+    policy.frame_src :none
+    policy.frame_ancestors :none
+
+    # Base URI: Restricted to self
+    policy.base_uri :self
+
+    # Form actions: Allow self for all form submissions
+    policy.form_action :self
+
+    # Manifest sources: Allow self for PWA manifest
+    policy.manifest_src :self
+
+    # Worker sources: Allow self for potential Web Workers
+    policy.worker_src :self
+
+    # Child sources: Allow self for any future iframes
+    policy.child_src :self
+
+    # Additional security headers for WebAuthn
+    # Required for WebAuthn to work properly
+    policy.require_trusted_types_for :none
+    policy.report_uri  "/api/csp-violation-report"
+  end
+
+  # Start with CSP in report-only mode for testing
+  # Set to false after verifying everything works in production
+  config.content_security_policy_report_only = Rails.env.development?
+
+  # Report CSP violations (optional - uncomment to enable)
+  # config.content_security_policy_report_uri = "/csp-violations"
+end
--- a/config/initializers/csp_local_logger.rb
+++ b/config/initializers/csp_local_logger.rb
@@ -0,0 +1,122 @@
+# Local file logger for CSP violations
+# Provides local logging even when Sentry is not configured
+
+Rails.application.config.after_initialize do
+  # Create a dedicated logger for CSP violations
+  csp_log_path = Rails.root.join("log", "csp_violations.log")
+
+  # Configure log rotation
+  csp_logger = Logger.new(
+    csp_log_path,
+    'daily',  # Rotate daily
+    30        # Keep 30 old log files
+  )
+
+  csp_logger.level = Logger::INFO
+
+  # Format: [TIMESTAMP] LEVEL MESSAGE
+  csp_logger.formatter = proc do |severity, datetime, progname, msg|
+    "[#{datetime.strftime('%Y-%m-%d %H:%M:%S')}] #{severity} #{msg}\n"
+  end
+
+  module CspViolationLocalLogger
+    def self.emit(event)
+      csp_data = event[:payload] || {}
+
+      # Build a structured log message
+      violated_directive = csp_data[:violated_directive] || "unknown"
+      blocked_uri = csp_data[:blocked_uri] || "unknown"
+      document_uri = csp_data[:document_uri] || "unknown"
+
+      # Create a comprehensive log entry
+      log_message = "CSP VIOLATION DETECTED\n"
+      log_message += "  Directive: #{violated_directive}\n"
+      log_message += "  Blocked URI: #{blocked_uri}\n"
+      log_message += "  Document URI: #{document_uri}\n"
+      log_message += "  User Agent: #{csp_data[:user_agent]}\n"
+      log_message += "  IP Address: #{csp_data[:ip_address]}\n"
+      log_message += "  Timestamp: #{csp_data[:timestamp]}\n"
+
+      if csp_data[:current_user_id].present?
+        log_message += "  Authenticated User ID: #{csp_data[:current_user_id]}\n"
+        log_message += "  Session ID: #{csp_data[:session_id]}\n"
+      else
+        log_message += "  User: Anonymous\n"
+      end
+
+      # Add additional details if available
+      if csp_data[:source_file].present?
+        log_message += "  Source File: #{csp_data[:source_file]}"
+        log_message += ":#{csp_data[:line_number]}" if csp_data[:line_number].present?
+        log_message += ":#{csp_data[:column_number]}" if csp_data[:column_number].present?
+        log_message += "\n"
+      end
+
+      if csp_data[:referrer].present?
+        log_message += "  Referrer: #{csp_data[:referrer]}\n"
+      end
+
+      # Determine severity for log level
+      level = determine_log_level(csp_data[:violated_directive])
+
+      self.csp_logger.log(level, log_message)
+
+      # Also log to main Rails logger for visibility
+      Rails.logger.info "CSP violation logged to csp_violations.log: #{violated_directive} - #{blocked_uri}"
+
+    rescue => e
+      # Ensure logger errors don't break the CSP reporting flow
+      Rails.logger.error "Failed to log CSP violation to file: #{e.message}"
+      Rails.logger.error e.backtrace.join("\n") if Rails.env.development?
+    end
+
+    def self.csp_logger
+      @csp_logger ||= begin
+        csp_log_path = Rails.root.join("log", "csp_violations.log")
+        logger = Logger.new(
+          csp_log_path,
+          'daily',  # Rotate daily
+          30        # Keep 30 old log files
+        )
+        logger.level = Logger::INFO
+        logger.formatter = proc do |severity, datetime, progname, msg|
+          "[#{datetime.strftime('%Y-%m-%d %H:%M:%S')}] #{severity} #{msg}\n"
+        end
+        logger
+      end
+    end
+
+    private
+
+    def self.determine_log_level(violated_directive)
+      return Logger::INFO unless violated_directive.present?
+
+      case violated_directive.to_sym
+      when :script_src, :script_src_elem, :script_src_attr, :frame_src, :child_src
+        Logger::WARN  # Higher priority violations
+      when :connect_src, :default_src, :style_src, :style_src_elem, :style_src_attr
+        Logger::INFO   # Medium priority violations
+      else
+        Logger::DEBUG  # Lower priority violations
+      end
+    end
+  end
+
+  # Register the local logger subscriber
+  Rails.event.subscribe(CspViolationLocalLogger)
+
+  Rails.logger.info "CSP violation local logger registered - logging to: #{csp_log_path}"
+
+  # Ensure the log file is created and writable
+  begin
+    # Create log file if it doesn't exist
+    FileUtils.touch(csp_log_path) unless File.exist?(csp_log_path)
+
+    # Test write to ensure permissions are correct
+    csp_logger.info "CSP Logger initialized at #{Time.current}"
+
+  rescue => e
+    Rails.logger.error "Failed to initialize CSP local logger: #{e.message}"
+    Rails.logger.error "CSP violations will only be sent to Sentry (if configured)"
+  end
+end
--- a/config/initializers/sentry.rb
+++ b/config/initializers/sentry.rb
@@ -0,0 +1,140 @@
+# Sentry configuration for error tracking and performance monitoring
+# Only initializes if SENTRY_DSN environment variable is set
+
+return unless ENV["SENTRY_DSN"].present?
+
+Rails.application.configure do
+  config.sentry.dsn = ENV["SENTRY_DSN"]
+
+  # Set environment (defaults to Rails.env)
+  config.sentry.environment = ENV["SENTRY_ENVIRONMENT"] || Rails.env
+
+  # Set release version from Git or environment variable
+  config.sentry.release = ENV["SENTRY_RELEASE"] || `git rev-parse HEAD 2>/dev/null`.strip.presence || nil
+
+  # Sample rate for performance monitoring (0.0 to 1.0)
+  config.sentry.traces_sample_rate = ENV.fetch("SENTRY_TRACES_SAMPLE_RATE", 0.1).to_f
+
+  # Enable profiling in development/staging, disable in production unless explicitly enabled
+  config.sentry.profiles_sample_rate = if Rails.env.production?
+    ENV.fetch("SENTRY_PROFILES_SAMPLE_RATE", 0.0).to_f
+  else
+    ENV.fetch("SENTRY_PROFILES_SAMPLE_RATE", 0.5).to_f
+  end
+
+  # Include additional context
+  config.sentry.before_send = lambda do |event, hint|
+    # Filter out sensitive information
+    if event.context[:extra]
+      event.context[:extra].reject! { |key, value|
+        key.to_s.match?(/password|secret|token|key/i) || value.to_s.match?(/password|secret/i)
+      }
+    end
+
+    # Filter sensitive parameters
+    if event.context[:request]
+      event.context[:request].reject! { |key, value|
+        key.to_s.match?(/password|secret|token|key|authorization/i)
+      }
+    end
+
+    event
+  end
+
+  # Include breadcrumbs for debugging
+  config.sentry.breadcrumbs_logger = [:active_support_logger, :http_logger]
+
+  # Send session data for user context
+  config.sentry.user_context = lambda do
+    if Current.user.present?
+      {
+        id: Current.user.id,
+        email: Current.user.email_address,
+        admin: Current.user.admin?
+      }
+    end
+  end
+
+  # Ignore common non-critical exceptions
+  config.sentry.excluded_exceptions += [
+    "ActionController::RoutingError",
+    "ActionController::InvalidAuthenticityToken",
+    "ActionController::UnknownFormat",
+    "ActionDispatch::Http::Parameters::ParseError",
+    "Rack::QueryParser::InvalidParameterError",
+    "Rack::Timeout::RequestTimeoutException",
+    "ActiveRecord::RecordNotFound"
+  ]
+
+  # Add CSP-specific tags for security events
+  config.sentry.tags = lambda do
+    {
+      # Add application context
+      app_name: "clinch",
+      app_environment: Rails.env,
+      # Add CSP policy status
+      csp_enabled: defined?(Rails.application.config.content_security_policy) &&
+                   Rails.application.config.content_security_policy.present?
+    }
+  end
+
+  # Enhance before_send to handle CSP events properly
+  config.sentry.before_send = lambda do |event, hint|
+    # Filter out sensitive information
+    if event.context[:extra]
+      event.context[:extra].reject! { |key, value|
+        key.to_s.match?(/password|secret|token|key/i) || value.to_s.match?(/password|secret/i)
+      }
+    end
+
+    # Filter sensitive parameters
+    if event.context[:request]
+      event.context[:request].reject! { |key, value|
+        key.to_s.match?(/password|secret|token|key|authorization/i)
+      }
+    end
+
+    # Special handling for CSP violations
+    if event.tags&.dig(:csp_violation)
+      # Ensure CSP violations have proper security context
+      event.context[:server] = event.context[:server] || {}
+      event.context[:server][:name] = "clinch-auth-service"
+      event.context[:server][:environment] = Rails.env
+
+      # Add additional security context
+      event.context[:extra] ||= {}
+      event.context[:extra][:security_context] = {
+        csp_reporting: true,
+        user_authenticated: event.context[:user].present?,
+        request_origin: event.context[:request]&.dig(:headers, "Origin"),
+        request_referer: event.context[:request]&.dig(:headers, "Referer")
+      }
+    end
+
+    event
+  end
+
+  # Add CSP-specific breadcrumbs for security events
+  config.sentry.before_breadcrumb = lambda do |breadcrumb, hint|
+    # Filter out sensitive breadcrumb data
+    if breadcrumb[:data]
+      breadcrumb[:data].reject! { |key, value|
+        key.to_s.match?(/password|secret|token|key|authorization/i) ||
+        value.to_s.match?(/password|secret/i)
+      }
+    end
+
+    # Mark CSP-related events
+    if breadcrumb[:message]&.include?("CSP Violation") ||
+       breadcrumb[:category]&.include?("csp")
+      breadcrumb[:data] ||= {}
+      breadcrumb[:data][:security_event] = true
+      breadcrumb[:data][:csp_violation] = true
+    end
+
+    breadcrumb
+  end
+
+  # Only send errors in production unless explicitly enabled
+  config.sentry.enabled = Rails.env.production? || ENV["SENTRY_ENABLED_IN_DEVELOPMENT"] == "true"
+end
--- a/config/initializers/sentry_subscriber.rb
+++ b/config/initializers/sentry_subscriber.rb
@@ -0,0 +1,120 @@
+# Sentry subscriber for CSP violations via Structured Event Reporting
+# This subscriber only sends events to Sentry if Sentry is properly initialized
+
+Rails.application.config.after_initialize do
+  # Only register the subscriber if Sentry is available and configured
+  if defined?(Sentry) && Sentry.initialized?
+
+    module CspViolationSentrySubscriber
+      def self.emit(event)
+        # Extract relevant CSP violation data
+        csp_data = event[:payload] || {}
+
+        # Build a descriptive message for Sentry
+        violated_directive = csp_data[:violated_directive]
+        blocked_uri = csp_data[:blocked_uri]
+        document_uri = csp_data[:document_uri]
+
+        message = "CSP Violation: #{violated_directive}"
+        message += " - Blocked: #{blocked_uri}" if blocked_uri.present?
+        message += " - On: #{document_uri}" if document_uri.present?
+
+        # Extract domain from blocked_uri for better classification
+        blocked_domain = extract_domain(blocked_uri) if blocked_uri.present?
+
+        # Determine severity based on violation type
+        level = determine_severity(violated_directive, blocked_uri)
+
+        # Send to Sentry with rich context
+        Sentry.capture_message(
+          message,
+          level: level,
+          tags: {
+            csp_violation: true,
+            violated_directive: violated_directive,
+            blocked_domain: blocked_domain,
+            document_domain: extract_domain(document_uri),
+            user_authenticated: csp_data[:current_user_id].present?
+          },
+          extra: {
+            # Full CSP report data
+            csp_violation_details: csp_data,
+            # Additional context for security analysis
+            request_context: {
+              user_agent: csp_data[:user_agent],
+              ip_address: csp_data[:ip_address],
+              session_id: csp_data[:session_id],
+              timestamp: csp_data[:timestamp]
+            }
+          },
+          user: csp_data[:current_user_id] ? { id: csp_data[:current_user_id] } : nil
+        )
+
+        # Log to Rails logger for redundancy
+        Rails.logger.info "CSP violation sent to Sentry: #{message}"
+      rescue => e
+        # Ensure subscriber errors don't break the CSP reporting flow
+        Rails.logger.error "Failed to send CSP violation to Sentry: #{e.message}"
+        Rails.logger.error e.backtrace.join("\n") if Rails.env.development?
+      end
+
+      private
+
+      # Extract domain from URI for better analysis
+      def self.extract_domain(uri)
+        return nil if uri.blank?
+
+        begin
+          parsed = URI.parse(uri)
+          parsed.host
+        rescue URI::InvalidURIError
+          # Handle cases where URI might be malformed or just a path
+          if uri.start_with?('/')
+            nil  # It's a relative path, no domain
+          else
+            uri.split('/').first  # Best effort extraction
+          end
+        end
+      end
+
+      # Determine severity level based on violation type
+      def self.determine_severity(violated_directive, blocked_uri)
+        return :warning unless violated_directive.present?
+
+        case violated_directive.to_sym
+        when :script_src, :script_src_elem, :script_src_attr
+          # Script violations are highest priority (XSS risk)
+          :error
+        when :style_src, :style_src_elem, :style_src_attr
+          # Style violations are moderate risk
+          :warning
+        when :img_src
+          # Image violations are typically lower priority
+          :info
+        when :connect_src
+          # Network violations are important
+          :warning
+        when :font_src, :media_src
+          # Font/media violations are lower priority
+          :info
+        when :frame_src, :child_src
+          # Frame violations can be security critical
+          :error
+        when :default_src
+          # Default src violations are important
+          :warning
+        else
+          # Unknown or custom directives
+          :warning
+        end
+      end
+    end
+
+    # Register the subscriber for CSP violation events
+    Rails.event.subscribe(CspViolationSentrySubscriber)
+
+    Rails.logger.info "CSP violation Sentry subscriber registered"
+  else
+    Rails.logger.info "Sentry not initialized - CSP violations will only be logged locally"
+  end
+end
--- a/db/migrate/20251104061455_clear_existing_backup_codes.rb
+++ b/db/migrate/20251104061455_clear_existing_backup_codes.rb
@@ -0,0 +1,13 @@
+class ClearExistingBackupCodes < ActiveRecord::Migration[8.1]
+  def up
+    # Clear all existing backup codes to force regeneration with BCrypt hashing
+    # This is a security migration to move from plain text to hashed storage
+    User.where.not(backup_codes: nil).update_all(backup_codes: nil)
+  end
+
+  def down
+    # This migration cannot be safely reversed
+    # as the original plain text codes cannot be recovered
+    raise ActiveRecord::IrreversibleMigration
+  end
+end
--- a/db/migrate/20251104064114_change_backup_codes_to_json.rb
+++ b/db/migrate/20251104064114_change_backup_codes_to_json.rb
@@ -0,0 +1,12 @@
+class ChangeBackupCodesToJson < ActiveRecord::Migration[8.1]
+  def up
+    # Change the column type from text to json
+    # This will automatically handle JSON serialization/deserialization
+    change_column :users, :backup_codes, :json
+  end
+
+  def down
+    # Revert back to text if needed
+    change_column :users, :backup_codes, :text
+  end
+end
--- a/docs/oidc-key-setup.md
+++ b/docs/oidc-key-setup.md
@@ -0,0 +1,136 @@
+# OIDC Private Key Setup
+
+Your OIDC provider needs an RSA private key to sign ID tokens. **This key must persist across deployments** or all existing tokens will become invalid.
+
+## Option 1: Environment Variable (Recommended for Docker/Kamal)
+
+### 1. Generate the key
+
+```bash
+# Generate a 2048-bit RSA key
+openssl genrsa -out oidc_private_key.pem 2048
+
+# View the key (you'll copy this)
+cat oidc_private_key.pem
+```
+
+### 2. Store in your `.env` file
+
+```bash
+# .env (for local development)
+OIDC_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEAyZ0qaICMiLVWSFs+ef9Xok3fzy0p6k/7D5TQzmxf7C2vQG7s
+2Odmi8iAHLoaUBaFj70qTbaconWyMr8s+ah+qZwrwolTLUe23VrceVXvInU57hBL
+...
+-----END RSA PRIVATE KEY-----"
+```
+
+**Important:** Keep the quotes and include the full key with `-----BEGIN` and `-----END` lines.
+
+### 3. For Kamal deployment
+
+Add to your Kamal secrets:
+
+```yaml
+# config/deploy.yml
+env:
+  secret:
+    - OIDC_PRIVATE_KEY
+```
+
+Then set it securely:
+
+```bash
+# Generate key
+bin/generate_oidc_key > oidc_private_key.pem
+
+# Add to .kamal/secrets
+echo "OIDC_PRIVATE_KEY=$(cat oidc_private_key.pem)" >> .kamal/secrets
+```
+
+### 4. Verify it's loaded
+
+```bash
+# In Rails console
+bin/rails runner "puts OidcJwtService.send(:private_key).present? ? 'Key loaded' : 'Key missing'"
+```
+
+---
+
+## Comparison
+
+| Feature | ENV Variable | Rails Credentials |
+|---------|-------------|-------------------|
+| **Best for** | Docker, Kamal, 12-factor | Simple deployments |
+| **Key rotation** | Easy (just update ENV) | Medium (re-encrypt) |
+| **Per-environment** | Yes (dev/staging/prod can differ) | No (same key everywhere) |
+| **Secrets manager** | Compatible (AWS Secrets, etc.) | Needs RAILS_MASTER_KEY |
+| **Setup complexity** | Low | Medium |
+
+**Recommendation:** Use ENV variable (`OIDC_PRIVATE_KEY`) for production with Kamal.
+
+---
+
+## Security Best Practices
+
+### DO:
+- ✅ Generate the key once and keep it forever
+- ✅ Store in secret manager (AWS Secrets Manager, 1Password, etc.)
+- ✅ Use strong key (2048-bit RSA minimum)
+- ✅ Backup the key securely
+- ✅ Restrict access (only ops team)
+
+### DON'T:
+- ❌ Commit the key to git (except encrypted credentials)
+- ❌ Share the key in Slack/email
+- ❌ Regenerate the key (invalidates all tokens)
+- ❌ Store in `.env` if it's committed to git
+- ❌ Use the same key for multiple environments
+
+---
+
+## Key Rotation (Advanced)
+
+Todo
+
+---
+
+## Troubleshooting
+
+### "No private key found" warning
+
+Check your setup:
+
+```bash
+# Is ENV set?
+echo $OIDC_PRIVATE_KEY
+
+# Can Rails load it?
+bin/rails runner "puts ENV['OIDC_PRIVATE_KEY'].present? ? 'ENV set' : 'ENV missing'"
+
+# Does it load correctly?
+bin/rails runner "puts OidcJwtService.send(:private_key).to_s[0..50]"
+```
+
+### "invalid RSA key" error
+
+- Make sure you include `-----BEGIN RSA PRIVATE KEY-----` header
+- Ensure newlines are preserved (use quotes in ENV)
+- Check for extra spaces or characters
+
+### Different JWKS key ID on each restart
+
+This means the key is being regenerated. You need to set `OIDC_PRIVATE_KEY` or add to credentials.
+
+### All tokens invalid after deployment
+
+The key changed. You either:
+- Regenerated the key (don't do this!)
+- Forgot to set ENV variable in production
+- The key wasn't loaded correctly
+
+Check logs for warnings and verify key is loaded:
+
+```bash
+kamal app logs --grep "OIDC"
+```
Author	SHA1	Message	Date
Dan Milne	8e0b2c28eb	CSP fixes	2025-11-08 20:01:07 +11:00
Dan Milne	f02665f690	Consolidate all the error messages - add some stimulus controller.	2025-11-07 16:58:28 +11:00
Dan Milne	631b2b53bb	Fix CSP reporting endpoitn. Fix the SER for CSP Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 23:22:15 +11:00
Dan Milne	6049429a41	Fix mobile view menu popout. Add an option SENTRY_DSN support, which uses rails event reporting Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 23:16:28 +11:00
Dan Milne	2b15aa2c40	Add sentry, set csp reporting API	2025-11-04 22:58:32 +11:00
Dan Milne	4f5974dd37	bah Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 21:33:52 +11:00
Dan Milne	5de53f1841	bug fix Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 21:21:00 +11:00
Dan Milne	73b2ae2f02	Add some docs Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 21:13:46 +11:00
Dan Milne	4c5ac344bd	Bug updating OIDC apps. Update readme Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 20:14:41 +11:00
Dan Milne	044b9239d6	Ok - this time add the new controllers we stripped out of inline and add back the csp Some checks failed CI / scan_ruby (push) Has been cancelled Details CI / scan_js (push) Has been cancelled Details CI / lint (push) Has been cancelled Details CI / test (push) Has been cancelled Details CI / system-test (push) Has been cancelled Details	2025-11-04 18:55:20 +11:00