Feature/#98 SNS 로그인

package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.0.0",
     "axios": "^0.27.2",
     "jotai": "^1.11.0",
+    "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.36.1",
@@ -69,5 +70,6 @@
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
     "stylelint-config-standard-scss": "^4.0.0"
-  }
+  },
+  "proxy": "https://nid.naver.com"
 }

src/App.tsx

@@ -20,6 +20,9 @@ import Withdrawal from 'pages/Setting/Withdrawal';
 import Inquiry from 'pages/Inquiry';
 import Myinquiry from 'pages/Inquiry/Myinquiry';
 import Notice from 'pages/Notice';
+import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin';
+import NaverLogin from 'pages/Auth/OAuth/NaverLogin';
+import GoogleLogin from 'pages/Auth/OAuth/GoogleLogin';
 
 export default function App(): JSX.Element {
   return (
@@ -50,6 +53,9 @@ export default function App(): JSX.Element {
           <Route path="/find-password" element={<FindIdPassword type="password" />} />
           <Route path="/find/verify/:type" element={<VerifyField />} />
           <Route path="/find-password/change" element={<ChangePassword />} />
+          <Route path="/login/oauth2/code/kakao" element={<KakaoLogin />} />
+          <Route path="/login/oauth2/code/naver" element={<NaverLogin />} />
+          <Route path="/login/oauth2/code/google" element={<GoogleLogin />} />
         </Route>
       </Routes>
       <Toast />

src/config/constants.ts

@@ -25,4 +25,4 @@ export const KAKAO_REDIRECT_URL = `https://kauth.kakao.com/oauth/authorize?clien
 
 // 네이버 OAuth
 export const NAVER_CLIENT_ID = checkEnvVar('REACT_APP_NAVER_CLIENT_ID');
-export const NAVER_REDIRECT_URL = `https://nid.naver.com/oauth2.0/authorize?client_id=${NAVER_CLIENT_ID}&redirect_uri=${SERVER_LOGIN_REDIRECT_URL}/naver&response_type=code`;
+export const NAVER_REDIRECT_URL = `https://nid.naver.com/oauth2.0/authorize?client_id=${NAVER_CLIENT_ID}&redirect_uri=${SERVER_LOGIN_REDIRECT_URL}/naver&response_type=code&state=1`;

src/pages/Auth/OAuth/GoogleLogin.tsx

@@ -0,0 +1,44 @@
+import axios from 'axios';
+import { API_PATH } from 'config/constants';
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useUpdateAuth } from 'store/auth';
+
+export default function GoogleLogin() {
+  const location = useLocation();
+  const updateAuth = useUpdateAuth();
+  const navigate = useNavigate();
+  const snsLogin = async () => {
+    try {
+      const code = location.search.slice(6, location.search.length).split('&')[0];
+      const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+      const clientSecret = process.env.REACT_APP_GOOGLE_CLIENT_SECRET;
+      const redirectUri = process.env.REACT_APP_SERVER_LOGIN_REDIRECT_URL;
+      const requestBody = `code=${code}&client_id=${clientId}&client_secret=${clientSecret}&redirect_uri=${redirectUri}/google&grant_type=authorization_code`;
+
+      const googleResponse = await axios.post('https://oauth2.googleapis.com/token', requestBody);
+      const googleIdToken = googleResponse.data.id_token;
+      const googleLogin = await axios.post(`${API_PATH}/login/GOOGLE`, {}, {
+        headers: {
+          Authorization: googleIdToken,
+        },
+      });
+      sessionStorage.setItem('accessToken', googleLogin.data.accessToken);
+      localStorage.setItem('refreshToken', googleLogin.data.refreshToken);
+      updateAuth();
+    } catch (e) {
+      // console.log(e);
+    }
+  };
+  useEffect(() => {
+    if (location !== undefined) {
+      snsLogin();
+    } else {
+      // url 오류로 인한 콜백
+      navigate('/login');
+    }
+  });
+  return (
+    <div />
+  );
+}

src/pages/Auth/OAuth/KakaoLogin.tsx

@@ -0,0 +1,57 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { API_PATH } from 'config/constants';
+import axios, { AxiosResponse } from 'axios';
+import qs from 'qs';
+import { useUpdateAuth } from 'store/auth';
+
+interface KakaoResponse {
+  access_token: string,
+  expires_in: number,
+  refresh_token: string,
+  refresh_token_expires_in: number,
+  scope: string,
+  token_type: string,
+}
+
+export default function KakaoLogin() {
+  const location = useLocation();
+  const updateAuth = useUpdateAuth();
+  const navigate = useNavigate();
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+  };
+  const data = {
+    grant_type: 'authorization_code',
+    client_id: process.env.REACT_APP_KAKAO_CLIENT_ID,
+    redirect_uri: `${process.env.REACT_APP_SERVER_LOGIN_REDIRECT_URL}/kakao`,
+    code: location.search.slice(6, location.search.length),
+  };
+  const snsLogin = async () => {
+    try {
+      const response: AxiosResponse<KakaoResponse> = await axios.post('https://kauth.kakao.com/oauth/token', qs.stringify(data), { headers });
+      const kakaoAccessToken = response.data.access_token;
+
+      const kakaoLogin = await axios.post(`${API_PATH}/login/KAKAO`, {}, {
+        headers: {
+          Authorization: kakaoAccessToken,
+        },
+      });
+      sessionStorage.setItem('accessToken', kakaoLogin.data.accessToken);
+      localStorage.setItem('refreshToken', kakaoLogin.data.refreshToken);
+      await updateAuth();
+    } catch {
+      //
+    }
+  };
+  useEffect(() => {
+    if (location !== undefined) {
+      snsLogin();
+    } else {
+      navigate('/login');
+    }
+  });
+  return (
+    <div />
+  );
+}

src/pages/Auth/OAuth/NaverLogin.tsx

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import { API_PATH } from 'config/constants';
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useUpdateAuth } from 'store/auth';
+
+export default function NaverLogin() {
+  const location = useLocation();
+  const updateAuth = useUpdateAuth();
+  const navigate = useNavigate();
+  const clientId = process.env.REACT_APP_NAVER_CLIENT_ID;
+  const clientSecret = process.env.REACT_APP_NAVER_CLIENT_SECRET;
+  const snsLogin = async () => {
+    try {
+      const naverResponse = await axios.post(`/oauth2.0/token?grant_type=authorization_code&client_secret=${clientSecret}&client_id=${clientId}&code=${location.search.split('&')[0].slice(6)}&state=1`);
+      const headers = {
+        authorization: naverResponse.data.access_token,
+      };
+      const result = await axios.post(`${API_PATH}/login/NAVER`, {}, {
+        headers,
+      });
+      sessionStorage.setItem('accessToken', result.data.accessToken);
+      localStorage.setItem('refreshToken', result.data.refreshToken);
+      await updateAuth();
+    } catch (e) {
+      //
+    }
+  };
+  useEffect(() => {
+    if (location !== undefined) {
+      snsLogin();
+    } else {
+      // url 오류로 인한 콜백
+      navigate('/login');
+    }
+  });
+  return (
+    <div />
+  );
+}

yarn.lock

@@ -7589,6 +7589,13 @@ qs@6.10.3:
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.11.2:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
+  integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
+  dependencies:
+    side-channel "^1.0.4"
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"