Improve oauth error webpage

Author: ericdallo

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Improve OAuth callback error page to show error code, description, and error URI from the authorization server response.
+
 ## 0.115.0
 
 - Improve native image size for smaller eca binaries

resources/webpages/oauth.html

@@ -27,7 +27,7 @@
             background: #fff;
             border-radius: 12px;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-            max-width: 400px;
+            max-width: 480px;
             width: 90%;
         }
 
@@ -91,15 +91,49 @@
         .error-details {
             background: #fef2f2;
             border: 1px solid #fecaca;
-            border-radius: 6px;
-            padding: 0.75rem 1rem;
+            border-radius: 8px;
+            padding: 1rem 1.25rem;
             margin-bottom: 1.5rem;
+            text-align: left;
+        }
+        
+        .error-label {
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: #b91c1c;
+            margin-bottom: 0.25rem;
+        }
+        
+        .error-code {
             font-family: monospace;
-            font-size: 0.85rem;
+            font-size: 0.9rem;
+            font-weight: 600;
             color: #991b1b;
+            margin-bottom: 0.75rem;
+            word-break: break-word;
+        }
+        
+        .error-description {
+            font-size: 0.85rem;
+            line-height: 1.5;
+            color: #7f1d1d;
             word-break: break-word;
         }
 
+        .error-link {
+            display: inline-block;
+            margin-top: 0.75rem;
+            font-size: 0.8rem;
+            color: #b91c1c;
+            text-decoration: underline;
+        }
+        
+        .error-link:hover {
+            color: #7f1d1d;
+        }
+        
         .hint {
             font-size: 0.75rem;
             color: #888;
@@ -125,8 +159,17 @@ <h2 class="success">Authentication Successful</h2>
         {% if error %}
         <div class="status-icon">✕</div>
         <h2 class="error">Authentication Failed</h2>
-        <p class="message">Something went wrong during authentication.</p>
-        <div class="error-details">{{error-message}}</div>
+        <p class="message">The authorization server returned an error.</p>
+        <div class="error-details">
+            <div class="error-label">Error</div>
+            <div class="error-code">{{error-code}}</div>
+            {% if error-description %}
+            <div class="error-description">{{error-description}}</div>
+            {% endif %}
+            {% if error-uri %}
+            <a class="error-link" href="{{error-uri}}" target="_blank" rel="noopener noreferrer">More information →</a>
+            {% endif %}
+        </div>
         {% endif %}
 
         {% if success %}

src/eca/oauth.clj

@@ -33,11 +33,13 @@
 
 (defn ^:private render-oauth-page
   "Render the OAuth HTML page with success or error state."
-  [{:keys [success? error-message]}]
+  [{:keys [success? error-code error-description error-uri]}]
   (selmer/render-file "webpages/oauth.html"
                       {:success success?
                        :error (not success?)
-                       :error-message (or error-message "Unknown error")
+                       :error-code (or error-code "unknown_error")
+                       :error-description error-description
+                       :error-uri error-uri
                        :logo-svg @logo-svg}))
 
 (defn ^:private url->base-url
@@ -97,7 +99,7 @@
      :challenge (-> verifier str->sha256 ->base64 ->base64url (string/replace "=" ""))}))
 
 (defn ^:private oauth-handler [request on-success on-error]
-  (let [{:keys [code error state]} (:params request)]
+  (let [{:keys [code error error_description error_uri state]} (:params request)]
     (if code
       (do
         (on-success {:code code
@@ -107,7 +109,9 @@
       (do
         (on-error error)
         (-> (response/response (render-oauth-page {:success? false
-                                                   :error-message error}))
+                                                   :error-code error
+                                                   :error-description error_description
+                                                   :error-uri error_uri}))
             (response/content-type "text/html"))))))
 
 (defn ^:private successful-json-body