persist jwt token

frontend/package-lock.json

@@ -7402,6 +7402,11 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-persist": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-5.10.0.tgz",
+      "integrity": "sha512-sSJAzNq7zka3qVHKce1hbvqf0Vf5DuTVm7dr4GtsqQVOexnrvbV47RWFiPxQ8fscnyiuWyD2O92DOxPl0tGCRg=="
+    },
     "redux-saga": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-0.16.2.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^4.3.1",
     "react-spring": "^7.2.7",
     "redux": "^4.0.1",
+    "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.2"
   }
 }

frontend/src/Auth/AuthScreen.tsx

@@ -24,7 +24,6 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
     public render() {
         const { location } = this.props.history;
         const { from } = this.props.location.state || { from: "/" };
-        console.log(from);
         const { loggedIn } = this.props;
         return loggedIn ? (
             <Redirect to={from} />

frontend/src/index.tsx

@@ -1,20 +1,23 @@
-import "./App.scss";
 import "@blueprintjs/core/lib/css/blueprint.css";
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "normalize.css/normalize.css";
+import "~App.scss";
 
 import * as React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
+import { PersistGate } from "redux-persist/integration/react";
 import { App } from "~App";
-import { store } from "~redux/store";
+import { persistor, store } from "~redux/store";
 
 render(
     <Provider store={store}>
-        <BrowserRouter>
-            <App />
-        </BrowserRouter>
+        <PersistGate loading={null} persistor={persistor}>
+            <BrowserRouter>
+                <App />
+            </BrowserRouter>
+        </PersistGate>
     </Provider>,
     document.getElementById("body"),
 );

frontend/src/redux/auth/reducer.ts

@@ -16,7 +16,7 @@ const defaultAuthState: IAuthState = {
     formSpinner: false,
 };
 
-export const auth: Reducer<IAuthState, AuthAction> = (
+export const authReducer: Reducer<IAuthState, AuthAction> = (
     state: IAuthState = defaultAuthState,
     action: AuthAction,
 ) => {

frontend/src/redux/reducers.ts

@@ -1,8 +1,17 @@
 import { combineReducers } from "redux";
-import { auth, IAuthState } from "~redux/auth/reducer";
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import { authReducer, IAuthState } from "~redux/auth/reducer";
 
 export interface IAppState {
     auth: IAuthState;
 }
 
-export const rootReducer = combineReducers({ auth });
+const authPersistConfig = {
+    key: "jwt",
+    storage,
+};
+
+export const rootReducer = combineReducers({
+    auth: persistReducer(authPersistConfig, authReducer),
+});

frontend/src/redux/store.ts

@@ -1,11 +1,20 @@
 import { applyMiddleware, createStore } from "redux";
+import { persistStore } from "redux-persist";
 import createSagaMiddlware from "redux-saga";
 import { rootReducer } from "~redux/reducers";
 
+import { setToken } from "./api/utils";
 import { authSaga } from "./auth/sagas";
 
 const sagaMiddleware = createSagaMiddlware();
 
 export const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
 
+export const persistor = persistStore(store, null, () => {
+    const state = store.getState();
+    if (state.auth.jwt) {
+        setToken(state.auth.jwt);
+    }
+});
+
 sagaMiddleware.run(authSaga);