Added CSRF & YouTube and dark mode

frontend/hooks/use-api.tsx

@@ -16,6 +16,7 @@ async function request<T>(
 		method?: "GET" | "POST" | "PATCH" | "DELETE";
 		body?: any;
 		requiresAuth?: boolean;
+		csrfToken?: boolean;
 	} = {},
 ): Promise<ApiResponse<T>> {
 	const { method = "GET", body, requiresAuth = true } = options;
@@ -23,6 +24,13 @@ async function request<T>(
 		"Content-Type": "application/json",
 	};
 
+	if (options.csrfToken) {
+		const res: ApiResponse<{ csrf: string }> = await (
+			await fetch(`${API_URL}/csrf-token`)
+		).json();
+		if (res.data) headers["X-CSRF-Token"] = res.data.csrf;
+	}
+
 	if (requiresAuth) {
 		const authToken = getCookie("auth_token");
 		if (!authToken) {
@@ -35,6 +43,7 @@ async function request<T>(
 		method,
 		headers,
 		body: body ? JSON.stringify(body) : undefined,
+		credentials: options.csrfToken ? "include" : "omit",
 	});
 
 	const apiResponse: ApiResponse<T> = await response.json();
@@ -49,8 +58,9 @@ async function request<T>(
 async function fetcher<T>(
 	url: string,
 	requiresAuth: boolean = true,
+	csrfToken?: boolean,
 ): Promise<ApiResponse<T>> {
-	return request(url, { requiresAuth });
+	return request(url, { requiresAuth, csrfToken });
 }
 
 async function mutationHandler<T, A>(
@@ -59,23 +69,26 @@ async function mutationHandler<T, A>(
 		arg,
 		method,
 		requiresAuth,
+		csrfToken,
 	}: {
 		arg: A;
 		method: "GET" | "POST" | "PATCH" | "DELETE";
 		requiresAuth: boolean;
+		csrfToken?: boolean;
 	},
 ): Promise<ApiResponse<T>> {
-	return request(url, { method, body: arg, requiresAuth });
+	return request(url, { method, body: arg, requiresAuth, csrfToken });
 }
 
 export function useApi<T>(
 	url: string,
 	config?: SWRConfiguration,
 	requiresAuth: boolean = true,
+	csrfToken?: boolean,
 ) {
 	const swr = useSWR<ApiResponse<T>>(
 		url,
-		() => fetcher(url, requiresAuth),
+		() => fetcher(url, requiresAuth, csrfToken),
 		config,
 	);
 
@@ -92,10 +105,12 @@ export default function useApiMutation<T, A>(
 	config?: SWRMutationConfiguration<ApiResponse<T>, Error, string, A>,
 	method: "GET" | "POST" | "PATCH" | "DELETE" = "GET",
 	requiresAuth: boolean = false,
+	csrfToken?: boolean,
 ) {
 	const mutation = useSWRMutation<ApiResponse<T>, Error, string, A>(
 		endpoint,
-		(url, { arg }) => mutationHandler(url, { arg, method, requiresAuth }),
+		(url, { arg }) =>
+			mutationHandler(url, { arg, method, requiresAuth, csrfToken }),
 		config,
 	);
 	return {

frontend/hooks/use-login.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { setCookie } from "cookies-next";
-import useApiMutation from "./use-api";
+import useApiMutation, { ApiResponse } from "./use-api";
+import { useEffect, useState } from "react";
+import { API_URL } from "@/lib/constants";
 
 export interface LoginArgs {
 	email: string;
@@ -13,7 +15,13 @@ export default function useLogin() {
 		trigger,
 		isMutating: loading,
 		isSuccess,
-	} = useApiMutation<string, LoginArgs>("/users/login", undefined, "POST");
+	} = useApiMutation<string, LoginArgs>(
+		"/users/login",
+		undefined,
+		"POST",
+		false,
+		true,
+	);
 
 	const login = async (inputs: LoginArgs) => {
 		try {