From d8da4fda7a109579981edee5e58896bc68cfdf8f Mon Sep 17 00:00:00 2001 From: bent_shrimp <39232867+bentshrimp@users.noreply.github.com> Date: Thu, 5 Oct 2023 17:36:39 +0900 Subject: [PATCH] update staging branch (#81) * Fix : Improving cookie handling tech #78 - need to improve handling cookie at refreshing main page * Fix : vulnerability alert resolved #77 - https://github.com/AgainIoT/Open-Set-Go_client/security/dependabot/3 Signed-off-by: bentshrimp * Fix : MainPage isLogin state works well #78 Signed-off-by: bentshrimp * Fix : changed unnecessary if-else into single return statement #78 Signed-off-by: bentshrimp --------- Signed-off-by: bentshrimp Co-authored-by: ymw0407 --- package.json | 6 ++-- src/components/main/Welcome.js | 12 +++++--- src/index.js | 1 - src/layout/Header.js | 6 ++-- src/pages/Login.js | 12 +++----- src/pages/MainPage.js | 33 +++++++++++++------- src/recoil/authorize.js | 6 ++-- yarn.lock | 55 ++++------------------------------ 8 files changed, 50 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index f4bbdb49..34478e3f 100644 --- 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", @@ -75,6 +74,7 @@ "prettier": "3.0.1" }, "resolutions": { - "nth-check": "^2.1.1" + "nth-check": "^2.1.1", + "postcss": "^8.4.31" } } diff --git a/src/components/main/Welcome.js b/src/components/main/Welcome.js index 753934a2..44d305ef 100644 --- 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 ( @@ -31,7 +31,7 @@ export const Welcome = (ref) => { > learn more - {accessToken ? ( + {Logined === true ? ( navigate("/step1")}> get started @@ -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 index 12fc79bb..e57a85cb 100644 --- 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 index dcfa01f0..a4272da7 100644 --- 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 index 589ff656..c7205513 100644 --- 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 index 231fa651..f994f518 100644 --- 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, + }, + ); + return isTokenValid.status < 400; +} + function MainPage() { - const cookies = new Cookies(); - const setAccessToken = useSetRecoilState(token); + const setIsLogin = useSetRecoilState(isLogin); + + const checkIsLogin = async () => { + setIsLogin(await checkTokenValid()); + }; + useEffect(() => { - const accessToken = cookies.get("Authentication"); - if (accessToken) { - setAccessToken(accessToken); - } else { - setAccessToken(null); - } + checkIsLogin(); }, []); return ( <> diff --git a/src/recoil/authorize.js b/src/recoil/authorize.js index 84c9e1c1..4fd99972 100644 --- 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 index cee6ae8d..25c70171 100644 --- 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== @@ -8134,11 +8121,6 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow== -picocolors@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" - integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== - picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" @@ -8713,18 +8695,10 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^7.0.35: - version "7.0.39" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" - integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== - dependencies: - picocolors "^0.2.1" - source-map "^0.6.1" - -postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4: - version "8.4.29" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd" - integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw== +postcss@^7.0.35, postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.4: + version "8.4.31" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== dependencies: nanoid "^3.3.6" picocolors "^1.0.0" @@ -8892,15 +8866,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 +10600,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"