Refresh antiforgery token if not valid. Trigger UnhandledHydroError when issues with navigation.

Author: kjeske

docs/content/features/events.md

@@ -78,7 +78,7 @@ This is fine in most scenarios when dispatching is not the only one operation we
 But sometimes your only intent is to dispatch an event:
 
 ```csharp
-// ProductList.cshtml.cs~~~~
+// ProductList.cshtml.cs
 
 public class ProductList : HydroComponent
 {
@@ -104,7 +104,7 @@ Now, after clicking the button, the event `OpenAddModal` will be triggered witho
 Another way to avoid the extra render of the component is to use `[SkipOutput]` attribute on the Hydro action:
 
 ```csharp
-// ProductList.cshtml.cs~~~~
+// ProductList.cshtml.cs
 
 public class ProductList : HydroComponent
 {

docs/content/features/form-validation.md

@@ -95,7 +95,7 @@ public class Counter(IValidator<Counter> validator) : HydroComponent
 // HydroValidationExtensions.cs
 
 public static class HydroValidationExtensions
-{
+{~~~~
     public static bool Validate<TComponent>(this TComponent component, IValidator<TComponent> validator) where TComponent : HydroComponent
     {
         component.IsModelTouched = true;

src/HydroComponentsExtensions.cs

@@ -13,6 +13,7 @@
 using Microsoft.AspNetCore.Routing;
 using Microsoft.Extensions.DependencyInjection;
 using Hydro.Configuration;
+using Microsoft.Extensions.Logging;
 using Newtonsoft.Json;
 
 namespace Hydro;
@@ -23,13 +24,31 @@ public static void MapHydroComponent(this IEndpointRouteBuilder app, Type compon
     {
         var componentName = componentType.Name;
 
-        app.MapPost($"/hydro/{componentName}/{{method?}}", async ([FromServices] IServiceProvider serviceProvider, [FromServices] IViewComponentHelper viewComponentHelper, [FromServices] HydroOptions hydroOptions, [FromServices] IAntiforgery antiforgery, HttpContext httpContext, string method) =>
+        app.MapPost($"/hydro/{componentName}/{{method?}}", async (
+            [FromServices] IServiceProvider serviceProvider,
+            [FromServices] IViewComponentHelper viewComponentHelper,
+            [FromServices] HydroOptions hydroOptions,
+            [FromServices] IAntiforgery antiforgery,
+            [FromServices] ILogger<HydroComponent> logger,
+            HttpContext httpContext,
+            string method
+        ) =>
         {
             if (hydroOptions.AntiforgeryTokenEnabled)
             {
-                await antiforgery.ValidateRequestAsync(httpContext);
+                try
+                {
+                    await antiforgery.ValidateRequestAsync(httpContext);
+                }
+                catch (AntiforgeryValidationException exception)
+                {
+                    logger.LogWarning(exception, "Antiforgery token not valid");
+                    var requestToken = antiforgery.GetTokens(httpContext).RequestToken;
+                    httpContext.Response.Headers.Add(HydroConsts.ResponseHeaders.RefreshToken, requestToken);
+                    return Results.BadRequest(new { token = requestToken });
+                }
             }
-            
+
             if (httpContext.IsHydro())
             {
                 await ExecuteRequestOperations(httpContext, method);
@@ -40,7 +59,7 @@ public static void MapHydroComponent(this IEndpointRouteBuilder app, Type compon
             var htmlContent = await viewComponentHelper.InvokeAsync(componentType);
 
             var content = await GetHtml(htmlContent);
-
+            
             return Results.Content(content, MediaTypeNames.Text.Html);
         });
     }

src/HydroConsts.cs

@@ -20,6 +20,7 @@ public static class ResponseHeaders
         public const string Trigger = "Hydro-Trigger";
         public const string OperationId = "Hydro-Operation-Id";
         public const string SkipOutput = "Hydro-Skip-Output";
+        public const string RefreshToken = "Refresh-Antiforgery-Token";
     }
 
     public static class ContextItems

src/Scripts/hydro.js

@@ -28,6 +28,11 @@
       }
 
       if (!response.ok) {
+        const eventDetail = {
+          message: "Problem with loading the content",
+          data: null
+        }
+        document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, { detail: { data: eventDetail } }));
         throw new Error(`HTTP error! status: ${response.status}`);
       } else {
         let data = await response.text();
@@ -102,7 +107,7 @@
     const body = JSON.stringify(eventData.data);
     const hydroEvent = el.getAttribute("x-on-hydro-event");
     const wireEventData = JSON.parse(hydroEvent);
-    await hydroRequest(el, url, 'application/json', body, null, wireEventData, operationId);
+    await hydroRequest(el, url, 'application/json', body, 'event', wireEventData, operationId);
   }
 
   async function hydroBind(el) {
@@ -130,11 +135,11 @@
     const bindAlreadyInitialized = [...binding[component.id].formData].length !== 0;
 
     binding[component.id].formData.set(propertyName, value);
-    
-    if (bindAlreadyInitialized){
+
+    if (bindAlreadyInitialized) {
       return Promise.resolve();
     }
-    
+
     if (binding[component.id].timeout) {
       clearTimeout(binding[component.id].timeout);
     }
@@ -258,23 +263,35 @@
         });
 
         if (!response.ok) {
-          const contentType = response.headers.get("content-type");
-          let eventDetail = {};
-
-          try {
-            if (contentType && contentType.indexOf("application/json") !== -1) {
-              const json = await response.json();
-              eventDetail.message = json?.message || "Unhandled exception";
-              eventDetail.data = json?.data;
-            } else {
-              eventDetail.message = await response.text();
+          if (response.status === 400 && config.Antiforgery && response.headers.get("Refresh-Antiforgery-Token")) {
+            const json = await response.json();
+            config.Antiforgery.Token = json.token;
+          } else if (response.status === 403) {
+            if (type !== 'event') {
+              document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, { detail: { data: { message: "Unauthorized access" } } }));
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+          } else {
+            const contentType = response.headers.get("content-type");
+            let eventDetail = {};
+
+            try {
+              if (contentType && contentType.indexOf("application/json") !== -1) {
+                const json = await response.json();
+                eventDetail.message = json?.message || "Unhandled exception";
+                eventDetail.data = json?.data;
+              } else {
+                eventDetail.message = await response.text();
+              }
+            } catch {
+              // ignore
             }
-          } catch {
-            // ignore
-          }
 
-          document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, { detail: { data: eventDetail } }));
-          throw new Error(`HTTP error! status: ${response.status}`);
+            if (type !== 'event') {
+              document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, { detail: { data: eventDetail } }));
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
         } else {
           const skipOutputHeader = response.headers.get('Hydro-Skip-Output');
 
@@ -519,10 +536,10 @@ document.addEventListener('alpine:init', () => {
       let timeout = 0;
 
       const eventHandler = async (event) => {
-        if (event === 'submit' || event === 'click'){
+        if (event === 'submit' || event === 'click') {
           event.preventDefault();
         }
-        
+
         clearTimeout(timeout);
 
         timeout = setTimeout(async () => {