From bb63182dba10ed752fedfc9b1ddee26b7b4525c3 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Wed, 15 Apr 2026 07:01:56 -0400
Subject: [PATCH] fix(web): use plain HTML form for logout to avoid React
 Router 500

React Router's <Form> intercepts submissions and tries to match the
action URL against client-side routes. Since /auth/logout is a
server-only route, this caused a 500 error on sign out.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/layouts/app-shell.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/fabro-web/app/layouts/app-shell.tsx b/apps/fabro-web/app/layouts/app-shell.tsx
index 392ff4457..86109fa39 100644
--- a/apps/fabro-web/app/layouts/app-shell.tsx
+++ b/apps/fabro-web/app/layouts/app-shell.tsx
@@ -17,7 +17,7 @@ import {
   SunIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { Form, Link, Outlet, redirect, useLocation, useMatches, useRevalidator } from "react-router";
+import { Link, Outlet, useLocation, useMatches, useRevalidator } from "react-router";
 import { getAuthMe } from "../api";
 import { DemoModeProvider } from "../lib/demo-mode";
 import { useTheme } from "../lib/theme";
@@ -143,14 +143,14 @@ export default function AppShell({ loaderData }: any) {
                     className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-panel py-1 outline-1 -outline-offset-1 outline-line-strong transition data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
                   >
                     <MenuItem>
-                      <Form method="POST" action="/auth/logout">
+                      <form method="POST" action="/auth/logout">
                         <button
                           type="submit"
                           className="block w-full px-4 py-2 text-left text-sm text-fg-3 data-focus:bg-overlay data-focus:outline-hidden"
                         >
                           Sign out
                         </button>
-                      </Form>
+                      </form>
                     </MenuItem>
                   </MenuItems>
                 </Menu>
@@ -239,7 +239,7 @@ export default function AppShell({ loaderData }: any) {
             </div>
             {provider !== "tailscale" && (
               <div className="mt-3 space-y-1 px-2">
-                <Form method="POST" action="/auth/logout">
+                <form method="POST" action="/auth/logout">
                   <DisclosureButton
                     as="button"
                     type="submit"
@@ -247,7 +247,7 @@ export default function AppShell({ loaderData }: any) {
                   >
                     Sign out
                   </DisclosureButton>
-                </Form>
+                </form>
               </div>
             )}
           </div>