Mop/amap
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add login / logout logic for user

Browse Source
This commit is contained in:
Julien Aldon
2026-02-17 17:31:29 +01:00
parent a8c8c489da
commit aca24ca560
14 changed files with 258 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/services/api.ts
View File

@@ -25,12 +25,40 @@ import type { Contract, ContractCreate } from "./resources/contracts";
import { notifications } from "@mantine/notifications";
import { t } from "@/config/i18n";
export async function refreshToken() {
return await fetch(`${Config.backend_uri}/auth/refresh`, {method: "POST", credentials: "include"});
}
export async function fetchWithAuth(input: RequestInfo, options?: RequestInit) {
const res = await fetch(input, {
credentials: "include",
...options,
});
if (res.status === 401) {
const refresh = await refreshToken();
if (refresh.status == 400 || refresh.status == 401) {
window.location.href = `${Config.backend_uri}/auth/logout`;
const error = new Error("Unauthorized");
error.cause = 401
throw error;
}
const newRes = await fetch(input, {
credentials: "include",
...options,
});
return newRes;
}
return res;
}
export function useGetShipments(filters?: URLSearchParams): UseQueryResult<Shipment[], Error> {
const queryString = filters?.toString();
return useQuery<Shipment[]>({
queryKey: ["shipments", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/shipments${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/shipments${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
});
@@ -43,7 +71,7 @@ export function useGetShipment(
return useQuery<Shipment>({
queryKey: ["shipment"],
queryFn: () =>
fetch(`${Config.backend_uri}/shipments/${id}`, {
fetchWithAuth(`${Config.backend_uri}/shipments/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -56,7 +84,7 @@ export function useCreateShipment() {
return useMutation({
mutationFn: (newShipment: ShipmentCreate) => {
return fetch(`${Config.backend_uri}/shipments`, {
return fetchWithAuth(`${Config.backend_uri}/shipments`, {
method: "POST",
credentials: "include",
headers: {
@@ -89,7 +117,7 @@ export function useEditShipment() {
return useMutation({
mutationFn: ({ shipment, id }: ShipmentEditPayload) => {
return fetch(`${Config.backend_uri}/shipments/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/shipments/${id}`, {
method: "PUT",
credentials: "include",
headers: {
@@ -121,7 +149,7 @@ export function useDeleteShipment() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/shipments/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/shipments/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -153,9 +181,11 @@ export function useGetProductors(filters?: URLSearchParams): UseQueryResult<Prod
return useQuery<Productor[]>({
queryKey: ["productors", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
})
.then((res) => res.json()
),
});
}
@@ -166,7 +196,7 @@ export function useGetProductor(
return useQuery<Productor>({
queryKey: ["productor"],
queryFn: () =>
fetch(`${Config.backend_uri}/productors/${id}`, {
fetchWithAuth(`${Config.backend_uri}/productors/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -179,7 +209,7 @@ export function useCreateProductor() {
return useMutation({
mutationFn: (newProductor: ProductorCreate) => {
return fetch(`${Config.backend_uri}/productors`, {
return fetchWithAuth(`${Config.backend_uri}/productors`, {
method: "POST",
credentials: "include",
headers: {
@@ -212,7 +242,7 @@ export function useEditProductor() {
return useMutation({
mutationFn: ({ productor, id }: ProductorEditPayload) => {
return fetch(`${Config.backend_uri}/productors/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/productors/${id}`, {
method: "PUT",
credentials: "include",
headers: {
@@ -244,7 +274,7 @@ export function useDeleteProductor() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/productors/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/productors/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -278,7 +308,7 @@ export function useGetForm(
return useQuery<Form>({
queryKey: ["form"],
queryFn: () =>
fetch(`${Config.backend_uri}/forms/${id}`, {
fetchWithAuth(`${Config.backend_uri}/forms/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -291,9 +321,7 @@ export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], E
return useQuery<Form[]>({
queryKey: ["forms", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`).then((res) => res.json()),
});
}
@@ -302,7 +330,7 @@ export function useCreateForm() {
return useMutation({
mutationFn: (newForm: FormCreate) => {
return fetch(`${Config.backend_uri}/forms`, {
return fetchWithAuth(`${Config.backend_uri}/forms`, {
method: "POST",
credentials: "include",
headers: {
@@ -321,7 +349,7 @@ export function useDeleteForm() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/forms/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/forms/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -353,7 +381,7 @@ export function useEditForm() {
return useMutation({
mutationFn: ({ id, form }: FormEditPayload) => {
return fetch(`${Config.backend_uri}/forms/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/forms/${id}`, {
method: "PUT",
credentials: "include",
headers: {
@@ -387,7 +415,7 @@ export function useGetProduct(
return useQuery<Product>({
queryKey: ["product"],
queryFn: () =>
fetch(`${Config.backend_uri}/products/${id}`, {
fetchWithAuth(`${Config.backend_uri}/products/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -400,7 +428,7 @@ export function useGetProducts(filters?: URLSearchParams): UseQueryResult<Produc
return useQuery<Product[]>({
queryKey: ["products", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/products${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/products${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
});
@@ -411,7 +439,7 @@ export function useCreateProduct() {
return useMutation({
mutationFn: (newProduct: ProductCreate) => {
return fetch(`${Config.backend_uri}/products`, {
return fetchWithAuth(`${Config.backend_uri}/products`, {
method: "POST",
credentials: "include",
headers: {
@@ -443,7 +471,7 @@ export function useDeleteProduct() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/products/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/products/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -475,7 +503,7 @@ export function useEditProduct() {
return useMutation({
mutationFn: ({ id, product }: ProductEditPayload) => {
return fetch(`${Config.backend_uri}/products/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/products/${id}`, {
method: "PUT",
credentials: "include",
headers: {
@@ -510,7 +538,7 @@ export function useGetUser(
return useQuery<User>({
queryKey: ["user"],
queryFn: () =>
fetch(`${Config.backend_uri}/users/${id}`, {
fetchWithAuth(`${Config.backend_uri}/users/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -523,7 +551,7 @@ export function useGetUsers(filters?: URLSearchParams): UseQueryResult<User[], E
return useQuery<User[]>({
queryKey: ["users", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/users${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/users${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
});
@@ -534,7 +562,7 @@ export function useCreateUser() {
return useMutation({
mutationFn: (newUser: UserCreate) => {
return fetch(`${Config.backend_uri}/users`, {
return fetchWithAuth(`${Config.backend_uri}/users`, {
method: "POST",
credentials: "include",
headers: {
@@ -566,7 +594,7 @@ export function useDeleteUser() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/users/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/users/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -598,7 +626,7 @@ export function useEditUser() {
return useMutation({
mutationFn: ({ id, user }: UserEditPayload) => {
return fetch(`${Config.backend_uri}/users/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/users/${id}`, {
method: "PUT",
credentials: "include",
headers: {
@@ -630,7 +658,7 @@ export function useGetContracts(filters?: URLSearchParams): UseQueryResult<Contr
return useQuery<Contract[]>({
queryKey: ["contracts", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/contracts${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/contracts${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
});
@@ -643,7 +671,7 @@ export function useGetContract(
return useQuery<Contract>({
queryKey: ["contract"],
queryFn: () =>
fetch(`${Config.backend_uri}/contracts/${id}`, {
fetchWithAuth(`${Config.backend_uri}/contracts/${id}`, {
credentials: "include",
}).then((res) => res.json()),
enabled: !!id,
@@ -654,7 +682,7 @@ export function useGetContract(
export function useGetContractFile() {
return useMutation({
mutationFn: async (id: number) => {
const res = await fetch(`${Config.backend_uri}/contracts/${id}/file`, {
const res = await fetchWithAuth(`${Config.backend_uri}/contracts/${id}/file`, {
credentials: "include",
}).then((res) => res);
@@ -682,7 +710,7 @@ export function useGetContractFile() {
export function useGetAllContractFile() {
return useMutation({
mutationFn: async (form_id: number) => {
const res = await fetch(`${Config.backend_uri}/contracts/${form_id}/files`, {
const res = await fetchWithAuth(`${Config.backend_uri}/contracts/${form_id}/files`, {
credentials: "include",
}).then((res) => res);
@@ -714,7 +742,6 @@ export function useCreateContract() {
mutationFn: (newContract: ContractCreate) => {
return fetch(`${Config.backend_uri}/contracts`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
@@ -737,7 +764,7 @@ export function useDeleteContract() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: number) => {
return fetch(`${Config.backend_uri}/contracts/${id}`, {
return fetchWithAuth(`${Config.backend_uri}/contracts/${id}`, {
method: "DELETE",
credentials: "include",
headers: {
@@ -769,7 +796,7 @@ export function useGetRoles(filters?: URLSearchParams): UseQueryResult<Role[], E
return useQuery<Role[]>({
queryKey: ["roles", queryString],
queryFn: () =>
fetch(`${Config.backend_uri}/users/roles${filters ? `?${queryString}` : ""}`, {
fetchWithAuth(`${Config.backend_uri}/users/roles${filters ? `?${queryString}` : ""}`, {
credentials: "include",
}).then((res) => res.json()),
});
@@ -784,25 +811,5 @@ export function useCurrentUser() {
}).then((res) => res.json());
},
retry: false,
refetchOnWindowFocus: false,
});
}
export function useLogoutUser() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => {
return fetch(`${Config.backend_uri}/auth/logout`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
}).then((res) => res.json());
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["currentUser"] });
},
});
}
}

33
frontend/src/services/auth/AuthProvider.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { createContext, useContext } from "react";
import { useCurrentUser } from "../api";
import type { UserLogged } from "../resources/users";
export type Auth = {
loggedUser: UserLogged | null;
isLoading: boolean;
}
const AuthContext = createContext<Auth | undefined>(undefined)
export function AuthProvider({ children }: {children: React.ReactNode}) {
const {data: loggedUser, isLoading} = useCurrentUser();
const value: Auth = {
loggedUser: loggedUser ?? null,
isLoading,
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
)
}
export function useAuth(): Auth {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used inside AuthProvider");
}
return context;
}

20
frontend/src/services/auth/ProtectedRoute/index.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Group, Loader } from "@mantine/core";
import { Navigate, Outlet } from "react-router";
import { useAuth } from "../AuthProvider";
export function ProtectedRoute() {
const { loggedUser, isLoading } = useAuth();
if (!loggedUser && isLoading)
return (
<Group align="center" justify="center" h="80vh" w="100%">
<Loader color="pink" />
</Group>
);
if (!loggedUser?.logged) {
return <Navigate to="/" replace />;
}
return <Outlet />;
}