clientid works

frontend/app/src/components/AuthModal.tsx

@@ -7,12 +7,13 @@ import {
 import React, { useContext, useEffect, useRef, useState } from "react";
 import {
   TokenResponse,
+  useGetClientQuery,
   useGetUserQuery,
   useLoginMutation,
   useRegisterMutation,
 } from "../slice/AuthApi";
 import { MessageContext } from "../App";
-import { store, updateToken, updateUser } from "../config/store";
+import { store, updateClient, updateToken, updateUser } from "../config/store";
 import tr from "../config/translation";
 import { useNavigate } from "react-router-dom";
 
@@ -35,6 +36,15 @@ const AuthModal = (props: {
     }
   }, [data, isFetching, useGetUserQuery]);
 
+  const { data: clientData, isFetching: isFetchingClient } = useGetClientQuery(
+    {}
+  );
+  useEffect(() => {
+    if (!isFetchingClient) {
+      store.dispatch(updateClient(clientData.id));
+    }
+  }, [clientData, isFetchingClient, useGetClientQuery]);
+
   const [current, setCurrent] = useState("login");
   useEffect(() => {
     if (carousel?.current !== undefined) {

frontend/app/src/config/store.ts

@@ -11,11 +11,13 @@ import { NewsApi } from "../slice/NewsApi";
 
 export type AuthDataType = {
   token: string | null;
+  clientId: string | null;
   user: { name: string | null; username: string } | null;
 };
 
 const initialAuthDataState: AuthDataType = {
   token: null,
+  clientId: null,
   user: null,
 };
 
@@ -35,6 +37,8 @@ export type StorePrototype = {
 
 export const updateToken = createAction<string>("auth/updateToken");
 export const getLocalToken = createAction("auth/getLocalToken");
+export const updateClient = createAction<string>("auth/updateClient");
+export const getLocalClient = createAction("auth/getLocalClient");
 export const updateUser = createAction<User>("auth/updateUser");
 export const logOut = createAction("auth/logOut");
 
@@ -58,6 +62,16 @@ export const store = configureStore({
           state.token = token;
         }
       });
+      builder.addCase(updateClient, (state, action) => {
+        state.clientId = action.payload;
+        localStorage.setItem("clientId", action.payload);
+      });
+      builder.addCase(getLocalClient, (state) => {
+        const clientId: string | null = localStorage.getItem("clientId");
+        if (clientId) {
+          state.clientId = clientId;
+        }
+      });
       builder.addCase(updateUser, (state, action) => {
         state.user = action.payload;
       });

frontend/app/src/pages/AppRoutes.tsx

@@ -1,7 +1,12 @@
 import React, { ReactNode } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainPage from "./MainPage";
-import { getLocalToken, loadLanguage, store } from "../config/store";
+import {
+  getLocalClient,
+  getLocalToken,
+  loadLanguage,
+  store,
+} from "../config/store";
 import DashboardPage from "./DashboardPage";
 import PropTypes from "prop-types";
 import NotFoundPage from "./NotFoundPage";
@@ -12,6 +17,7 @@ import QueueCard from "../components/queue/QueueCard";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
+  store.dispatch(getLocalClient());
   store.dispatch(loadLanguage());
 
   return (

frontend/app/src/slice/AuthApi.ts

@@ -34,6 +34,10 @@ export const AuthApi = createApi({
       if (token) {
         headers.set("authorization", `Bearer ${token}`);
       }
+      const clientID = (getState() as RootState).auth.clientId;
+      if (clientID) {
+        headers.set("X-Client-Id", clientID);
+      }
       return headers;
     },
   }),
@@ -41,6 +45,9 @@ export const AuthApi = createApi({
     getUser: builder.query({
       query: () => "/me",
     }),
+    getClient: builder.query({
+      query: () => "/anon",
+    }),
     login: builder.mutation({
       query: (data: FormData) => ({
         url: "/token",
@@ -59,5 +66,9 @@ export const AuthApi = createApi({
   }),
 });
 
-export const { useGetUserQuery, useLoginMutation, useRegisterMutation } =
-  AuthApi;
+export const {
+  useGetUserQuery,
+  useGetClientQuery,
+  useLoginMutation,
+  useRegisterMutation,
+} = AuthApi;