Auth! (#11347)

* reload the window on 401

* backend apis for auth

* add login page

* re-enable web linter

* fix login page routing

* bypass csrf for internal auth endpoint

* disable healthcheck in devcontainer target

* include login page in vite build

* redirect to login page on 401

* implement config for users and settings

* implement JWT actual secret

* add brute force protection on login

* add support for redirecting from auth failures on api calls

* return location for redirect

* default cookie name should pass regex test

* set hash iterations to current OWASP recommendation

* move users to database instead of config

* config option to reset admin password on startup

* user management UI

* check for deleted user on refresh

* validate username and fixes

* remove password constraint

* cleanup

* fix user check on refresh

* web fixes

* implement auth via new external port

* use x-forwarded-for to rate limit login attempts by ip

* implement logout and profile

* fixes

* lint fixes

* add support for user passthru from upstream proxies

* add support for specifying a logout url

* add documentation

* Update docs/docs/configuration/authentication.md

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Update docs/docs/configuration/authentication.md

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/menu/AccountSettings.tsx

@@ -7,31 +7,82 @@ import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { DialogClose } from "../ui/dialog";
+import { LuLogOut } from "react-icons/lu";
+import useSWR from "swr";
 
 type AccountSettingsProps = {
   className?: string;
 };
 export default function AccountSettings({ className }: AccountSettingsProps) {
+  const { data: profile } = useSWR("profile");
+  const { data: config } = useSWR("config");
+  const logoutUrl = config?.auth.logout_url || "/api/logout";
+
+  const Container = isDesktop ? DropdownMenu : Drawer;
+  const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
+  const Content = isDesktop ? DropdownMenuContent : DrawerContent;
+  const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
+
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "flex flex-col items-center justify-center",
-            isDesktop
-              ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
-              : "text-secondary-foreground",
-            className,
-          )}
+    <div className={className}>
+      <Container>
+        <Trigger asChild>
+          <a href="#">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn(
+                    "flex flex-col items-center justify-center",
+                    isDesktop
+                      ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
+                      : "text-secondary-foreground",
+                    className,
+                  )}
+                >
+                  <VscAccount className="size-5 md:m-[6px]" />
+                </div>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent side="right">
+                  <p>Account</p>
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </a>
+        </Trigger>
+        <Content
+          className={
+            isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
+          }
         >
-          <VscAccount className="size-5 md:m-[6px]" />
-        </div>
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent side="right">
-          <p>Account</p>
-        </TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
+          <div className="w-full flex-col overflow-y-auto overflow-x-hidden">
+            <DropdownMenuLabel>
+              Current User: {profile?.username || "anonymous"}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
+            <MenuItem
+              className={
+                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+              }
+            >
+              <a className="flex" href={logoutUrl}>
+                <LuLogOut className="mr-2 size-4" />
+                <span>Logout</span>
+              </a>
+            </MenuItem>
+          </div>
+        </Content>
+      </Container>
+    </div>
   );
 }