#819 Added jwt token to requests

frontend/app/common/constants.ts

@@ -33,6 +33,12 @@ export const LS_SORT_KEY = '__remarkSort';
 /** localstorage key for email of logged in user */
 export const LS_EMAIL_KEY = '__remarkEmail';
 
+/** localstorage key for JWT token */
+export const LS_JWT = '__JWT';
+
+/** Header name for jwt token */
+export const HEADER_X_JWT = 'X-JWT';
+
 export const THEMES: Theme[] = ['light', 'dark'];
 
 export const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|Opera Mini|Windows Phone/i.test(navigator.userAgent);

frontend/app/common/fetcher.ts

@@ -1,4 +1,4 @@
-import { BASE_URL, API_BASE } from './constants';
+import { BASE_URL, API_BASE, LS_JWT, HEADER_X_JWT } from './constants';
 import { siteId } from './settings';
 import { StaticStore } from './static_store';
 import { getCookie } from './cookies';
@@ -50,6 +50,10 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
       headers.append('Content-Type', contentType);
     }
 
+    if (localStorage.getItem(LS_JWT)) {
+      headers.append(HEADER_X_JWT, localStorage.getItem(LS_JWT) as string);
+    }
+
     let rurl = `${basename}${url}`;
 
     const parameters: RequestInit = {
@@ -80,6 +84,15 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
         const timeDiff = (new Date().getTime() - timestamp) / 1000;
         StaticStore.serverClientTimeDiff = timeDiff;
 
+        // backend could update jwt in any time. so, we should handle it
+        if (res.headers.has(HEADER_X_JWT)) {
+          localStorage.setItem(LS_JWT, res.headers.get(HEADER_X_JWT) as string);
+        }
+
+        if (res.status === 403 && localStorage.getItem(LS_JWT)) {
+          localStorage.removeItem(LS_JWT);
+        }
+
         if (res.status >= 400) {
           if (httpErrorMap.has(res.status)) {
             const descriptor = httpErrorMap.get(res.status) || httpMessages.unexpectedError;

frontend/app/store/user/actions.ts

@@ -2,7 +2,7 @@ import * as api from '@app/common/api';
 import { User, BlockedUser, AuthProvider, BlockTTL } from '@app/common/types';
 import { ttlToTime } from '@app/utils/ttl-to-time';
 import getHiddenUsers from '@app/utils/get-hidden-users';
-import { LS_HIDDEN_USERS_KEY } from '@app/common/constants';
+import { LS_HIDDEN_USERS_KEY, LS_JWT } from '@app/common/constants';
 import { setItem } from '@app/common/local-storage';
 
 import { StoreAction } from '../index';
@@ -46,6 +46,8 @@ export const logIn = (provider: AuthProvider): StoreAction<Promise<User | null>>
 
 export const logout = (): StoreAction<Promise<void>> => async dispatch => {
   await api.logOut();
+  localStorage.removeItem(LS_JWT);
+
   dispatch(unsetCommentMode());
   dispatch(setUser());
 };