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>
2024-05-18 11:36:13 -05:00
parent a70dd02788
commit 1133202cbd
48 changed files with 2541 additions and 833 deletions
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@@ -43,6 +43,14 @@ module.exports = {
      "error",
      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
    "no-console": "error",
    "prettier/prettier": [
      "warn",
--- a/web/login.html
+++ b/web/login.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/images/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frigate</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/images/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/images/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/images/favicon-16x16.png"
+    />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" />
+    <link rel="mask-icon" href="/images/favicon.svg" color="#3b82f7" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/src/login.tsx"></script>
+  </body>
+</html>
--- a/web/package.json
+++ b/web/package.json
@@ -7,6 +7,7 @@
    "dev": "vite --host",
    "build": "tsc && vite build --base=/BASE_PATH/",
    "lint": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore --fix .",
    "preview": "vite preview",
    "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,js,jsx,css,html}\"",
    "test": "vitest",
--- a/web/src/api/index.tsx
+++ b/web/src/api/index.tsx
@@ -24,6 +24,12 @@ export function ApiProvider({ children, options }: ApiProviderType) {
          const [path, params] = Array.isArray(key) ? key : [key, undefined];
          return axios.get(path, { params }).then((res) => res.data);
        },
+        onError: (error, _key) => {
+          if ([401, 302, 307].includes(error.response.status)) {
+            window.location.href =
+              error.response.headers.get("location") ?? "login";
+          }
+        },
        ...options,
      }}
    >
@@ -40,6 +46,7 @@ function WsWithConfig({ children }: WsWithConfigType) {
  return <WsProvider>{children}</WsProvider>;
 }

+// eslint-disable-next-line react-refresh/only-export-components
 export function useApiHost() {
  return baseUrl;
 }
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import axios, { AxiosError } from "axios";
+import { Toaster } from "@/components/ui/sonner";
+import { toast } from "sonner";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+
+  const formSchema = z.object({
+    user: z.string(),
+    password: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      user: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      await axios.post(
+        "/api/login",
+        {
+          user: values.user,
+          password: values.password,
+        },
+        {
+          headers: {
+            "X-CSRF-TOKEN": 1,
+          },
+        },
+      );
+      window.location.href = "/";
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const err = error as AxiosError;
+        if (err.response?.status === 429) {
+          toast.error("Exceeded rate limit. Try again later.", {
+            position: "top-center",
+          });
+        } else if (err.response?.status === 400) {
+          toast.error("Login failed", {
+            position: "top-center",
+          });
+        } else {
+          toast.error("Unknown error. Check logs.", {
+            position: "top-center",
+          });
+        }
+      } else {
+        toast.error("Unknown error. Check console logs.", {
+          position: "top-center",
+        });
+      }
+
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className={cn("grid gap-6", className)} {...props}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            name="user"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>User</FormLabel>
+                <FormControl>
+                  <Input
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    {...field}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    type="password"
+                    {...field}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <div className="flex flex-row gap-2 pt-5">
+            <Button
+              variant="select"
+              disabled={isLoading}
+              className="flex flex-1"
+            >
+              {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
+              Login
+            </Button>
+          </div>
+        </form>
+      </Form>
+      <Toaster />
+    </div>
+  );
+}
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/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>
  );
 }
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@@ -0,0 +1,111 @@
+import { Button } from "../ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
+import { Input } from "../ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type CreateUserOverlayProps = {
+  show: boolean;
+  onCreate: (user: string, password: string) => void;
+  onCancel: () => void;
+};
+export default function CreateUserDialog({
+  show,
+  onCreate,
+  onCancel,
+}: CreateUserOverlayProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const formSchema = z.object({
+    user: z
+      .string()
+      .min(1)
+      .regex(/^[A-Za-z0-9._]+$/, {
+        message: "Username may only include letters, numbers, . or _",
+      }),
+    password: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      user: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    await onCreate(values.user, values.password);
+    form.reset();
+    setIsLoading(false);
+  };
+
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create User</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              name="user"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>User</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      type="password"
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <DialogFooter className="mt-4">
+              <Button variant="select" disabled={isLoading}>
+                {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
+                Create User
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/components/overlay/DeleteUserDialog.tsx
+++ b/web/src/components/overlay/DeleteUserDialog.tsx
@@ -0,0 +1,40 @@
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type SetPasswordProps = {
+  show: boolean;
+  onDelete: () => void;
+  onCancel: () => void;
+};
+export default function DeleteUserDialog({
+  show,
+  onDelete,
+  onCancel,
+}: SetPasswordProps) {
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete User</DialogTitle>
+        </DialogHeader>
+        <div>Are you sure?</div>
+        <DialogFooter>
+          <Button
+            className="flex items-center gap-1"
+            variant="destructive"
+            size="sm"
+            onClick={onDelete}
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -0,0 +1,51 @@
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type SetPasswordProps = {
+  show: boolean;
+  onSave: (password: string) => void;
+  onCancel: () => void;
+};
+export default function SetPasswordDialog({
+  show,
+  onSave,
+  onCancel,
+}: SetPasswordProps) {
+  const [password, setPassword] = useState<string>();
+
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Set Password</DialogTitle>
+        </DialogHeader>
+        <Input
+          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          type="password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        />
+        <DialogFooter>
+          <Button
+            className="flex items-center gap-1"
+            variant="select"
+            size="sm"
+            onClick={() => {
+              onSave(password!);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/components/settings/Authentication.tsx
+++ b/web/src/components/settings/Authentication.tsx
@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useState } from "react";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { Toaster } from "@/components/ui/sonner";
+import useSWR from "swr";
+import Heading from "../ui/heading";
+import { User } from "@/types/user";
+import { Button } from "../ui/button";
+import SetPasswordDialog from "../overlay/SetPasswordDialog";
+import axios from "axios";
+import CreateUserDialog from "../overlay/CreateUserDialog";
+import { toast } from "sonner";
+import DeleteUserDialog from "../overlay/DeleteUserDialog";
+import { Card } from "../ui/card";
+
+export default function Authentication() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const { data: users, mutate: mutateUsers } = useSWR<User[]>("users");
+
+  const [showSetPassword, setShowSetPassword] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+
+  const [selectedUser, setSelectedUser] = useState<string>();
+
+  useEffect(() => {
+    document.title = "Authentication Settings - Frigate";
+  }, []);
+
+  const onSavePassword = useCallback((user: string, password: string) => {
+    axios
+      .put(`users/${user}/password`, {
+        password: password,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          setShowSetPassword(false);
+        }
+      })
+      .catch((_error) => {
+        toast.error("Error setting password", {
+          position: "top-center",
+        });
+      });
+  }, []);
+
+  const onCreate = async (user: string, password: string) => {
+    try {
+      await axios.post("users", {
+        username: user,
+        password: password,
+      });
+      setShowCreate(false);
+      mutateUsers((users) => {
+        users?.push({ username: user });
+        return users;
+      }, false);
+    } catch (error) {
+      toast.error("Error creating user. Check server logs.", {
+        position: "top-center",
+      });
+    }
+  };
+
+  const onDelete = async (user: string) => {
+    try {
+      await axios.delete(`users/${user}`);
+      setShowDelete(false);
+      mutateUsers((users) => {
+        return users?.filter((u) => {
+          return u.username !== user;
+        });
+      }, false);
+    } catch (error) {
+      toast.error("Error deleting user. Check server logs.", {
+        position: "top-center",
+      });
+    }
+  };
+
+  if (!config || !users) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="flex size-full flex-col md:flex-row">
+      <Toaster position="top-center" closeButton={true} />
+      <div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+        <Heading as="h3" className="my-2">
+          Users
+        </Heading>
+        <div className="flex flex-row items-center justify-end gap-2">
+          <Button
+            variant="select"
+            onClick={() => {
+              setShowCreate(true);
+            }}
+          >
+            Add User
+          </Button>
+        </div>
+        <div className="mt-3 space-y-3">
+          {users.map((u) => (
+            <Card key={u.username} className="mb-1 p-2">
+              <div className="flex items-center gap-3">
+                <div className="ml-3 flex flex-none shrink overflow-hidden text-ellipsis align-middle text-lg">
+                  {u.username}
+                </div>
+                <div className="flex flex-1 justify-end space-x-2 ">
+                  <Button
+                    variant="secondary"
+                    onClick={() => {
+                      setShowSetPassword(true);
+                      setSelectedUser(u.username);
+                    }}
+                  >
+                    Set Password
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => {
+                      setShowDelete(true);
+                      setSelectedUser(u.username);
+                    }}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+      <SetPasswordDialog
+        show={showSetPassword}
+        onCancel={() => {
+          setShowSetPassword(false);
+        }}
+        onSave={(password) => {
+          onSavePassword(selectedUser!, password);
+        }}
+      />
+      <DeleteUserDialog
+        show={showDelete}
+        onCancel={() => {
+          setShowDelete(false);
+        }}
+        onDelete={() => {
+          onDelete(selectedUser!);
+        }}
+      />
+      <CreateUserDialog
+        show={showCreate}
+        onCreate={onCreate}
+        onCancel={() => {
+          setShowCreate(false);
+        }}
+      />
+    </div>
+  );
+}
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -80,7 +80,7 @@ export default function General() {
            <div className="mt-2 space-y-6">
              <div className="space-y-0.5">
                <div className="text-md">Default Playback Rate</div>
-                <div className="text-sm text-muted-foreground my-2">
+                <div className="my-2 text-sm text-muted-foreground">
                  <p>Default playback rate for recordings playback.</p>
                </div>
              </div>
@@ -106,7 +106,7 @@ export default function General() {
                </SelectGroup>
              </SelectContent>
            </Select>
-            <Separator className="flex my-2 bg-secondary" />
+            <Separator className="my-2 flex bg-secondary" />
            <div className="mt-2 space-y-6">
              <div className="space-y-0.5">
                <div className="text-md">Low Data Mode</div>
--- a/web/src/context/theme-provider.tsx
+++ b/web/src/context/theme-provider.tsx
@@ -12,6 +12,7 @@ type ColorScheme =
  | "theme-red"
  | "theme-default";

+// eslint-disable-next-line react-refresh/only-export-components
 export const colorSchemes: ColorScheme[] = [
  "theme-blue",
  "theme-gold",
@@ -25,6 +26,7 @@ export const colorSchemes: ColorScheme[] = [
 ];

 // Helper function to generate friendly color scheme names
+// eslint-disable-next-line react-refresh/only-export-components
 export const friendlyColorSchemeName = (className: string): string => {
  const words = className.split("-").slice(1); // Exclude the first word (e.g., 'theme')
  return words
@@ -136,6 +138,7 @@ export function ThemeProvider({
  );
 }

+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
  const context = useContext(ThemeProviderContext);

--- a/web/src/login.tsx
+++ b/web/src/login.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import LoginPage from "@/pages/LoginPage.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <LoginPage />
+  </React.StrictMode>,
+);
--- a/web/src/pages/LoginPage.tsx
+++ b/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;
--- a/web/src/pages/Settings.tsx
+++ b/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
--- a/web/src/types/user.ts
+++ b/web/src/types/user.ts
@@ -0,0 +1,3 @@
+export type User = {
+  username: string;
+};
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,9 +1,11 @@
 /// <reference types="vitest" />
-import path from "path";
+import path, { resolve } from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";

+const proxyHost = "localhost:5000";
+
 // https://vitejs.dev/config/
 export default defineConfig({
  define: {
@@ -12,29 +14,37 @@ export default defineConfig({
  server: {
    proxy: {
      "/api": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
        ws: true,
      },
      "/vod": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
      },
      "/clips": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
      },
      "/exports": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
      },
      "/ws": {
-        target: "ws://localhost:5000",
+        target: `ws://${proxyHost}`,
        ws: true,
      },
      "/live": {
-        target: "ws://localhost:5000",
+        target: `ws://${proxyHost}`,
        changeOrigin: true,
        ws: true,
      },
    },
  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+        login: resolve(__dirname, "login.html"),
+      },
+    },
+  },
  plugins: [
    react(),
    monacoEditorPlugin.default({