chore: improve auth

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

Cargo.lock

@@ -32,7 +32,7 @@ async-compression={version="0.4", default-features=false, features=["gzip", "tok
 tokio-tar={package="astral-tokio-tar", version="0.6"}
 blake3={version="1.8"}
 argon2={version="0.6.0-rc.8", features=[]}
-password-hash={version="0.6.0", features=[
+password-hash={version="0.6.1", features=[
     "rand_core",
     "getrandom",
 ]} # required for getrandom feature

Cargo.toml

@@ -4,6 +4,7 @@ use aide::OperationInput;
 use axum::{
     extract::FromRequestParts,
     http::{StatusCode, request::Parts},
+    response::{IntoResponse, Response},
 };
 use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
 
@@ -48,25 +49,51 @@ impl OperationInput for SessionUser {}
 impl<T> OperationInput for MaybeExtract<T> {}
 
 impl<S: Send + Sync> axum::extract::FromRequestParts<S> for SessionId {
-    type Rejection = StatusCode;
+    type Rejection = Response;
 
     async fn from_request_parts(parts: &mut Parts, _state: &S) -> Result<Self, Self::Rejection> {
         let jar = CookieJar::from_headers(&parts.headers);
-        jar.get(SESSION_COOKIE_NAME).map(|c| SessionId(c.value().to_string())).ok_or(StatusCode::UNAUTHORIZED)
+
+        let session_cookie = jar.get(SESSION_COOKIE_NAME);
+        let username_cookie = jar.get(PUBLIC_COOKIE_NAME);
+
+        if username_cookie.is_some() && session_cookie.is_none() {
+            let mut cookie = PUBLIC_COOKIE.clone();
+            cookie.make_removal();
+            return Err(Response::builder()
+                .header("Set-Cookie", cookie.encoded().to_string())
+                .status(StatusCode::UNAUTHORIZED)
+                .body("Session expired".into())
+                .unwrap());
+        }
+
+        if session_cookie.is_some() && username_cookie.is_none() {
+            let mut cookie = SESSION_COOKIE.clone();
+            cookie.make_removal();
+            return Err(Response::builder()
+                .header("Set-Cookie", cookie.encoded().to_string())
+                .status(StatusCode::UNAUTHORIZED)
+                .body("Invalid session".into())
+                .unwrap());
+        }
+
+        jar.get(SESSION_COOKIE_NAME)
+            .map(|c| SessionId(c.value().to_string()))
+            .ok_or(StatusCode::UNAUTHORIZED.into_response())
     }
 }
 
 impl axum::extract::FromRequestParts<RouterState> for SessionUser {
-    type Rejection = StatusCode;
+    type Rejection = Response;
 
     async fn from_request_parts(parts: &mut Parts, state: &RouterState) -> Result<Self, Self::Rejection> {
         let session_id = SessionId::from_request_parts(parts, state).await?.0;
         let user = state
             .app
             .sessions
             .get(&session_id)
-            .map_err(|_| StatusCode::UNAUTHORIZED)?
-            .ok_or(StatusCode::UNAUTHORIZED)?;
+            .map_err(|_| StatusCode::UNAUTHORIZED.into_response())?
+            .ok_or(StatusCode::UNAUTHORIZED.into_response())?;
 
         Ok(SessionUser(user))
     }

src/web/session.rs

@@ -52,7 +52,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@types/topojson-client": "^3.1.5",
 		"@types/topojson-specification": "^1.0.5",
-		"astro": "6.1.4",
+		"astro": "6.1.5",
 		"babel-plugin-react-compiler": "^1.0.0",
 		"rollup-plugin-license": "^3.7.0",
 		"typescript": "^6.0.2"

web/bun.lock

@@ -1,5 +1,5 @@
 export * from "./query";
 export * from "./constants";
 export * from "./types";
-export * from "./hooks";
+export * from "../hooks/api";
 export * from "./client";

web/package.json

@@ -66,7 +66,7 @@ export const Project = () => {
 		setProjectId(window?.document.location.pathname.split("/").pop());
 	}, []);
 
-	const { project } = useProject(projectId);
+	const { project, notFound } = useProject(projectId);
 	const {
 		graph,
 		isUpdating: graphUpdating,
@@ -99,6 +99,10 @@ export const Project = () => {
 		[toggleFilter],
 	);
 
+	if (notFound) {
+		return <div className={styles.notFound}>Project not found</div>;
+	}
+
 	if (!project) return null;
 
 	return (
@@ -131,7 +135,7 @@ export const Project = () => {
 					/>
 					<GeoCard query={query} onSelect={onSelectDimRow} />
 					<DimensionTabsCard dimensions={["platform", "browser"]} query={query} onSelect={onSelectDimRow} />
-					<DimensionTabsCard
+					<DimensionDropdownCard
 						dimensions={["mobile", "screen_width", "orientation"]}
 						query={query}
 						onSelect={(v) => onSelectDimRow(v, "mobile")}

web/src/api/index.ts

@@ -1,5 +1,5 @@
 import { User2Icon } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
+import { useId, useRef } from "react";
 import { api, useMe, useMutation } from "../../api";
 import { createToast } from "../toast";
 import styles from "./me.module.css";
@@ -9,7 +9,8 @@ export const MyAccount = () => {
 	const confirmPasswordId = useId();
 
 	const formRef = useRef<HTMLFormElement>(null);
-	const { role, username, isLoading } = useMe();
+	const { role, username, isLoading, authError } = useMe();
+
 	const { mutate } = useMutation({
 		mutationFn: api["/api/dashboard/user/{username}/password"].put,
 		onSuccess: () => {
@@ -19,9 +20,11 @@ export const MyAccount = () => {
 		onError: console.error,
 	});
 
-	const [loading, setLoading] = useState(true);
-	useEffect(() => setLoading(isLoading), [isLoading]);
-	if (loading || !username) return <div className={"loading-spinner"} />;
+	if (authError) {
+		return "You don't have permission to view this page.";
+	}
+
+	if (isLoading || !username) return <div className={"loading-spinner"} />;
 
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();

web/src/components/project.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ReactElement, useEffect, useRef, useState } from "react";
+import { Fragment, type ReactElement, useRef } from "react";
 import styles from "./tables.module.css";
 
 import { EditIcon, EllipsisVerticalIcon, RectangleEllipsisIcon, TrashIcon } from "lucide-react";
@@ -14,7 +14,7 @@ import {
 	useProjects,
 	useUsers,
 } from "../../api";
-import { cls } from "../../utils";
+import { cls, getUsername } from "../../utils";
 import { createToast } from "../toast";
 
 type DropdownOptions = Record<string, ((close: () => void) => ReactElement) | null>;
@@ -74,6 +74,7 @@ const ProjectDropdown = ({ project }: { project: ProjectResponse }) => {
 
 export const ProjectsTable = () => {
 	const { projects, isLoading } = useProjects();
+
 	const columns: Column<(typeof projects)[number]>[] = [
 		{
 			id: "displayName",
@@ -164,9 +165,9 @@ const EntityDropdown = ({ entity }: { entity: EntityResponse }) => {
 };
 
 export const EntitiesTable = () => {
-	const { entities, isLoading } = useEntities();
+	const { entities, isLoading, authError } = useEntities();
 
-	if (!useAdminPerms()) {
+	if (authError) {
 		return "You don't have permission to view this page.";
 	}
 
@@ -211,7 +212,7 @@ export const EntitiesTable = () => {
 };
 
 const UserDropdown = ({ user }: { user: UserResponse }) => {
-	const { username } = useMe();
+	const username = getUsername();
 	const options: DropdownOptions = {
 		edit:
 			username !== user.username
@@ -256,20 +257,12 @@ const UserDropdown = ({ user }: { user: UserResponse }) => {
 	return <Dropdown options={options} />;
 };
 
-const useAdminPerms = () => {
-	const { role } = useMe();
-	const [isMounted, setIsMounted] = useState(false);
-	useEffect(() => {
-		setIsMounted(true);
-	});
-	return !isMounted || role === "admin";
-};
-
 export const UsersTable = () => {
-	const { users, isLoading } = useUsers();
+	const { users, isLoading, authError } = useUsers();
 	const rows = users.map((user) => ({ id: user.username, ...user })) ?? [];
 
-	if (!useAdminPerms()) {
+	// TODO: if the user isn't an admin, show no perms
+	if (authError) {
 		return "You don't have permission to view this page.";
 	}
 

web/src/components/settings/me.tsx

@@ -1,7 +1,7 @@
 import styles from "./userInfo.module.css";
 
 import { HelpCircle, LogOutIcon, SettingsIcon, SquareArrowOutUpRightIcon, UserIcon } from "lucide-react";
-import { api } from "../api";
+import { api, queryClient } from "../api";
 import { cls, getUsername } from "../utils";
 
 export const LoginButton = () => {
@@ -53,6 +53,7 @@ export const LoginButton = () => {
 						href="#"
 						onClick={() => {
 							api["/api/dashboard/auth/logout"].post().then(() => {
+								queryClient.clear();
 								window.location.href = "/";
 							});
 						}}