From e0b84b6d9a8456689cd7752bf651fea5b411f49f Mon Sep 17 00:00:00 2001 From: JZU0 Date: Wed, 20 Dec 2023 16:23:24 +0900 Subject: [PATCH] =?UTF-8?q?[#4]=20fix=20:=20login=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 +++++++ package.json | 1 + src/Router.js | 6 +++-- src/components/LoginModal/index.jsx | 29 +++++++++++++++------- src/pages/Login/index.jsx | 37 +++++++++++++++++++++++++++++ src/pages/Login/styled.js | 0 src/store/atoms.js | 12 ++++++++++ 7 files changed, 83 insertions(+), 11 deletions(-) create mode 100644 src/pages/Login/index.jsx create mode 100644 src/pages/Login/styled.js diff --git a/package-lock.json b/package-lock.json index f498eb7..8a81467 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-router-dom": "^6.21.0", "react-scripts": "5.0.1", "recoil": "^0.7.7", + "recoil-persist": "^5.1.0", "styled-components": "^6.1.1", "web-vitals": "^2.1.4" }, @@ -15291,6 +15292,14 @@ } } }, + "node_modules/recoil-persist": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/recoil-persist/-/recoil-persist-5.1.0.tgz", + "integrity": "sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w==", + "peerDependencies": { + "recoil": "^0.7.2" + } + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", diff --git a/package.json b/package.json index 5b205b8..061589a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react-router-dom": "^6.21.0", "react-scripts": "5.0.1", "recoil": "^0.7.7", + "recoil-persist": "^5.1.0", "styled-components": "^6.1.1", "web-vitals": "^2.1.4" }, diff --git a/src/Router.js b/src/Router.js index 3a926ab..53bd593 100644 --- a/src/Router.js +++ b/src/Router.js @@ -11,8 +11,9 @@ import { TestResult5 } from "./pages/TestResult5"; import { TestResult6 } from "./pages/TestResult6"; import { TestResult7 } from "./pages/TestResult7"; import { TestResult8 } from "./pages/TestResult8"; -import KakaoShareButton from './pages/Kakao'; +import KakaoShareButton from "./pages/Kakao"; import { Frame } from "./pages/Frame"; +import Login from "./pages/Login"; const Router = () => { return ( @@ -21,6 +22,7 @@ const Router = () => { } /> } /> } /> + } /> } /> } /> } /> @@ -30,7 +32,7 @@ const Router = () => { } /> } /> } /> - } /> + } /> ); diff --git a/src/components/LoginModal/index.jsx b/src/components/LoginModal/index.jsx index aa6d0a5..d614ce3 100644 --- a/src/components/LoginModal/index.jsx +++ b/src/components/LoginModal/index.jsx @@ -1,5 +1,6 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useEffect } from "react"; +import axios from "axios"; +import { useNavigate, useLocation } from "react-router-dom"; import { Container, GoogleButton, @@ -11,26 +12,36 @@ import kakao from "../../assets/images/kakao.png"; const LoginModal = () => { const navigate = useNavigate(); + const location = useLocation(); const handleNonmemberButtonClick = () => { navigate("/test/0"); }; - const handleGoogleLogin = () => { - window.location.href = `https://www.noonsachin.com/oauth2/authorization/google`; + const handleLogin = provider => { + window.location.href = `https://www.noonsachin.com/oauth2/authorization/${provider}`; }; - const handleKakaoLogin = () => { - window.location.href = `https://www.noonsachin.com/oauth2/authorization/kakao`; - }; + useEffect(() => { + // Parse the URL to get the JWT + const jwt = new URL(window.location.href).searchParams.get("jwt"); + console.log(jwt); + if (jwt) { + // If JWT exists, set it in the headers + axios.defaults.headers.common["Authorization"] = `Bearer ${jwt}`; + + // Redirect to the home screen + navigate("/"); + } + }, [navigate, location.search]); return ( - + handleLogin("google")}> google  Google 계정으로 로그인 - + handleLogin("kakao")}> kakao  카카오톡으로 로그인 diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx new file mode 100644 index 0000000..329727b --- /dev/null +++ b/src/pages/Login/index.jsx @@ -0,0 +1,37 @@ +import React, { useEffect } from "react"; +import axios from "axios"; +import { useNavigate, useLocation } from "react-router-dom"; +import { useSetRecoilState } from "recoil"; +import { loginState } from "../../store/atoms"; + +const Login = () => { + const navigate = useNavigate(); + const location = useLocation(); + const setLoginState = useSetRecoilState(loginState); + + useEffect(() => { + // Parse the URL to get the JWT + const jwt = new URL(window.location.href).searchParams.get("jwt"); + + if (jwt) { + // If JWT exists, set it in the headers + axios.defaults.headers.common["Authorization"] = `Bearer ${jwt}`; + + // Set login state to true + setLoginState(true); + + // Redirect to the home screen + navigate("/"); + console.log("로그인!"); + } + }, [navigate, location.search, setLoginState]); + + return ( +
+ {/* You can add a loading spinner or other UI elements here */} + Logging in... +
+ ); +}; + +export default Login; diff --git a/src/pages/Login/styled.js b/src/pages/Login/styled.js new file mode 100644 index 0000000..e69de29 diff --git a/src/store/atoms.js b/src/store/atoms.js index 0071dbe..f9d3a64 100644 --- a/src/store/atoms.js +++ b/src/store/atoms.js @@ -1,4 +1,5 @@ import { atom } from "recoil"; +import { recoilPersist } from "recoil-persist"; export const testState = atom({ key: "testState", @@ -12,3 +13,14 @@ export const testState = atom({ O: 0, }, }); + +const { persistAtom } = recoilPersist({ + key: "recoil-persist", + storage: sessionStorage, +}); + +export const loginState = atom({ + key: "loginState", + default: false, + effects_UNSTABLE: [persistAtom], +});