feat: make authStorage a single token data source of truth

Author: MieszkoTSH

.changeset/old-houses-obey.md

@@ -0,0 +1,5 @@
+---
+"react-starter-boilerplate": minor
+---
+
+make authStorage a single source of truth for token data

src/context/apiClient/apiClientContextController/interceptors/requestInterceptors.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosRequestHeaders, InternalAxiosRequestConfig } from 'axios';
 import { jwtDecode } from 'jwt-decode';
 
-import { RefreshTokenMutationResponse } from 'api/actions/auth/auth.types';
 import { authStorage } from 'context/auth/authStorage/AuthStorage';
+import { RefreshTokenMutationResponse } from 'api/actions/auth/auth.types';
 import { refreshTokenUrl } from 'api/actions/auth/auth.mutations';
 
 export const requestSuccessInterceptor = async (
@@ -24,13 +24,13 @@ export const requestSuccessInterceptor = async (
 
       const { exp } = jwtDecode<{ exp: number }>(data.accessToken);
 
-      authStorage.accessToken = data.accessToken;
-      authStorage.expires = exp;
-      authStorage.refreshToken = data.refreshToken;
+      authStorage.tokenData = {
+        accessToken: data.accessToken,
+        expires: exp,
+        refreshToken: data.refreshToken,
+      };
     } catch (e) {
-      authStorage.accessToken = null;
-      authStorage.expires = null;
-      authStorage.refreshToken = null;
+      authStorage.resetTokens();
     }
 
     return {

src/context/apiClient/apiClientContextController/interceptors/responseInterceptors.ts

@@ -1,11 +1,11 @@
 import axios, { type AxiosError, AxiosResponse } from 'axios';
 import { jwtDecode } from 'jwt-decode';
 
-import { authStorage } from 'context/auth/authStorage/AuthStorage';
 import { getStandardizedApiError } from 'context/apiClient/apiClientContextController/apiError/apiError';
 import { ExtendedAxiosRequestConfig } from 'api/types/types';
 import { RefreshTokenMutationResponse } from 'api/actions/auth/auth.types';
 import { refreshTokenUrl } from 'api/actions/auth/auth.mutations';
+import { authStorage } from 'context/auth/authStorage/AuthStorage';
 
 export const responseSuccessInterceptor = (response: AxiosResponse) => response;
 
@@ -15,9 +15,7 @@ export const responseFailureInterceptor = async (error: AxiosError<unknown>) =>
   const originalRequest = error.config as ExtendedAxiosRequestConfig;
 
   if (standarizedError.statusCode === 401 && originalRequest?._retry) {
-    authStorage.accessToken = null;
-    authStorage.expires = null;
-    authStorage.refreshToken = null;
+    authStorage.resetTokens();
 
     window.location.replace('/login');
 
@@ -34,15 +32,15 @@ export const responseFailureInterceptor = async (error: AxiosError<unknown>) =>
       });
       const { exp } = jwtDecode<{ exp: number }>(data.accessToken);
 
-      authStorage.accessToken = data.accessToken;
-      authStorage.expires = exp;
-      authStorage.refreshToken = data.refreshToken;
+      authStorage.tokenData = {
+        accessToken: data.accessToken,
+        expires: exp,
+        refreshToken: data.refreshToken,
+      };
 
       return axios(originalRequest);
     } catch {
-      authStorage.accessToken = null;
-      authStorage.expires = null;
-      authStorage.refreshToken = null;
+      authStorage.resetTokens();
       window.location.replace('/login');
 
       return Promise.reject(standarizedError);

src/context/auth/authActionCreators/authActionCreators.ts

@@ -1,21 +1,15 @@
-import { useCallback, useEffect, useMemo, useReducer } from 'react';
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';
 
 import { useMutation } from 'hooks/useMutation/useMutation';
 import { useUser } from '../../../hooks/useUser/useUser';
-import { resetTokens, setTokens } from '../authActionCreators/authActionCreators';
 import { AuthContext } from '../authContext/AuthContext';
 import { AuthContextValue } from '../authContext/AuthContext.types';
-import { authReducer } from '../authReducer/authReducer';
-import { authStorage } from '../authStorage/AuthStorage';
+import { authStorage } from 'context/auth/authStorage/AuthStorage';
 
 import { AuthContextControllerProps } from './AuthContextController.types';
 
 export const AuthContextController = ({ children }: AuthContextControllerProps) => {
-  const [state, dispatch] = useReducer(authReducer, {
-    accessToken: authStorage.accessToken,
-    refreshToken: authStorage.refreshToken,
-    expires: authStorage.expires,
-  });
+  const authStorageData = useSyncExternalStore(authStorage.subscribe, authStorage.getTokenData);
 
   const {
     data: user,
@@ -24,52 +18,44 @@ export const AuthContextController = ({ children }: AuthContextControllerProps)
     isError,
     resetUser,
   } = useUser({
-    enabled: !!state.accessToken,
+    enabled: !!authStorageData.accessToken,
   });
 
   const { mutateAsync: login, isPending: isAuthenticating } = useMutation('loginMutation', {
     onSuccess: (res) => {
-      dispatch(
-        setTokens({
-          accessToken: res.accessToken,
-          refreshToken: res.refreshToken,
-          expires: res.expires,
-        }),
-      );
+      authStorage.tokenData = {
+        accessToken: res.accessToken,
+        refreshToken: res.refreshToken,
+        expires: res.expires,
+      };
     },
     onError: () => {
-      dispatch(resetTokens());
+      authStorage.resetTokens();
       resetUser();
     },
   });
 
   const logout = useCallback(() => {
     resetUser();
-    dispatch(resetTokens());
+    authStorage.resetTokens();
   }, [resetUser]);
 
   useEffect(() => {
     if (isError) {
-      dispatch(resetTokens());
+      authStorage.resetTokens();
     }
   }, [isError]);
 
-  useEffect(() => {
-    authStorage.accessToken = state.accessToken;
-    authStorage.expires = state.expires;
-    authStorage.refreshToken = state.refreshToken;
-  }, [state]);
-
   const value: AuthContextValue = useMemo(
     () => ({
-      ...state,
+      ...authStorageData,
       isAuthenticating: isAuthenticating || isLoadingAndEnabled,
       isAuthenticated: isUserSuccess,
       login,
       logout,
       user,
     }),
-    [state, isAuthenticating, isUserSuccess, isLoadingAndEnabled, login, logout, user],
+    [authStorageData, isAuthenticating, isUserSuccess, isLoadingAndEnabled, login, logout, user],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

src/context/auth/authActionCreators/authActionCreators.types.ts

@@ -1,82 +1,93 @@
-import { Storage } from './AuthStorage.types';
+import { Storage, TokenData } from './AuthStorage.types';
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 const REFRESH_TOKEN_KEY = 'refreshToken';
 const EXPIRES_KEY = 'expires';
 
+const defaultTokenData = {
+  accessToken: null,
+  refreshToken: null,
+  expires: null,
+} satisfies TokenData;
 class AuthStorage {
-  private _accessToken: string | null = null;
-  private _refreshToken: string | null = null;
-  private _expires: number | null = null;
-  private _storage: Storage | null = null;
+  private _storage: Storage | null;
+  private _tokenData: TokenData = defaultTokenData;
+  private listeners: VoidFunction[] = [];
 
   constructor(_storage: Storage) {
     try {
       this._storage = _storage;
-      this.accessToken = _storage.getItem(ACCESS_TOKEN_KEY);
-      this.refreshToken = _storage.getItem(REFRESH_TOKEN_KEY);
-      this.expires = Number(_storage.getItem(EXPIRES_KEY));
+      this._tokenData = {
+        accessToken: _storage.getItem(ACCESS_TOKEN_KEY),
+        refreshToken: _storage.getItem(REFRESH_TOKEN_KEY),
+        expires: Number(_storage.getItem(EXPIRES_KEY)),
+      };
     } catch (error) {
       this._storage = null;
-      this.accessToken = null;
-      this.refreshToken = null;
-      this.expires = null;
+      this._tokenData = defaultTokenData;
     }
   }
 
-  get accessToken(): string | null {
-    return this._accessToken;
+  subscribe = (listener: VoidFunction) => {
+    this.listeners = [...this.listeners, listener];
+
+    return () => {
+      this.listeners = this.listeners.filter((subscriber) => subscriber !== listener);
+    };
+  };
+
+  notify() {
+    this.listeners.forEach((listener) => listener());
   }
 
-  set accessToken(value: string | null) {
-    this._accessToken = value;
+  getTokenData = () => {
+    return this._tokenData;
+  };
 
+  private setStorageValue = (storageKey: string, value: number | string | null) => {
     try {
-      if (typeof value === 'string') {
-        this._storage?.setItem(ACCESS_TOKEN_KEY, value);
+      if (value !== null) {
+        this._storage?.setItem(storageKey, String(value));
       } else {
-        this._storage?.removeItem(ACCESS_TOKEN_KEY);
+        this._storage?.removeItem(storageKey);
       }
     } catch (error) {
       this._storage?.onError(error);
     }
-  }
+  };
 
-  get refreshToken(): string | null {
-    return this._refreshToken;
+  set tokenData(value: TokenData) {
+    this._tokenData = value;
+    this.setStorageValue(REFRESH_TOKEN_KEY, value.refreshToken);
+    this.setStorageValue(ACCESS_TOKEN_KEY, value.accessToken);
+    this.setStorageValue(EXPIRES_KEY, value.expires);
+    this.notify();
   }
 
-  set refreshToken(value: string | null) {
-    this._refreshToken = value;
-
-    try {
-      if (typeof value === 'string') {
-        this._storage?.setItem(REFRESH_TOKEN_KEY, value);
-      } else {
-        this._storage?.removeItem(REFRESH_TOKEN_KEY);
-      }
-    } catch (error) {
-      this._storage?.onError(error);
-    }
+  set accessToken(value: string | null) {
+    this.tokenData = {
+      ...this._tokenData,
+      accessToken: value,
+    };
   }
 
-  get expires(): number | null {
-    return this._expires;
+  set refreshToken(value: string | null) {
+    this.tokenData = {
+      ...this._tokenData,
+      refreshToken: value,
+    };
   }
 
   set expires(value: number | null) {
-    this._expires = value;
-
-    try {
-      if (typeof value === 'number') {
-        this._storage?.setItem(EXPIRES_KEY, value.toString());
-      } else {
-        this._storage?.removeItem(EXPIRES_KEY);
-      }
-    } catch (error) {
-      this._storage?.onError(error);
-    }
+    this.tokenData = {
+      ...this._tokenData,
+      expires: value,
+    };
   }
+
+  resetTokens = () => {
+    this.tokenData = defaultTokenData;
+  };
 }
 
 const storage: Storage = {

src/context/auth/authContextController/AuthContextController.tsx

@@ -4,3 +4,9 @@ export interface Storage<TItem = string | null> {
   removeItem: (key: string) => void;
   onError: (error: unknown) => void;
 }
+
+export type TokenData = {
+  accessToken: string | null;
+  refreshToken: string | null;
+  expires: number | null;
+};