diff --git a/package.json b/package.json index f4bbdb49..0f64bd66 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", 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..fc274d3c 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, + }, + ); + 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 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..d3bbe75e 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== @@ -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"