Fix : Improving cookie handling tech #78

- need to improve handling cookie at refreshing main page
AgainIoT · Oct 4, 2023 · 5862834 · 5862834
1 parent 6bb7072
commit 5862834
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "env-cmd": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-cookie": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
@@ -39,7 +38,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "HTTPS=true react-scripts start",
     "start:dev": "env-cmd -f .env.development.local react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/src/components/main/Welcome.js b/src/components/main/Welcome.js
@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import { Button } from "@mui/material";
 import propTypes from "prop-types";
 import { useRecoilValue } from "recoil";
-import { token } from "../../recoil/authorize";
+import { isLogin } from "../../recoil/authorize";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { COLOR } from "../../styles/color.js";
@@ -14,7 +14,7 @@ const handleLogin = () => {
   window.location.href = githubURL;
 };
 export const Welcome = (ref) => {
-  const accessToken = useRecoilValue(token);
+  const Logined = useRecoilValue(isLogin);
   const navigate = new useNavigate();
   return (
     <StWelcome>
@@ -31,7 +31,7 @@ export const Welcome = (ref) => {
         >
           learn more
         </LearnmoreBtn>
-        {accessToken ? (
+        {Logined === true ? (
           <LoginBtn variant="contained" onClick={() => navigate("/step1")}>
             get started
           </LoginBtn>
@@ -57,7 +57,11 @@ const StWelcome = styled.div`
   text-align: center;
   justify-content: center;
   height: 80vh;
-  background: linear-gradient(to bottom, ${COLOR.MAIN_HOVER}, ${COLOR.MAIN_BACKGROUND});
+  background: linear-gradient(
+    to bottom,
+    ${COLOR.MAIN_HOVER},
+    ${COLOR.MAIN_BACKGROUND}
+  );
 `;
 
 export const Title = styled.h1`

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import { CookiesProvider } from "react-cookie";
 import reportWebVitals from "./reportWebVitals";
 import { RecoilRoot, RecoilEnv } from "recoil";
 

diff --git a/src/layout/Header.js b/src/layout/Header.js
@@ -18,7 +18,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import LOGO from "../../src/assets/images/Logo.svg";
 import axios from "axios";
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { avatar, id, name, token } from "../recoil/authorize";
+import { avatar, id, name, isLogin } from "../recoil/authorize";
 import styled from "styled-components";
 const ElevationScroll = (props) => {
   const { children, window } = props;
@@ -48,7 +48,7 @@ export const Header = (props) => {
   const [src, setSrc] = useRecoilState(avatar);
   const [userId, setUserId] = useRecoilState(id);
   const [userName, setUserName] = useRecoilState(name);
-  const setToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
   React.useEffect(() => {
     setSrc(localStorage.avatar);
     setUserId(localStorage.id);
@@ -76,7 +76,7 @@ export const Header = (props) => {
       "",
       { withCredentials: true },
     );
-    setToken("");
+    setIsLogin(false);
     localStorage.setItem("id", "guest");
     localStorage.setItem("name", "guest");
     localStorage.setItem("avatar", "");

diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -4,8 +4,7 @@ import { Title } from "../components/main/Welcome";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import { useSetRecoilState } from "recoil";
-import { avatar, id, name, token } from "../recoil/authorize";
-import { Cookies } from "react-cookie";
+import { avatar, id, isLogin, name } from "../recoil/authorize";
 import propTypes from "prop-types";
 
 let cnt = 0;
@@ -16,8 +15,7 @@ function LoginPage() {
   const setAvatar = useSetRecoilState(avatar);
   const navigate = useNavigate();
 
-  const cookies = new Cookies();
-  const setToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
 
   const login = async () => {
     if (!cnt++) {
@@ -58,15 +56,13 @@ function LoginPage() {
     );
     if (200 > res.status || res.status >= 300) {
       alert("login failed");
+      setIsLogin(false);
     } else {
-      const accessToken = cookies.get("Authentication");
-      setToken(accessToken);
+      setIsLogin(true);
     }
   };
 
   useEffect(() => {
-    const accessToken = cookies.get("Authentication");
-    setToken(accessToken);
     login();
     navigate("/");
   }, []);

diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
@@ -3,20 +3,33 @@ import Footer from "../components/main/Footer";
 import Steps from "../components/main/Steps";
 import propTypes from "prop-types";
 import { Header } from "../layout/Header";
-import { Cookies } from "react-cookie";
 import { useEffect } from "react";
 import { useSetRecoilState } from "recoil";
-import { token } from "../recoil/authorize";
+import { isLogin } from "../recoil/authorize";
+import axios from "axios";
+
+async function checkTokenValid() {
+  const isTokenValid = await axios.get(
+    `${process.env.REACT_APP_SERVER_URL}/auth/checkToken`,
+    {
+      validateStatus: (status) => {
+        return status < 500;
+      },
+      withCredentials: true,
+    },
+  );
+  if (isTokenValid.status >= 400) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 function MainPage() {
-  const cookies = new Cookies();
-  const setAccessToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
+
   useEffect(() => {
-    const accessToken = cookies.get("Authentication");
-    if (accessToken) {
-      setAccessToken(accessToken);
-    } else {
-      setAccessToken(null);
-    }
+    setIsLogin(checkTokenValid());
   }, []);
   return (
     <>

diff --git a/src/recoil/authorize.js b/src/recoil/authorize.js
@@ -1,8 +1,8 @@
 import { atom } from "recoil";
 
-export const token = atom({
-  key: "token",
-  default: null,
+export const isLogin = atom({
+  key: "isLogin",
+  default: false,
 });
 
 export const avatar = atom({

diff --git a/yarn.lock b/yarn.lock
@@ -2286,11 +2286,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/cookie@^0.5.1":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.5.2.tgz#9bf9d62c838c85a07c92fdf2334c2c14fd9c59a9"
-  integrity sha512-DBpRoJGKJZn7RY92dPrgoMew8xCWc2P71beqsjyhEI/Ds9mOyVmBwtekyfhpwFIVt1WrxTonFifiOZ62V8CnNA==
-
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -2358,14 +2353,6 @@
   dependencies:
     "@types/unist" "^2"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -3880,7 +3867,7 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.5.0, cookie@^0.5.0:
+cookie@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
@@ -5689,7 +5676,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8892,15 +8879,6 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-cookie@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-6.1.0.tgz#1561b822d27e21ded17d1a24f9fd5257804a3ffb"
-  integrity sha512-j/q0kf4f8kK7zXyTdGEebtZ3IKhVCPZVL3pf6y9/KlfFThxRjb+xvgdKAvRB2VrdkXyu9Qbrb/VuiFUNK6/3+g==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
-    hoist-non-react-statics "^3.3.2"
-    universal-cookie "^6.0.0"
-
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -10635,14 +10613,6 @@ unist-util-visit@^4.0.0, unist-util-visit@^4.1.0, unist-util-visit@^4.1.2, unist
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^5.1.1"
 
-universal-cookie@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-6.1.0.tgz#9b631092f77a2b91d1ec153be5e16465ce95b177"
-  integrity sha512-QBpQWkFJyH9D6nP1ZjPuLDdrgYr3y9ti8OTWf6uWcZwtY06de5f10GPYv3v68LIYWU0a9J2ZF5xFR5gOdD5ZaQ==
-  dependencies:
-    "@types/cookie" "^0.5.1"
-    cookie "^0.5.0"
-
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"