fix: sync tokens

Author: Shchepotin

src/services/api/services/auth.ts

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import useFetchBase from "../use-fetch-base";
 import useFetch from "../use-fetch";
 import { API_URL } from "../config";
 import { User } from "../types/user";
@@ -17,7 +16,7 @@ export type AuthLoginResponse = Tokens & {
 };
 
 export function useAuthLoginService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthLoginRequest) => {
@@ -39,7 +38,7 @@ export type AuthGoogleLoginResponse = Tokens & {
 };
 
 export function useAuthGoogleLoginService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthGoogleLoginRequest) => {
@@ -61,7 +60,7 @@ export type AuthFacebookLoginResponse = Tokens & {
 };
 
 export function useAuthFacebookLoginService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthFacebookLoginRequest, requestConfig?: RequestConfigType) => {
@@ -83,7 +82,7 @@ export type AuthSignUpRequest = {
 export type AuthSignUpResponse = void;
 
 export function useAuthSignUpService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthSignUpRequest, requestConfig?: RequestConfigType) => {
@@ -104,7 +103,7 @@ export type AuthConfirmEmailRequest = {
 export type AuthConfirmEmailResponse = void;
 
 export function useAuthConfirmEmailService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthConfirmEmailRequest, requestConfig?: RequestConfigType) => {
@@ -125,7 +124,7 @@ export type AuthConfirmNewEmailRequest = {
 export type AuthConfirmNewEmailResponse = void;
 
 export function useAuthConfirmNewEmailService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthConfirmNewEmailRequest, requestConfig?: RequestConfigType) => {
@@ -146,7 +145,7 @@ export type AuthForgotPasswordRequest = {
 export type AuthForgotPasswordResponse = void;
 
 export function useAuthForgotPasswordService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthForgotPasswordRequest, requestConfig?: RequestConfigType) => {
@@ -168,7 +167,7 @@ export type AuthResetPasswordRequest = {
 export type AuthResetPasswordResponse = void;
 
 export function useAuthResetPasswordService() {
-  const fetchBase = useFetchBase();
+  const fetchBase = useFetch();
 
   return useCallback(
     (data: AuthResetPasswordRequest, requestConfig?: RequestConfigType) => {

src/services/api/use-fetch-base.ts

@@ -1,27 +1,69 @@
 "use client";
 
 import { useCallback } from "react";
-import useFetchBase from "./use-fetch-base";
-import useAuthTokens from "../auth/use-auth-tokens";
-import { FetchInitType, FetchInputType } from "./types/fetch-params";
+import { AUTH_REFRESH_URL } from "./config";
+import { FetchInputType, FetchInitType } from "./types/fetch-params";
+import useLanguage from "../i18n/use-language";
+import { getTokensInfo, setTokensInfo } from "../auth/auth-tokens-info";
 
 function useFetch() {
-  const { tokensInfoRef, setTokensInfo } = useAuthTokens();
-  const fetchBase = useFetchBase();
+  const language = useLanguage();
 
-  const fetchWrapper = useCallback(
+  return useCallback(
     async (input: FetchInputType, init?: FetchInitType) => {
-      return fetchBase(input, init, {
-        token: tokensInfoRef.current?.token,
-        refreshToken: tokensInfoRef.current?.refreshToken,
-        tokenExpires: tokensInfoRef.current?.tokenExpires,
-        setTokensInfo,
+      const tokens = getTokensInfo();
+
+      let headers: HeadersInit = {
+        "x-custom-lang": language,
+      };
+
+      if (!(init?.body instanceof FormData)) {
+        headers = {
+          ...headers,
+          "Content-Type": "application/json",
+        };
+      }
+
+      if (tokens?.token) {
+        headers = {
+          ...headers,
+          Authorization: `Bearer ${tokens.token}`,
+        };
+      }
+
+      if (tokens?.tokenExpires && tokens.tokenExpires - 60000 <= Date.now()) {
+        const newTokens = await fetch(AUTH_REFRESH_URL, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${tokens.refreshToken}`,
+          },
+        }).then((res) => res.json());
+
+        if (newTokens.token) {
+          setTokensInfo({
+            token: newTokens.token,
+            refreshToken: newTokens.refreshToken,
+            tokenExpires: newTokens.tokenExpires,
+          });
+
+          headers = {
+            ...headers,
+            Authorization: `Bearer ${newTokens.token}`,
+          };
+        }
+      }
+
+      return fetch(input, {
+        ...init,
+        headers: {
+          ...headers,
+          ...init?.headers,
+        },
       });
     },
-    [fetchBase, setTokensInfo, tokensInfoRef]
+    [language]
   );
-
-  return fetchWrapper;
 }
 
 export default useFetch;

src/services/api/use-fetch.ts

@@ -23,15 +23,7 @@ export const AuthActionsContext = createContext<{
 });
 
 export const AuthTokensContext = createContext<{
-  tokensInfoRef: React.MutableRefObject<Tokens>;
   setTokensInfo: (tokensInfo: TokensInfo) => void;
 }>({
-  tokensInfoRef: {
-    current: {
-      token: null,
-      refreshToken: null,
-      tokenExpires: null,
-    },
-  },
   setTokensInfo: () => {},
 });