forked from Github/frigate
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>
This commit is contained in:
Blake Blackshear
161
web/src/components/settings/Authentication.tsx
Normal file
161
web/src/components/settings/Authentication.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user