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/pages/LoginPage.tsx

@@ -0,0 +1,22 @@
+import { UserAuthForm } from "@/components/auth/AuthForm";
+import Logo from "@/components/Logo";
+import { ThemeProvider } from "@/context/theme-provider";
+
+function LoginPage() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
+      <div className="size-full overflow-hidden">
+        <div className="p-8">
+          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div className="flex flex-col items-center space-y-2">
+              <Logo className="mb-6 h-8 w-8" />
+            </div>
+            <UserAuthForm />
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default LoginPage;

web/src/pages/Settings.tsx

@@ -33,6 +33,7 @@ import { PolygonType } from "@/types/canvas";
 import ObjectSettings from "@/components/settings/ObjectSettings";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import scrollIntoView from "scroll-into-view-if-needed";
+import Authentication from "@/components/settings/Authentication";
 
 export default function Settings() {
   const settingsViews = [
@@ -40,6 +41,7 @@ export default function Settings() {
     "masks / zones",
     "motion tuner",
     "debug",
+    "authentication",
   ] as const;
 
   type SettingsType = (typeof settingsViews)[number];
@@ -169,6 +171,7 @@ export default function Settings() {
             setUnsavedChanges={setUnsavedChanges}
           />
         )}
+        {page == "authentication" && <Authentication />}
       </div>
       {confirmationDialogOpen && (
         <AlertDialog