Feat(server): 커스텀 토큰을 쿠키로 전송

- 파이어베이스로 만든 커스텀 토큰을 쿠키로 전송 - js-cookie 라이브러리 사용 ref: #67
hwna00 · Sep 26, 2023 · c3be1e1 · c3be1e1
1 parent 7d62a4c
commit c3be1e1
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "axios": "^1.5.0",
     "firebase": "^10.1.0",
     "framer-motion": "^10.15.0",
+    "js-cookie": "^3.0.5",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.2",

diff --git a/packages/apps/user/firebase.js b/packages/apps/user/firebase.js
@@ -8,6 +8,7 @@ import {
   browserLocalPersistence,
 } from 'firebase/auth';
 import { initializeApp } from 'firebase/app';
+import Cookie from 'js-cookie';
 
 import { createUser } from './src/api';
 
@@ -54,6 +55,7 @@ export const fbSignUp = async data => {
 export const fbEmailLogIn = async data => {
   await setPersistence(auth, browserLocalPersistence);
   const { email, password } = data;
+
   try {
     const { user } = await signInWithEmailAndPassword(auth, email, password);
     return user;
@@ -62,9 +64,23 @@ export const fbEmailLogIn = async data => {
   }
 };
 
+export const fbTokenLogIn = async data => {
+  await setPersistence(auth, browserLocalPersistence);
+  const token = Cookie.get('token');
+  console.log(token);
+  const { address, addressDetail } = data;
+
+  try {
+    const { user } = await signInWithCustomToken(auth, token);
+    return user;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const fbTokenLogin = async token => {
   try {
-    const { user } = await signInWithCustomToken(token);
+    const { user } = await signInWithCustomToken(auth, token);
     return user;
   } catch (error) {
     console.log(error);

diff --git a/packages/apps/user/src/api.js b/packages/apps/user/src/api.js
@@ -14,8 +14,6 @@ export const getMe = async email => {
   if (!me) {
     // TODO: 해당 유저가 존재하지 않는 경우에 대한 처리
   } else {
-    // return { ...me, profileImg: getUserImage(email) };
-    console.log(me);
     return me;
   }
 };
diff --git a/packages/apps/user/src/store.js b/packages/apps/user/src/store.js
@@ -45,10 +45,6 @@ export const store = configureStore({
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       serializableCheck: false,
-      // serializableCheck: {
-      //   ignoredActions: ['signUp/setImgBlob', 'me/setMe', 'me/resetMe'],
-      //   ignoredPaths: ['signUp.blob', 'me'],
-      // },
     }),
   devTools: process.env.NODE_ENV !== 'production',
 });

diff --git a/packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js b/packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-import { Form } from 'react-router-dom';
+import { Form, useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { DaumPostcodeEmbed } from 'react-daum-postcode';
 import {
@@ -17,11 +17,13 @@ import {
   VStack,
   useDisclosure,
 } from '@chakra-ui/react';
-
+import { fbTokenLogIn } from '../../../../firebase';
 
 const AuthCallback = function () {
   const [address, setAddress] = useState('');
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const navigate = useNavigate();
+
   const {
     register,
     handleSubmit,
@@ -37,8 +39,11 @@ const AuthCallback = function () {
   );
 
   const onSubmit = data => {
-    // TODO 데이터의 address와 addressDetail을 서버로 전송
-    console.log(data);
+    fbTokenLogIn(data).then(user => {
+      if (user) {
+        navigate('/mypage');
+      }
+    });
   };
 
   return (

diff --git a/packages/server/controllers/authController.js b/packages/server/controllers/authController.js
@@ -21,13 +21,7 @@ const fbCreateCustomToken = async uid => {
   return await fbAdmin.auth().createCustomToken(uid);
 };
 
-const fbTokenLogin = token => {
-  console.log(token);
-  fbAdmin.auth();
-};
-
 module.exports = {
   getNaverAuthApiUri,
   fbCreateCustomToken,
-  fbTokenLogin,
 };
diff --git a/packages/server/index.js b/packages/server/index.js
@@ -4,7 +4,6 @@ const axios = require('axios');
 const db = require('./config/db');
 const {
   fbCreateCustomToken,
-  fbTokenLogin,
   getNaverAuthApiUri,
 } = require('./controllers/authController');
 
@@ -45,10 +44,13 @@ app.get('/api/auth/naver-callback', async (req, res) => {
   } catch {
     //TODO: email 중복이 발생할 경우 DB에 정보를 저장하지 않음
   } finally {
-    fbCreateCustomToken(user.id).then(token => fbTokenLogin(token));
-
-    //TODO: 토큰을 프론트엔드로 전송
-    res.redirect('http://localhost:8080/auth/callback');
+    fbCreateCustomToken(user.id)
+      .then(token => {
+        res
+          .cookie('token', token)
+          .redirect(`http://localhost:8080/auth/callback`);
+      })
+      .catch(err => console.log(err));
   }
 });
 

diff --git a/yarn.lock b/yarn.lock
@@ -6859,7 +6859,7 @@ focus-lock@^0.11.6:
   dependencies:
     tslib "^2.0.3"
 
-follow-redirects@^1.0.0, follow-redirects@^1.15.0:
+follow-redirects@^1.0.0:
   version "1.15.2"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -8558,6 +8558,11 @@ jose@^4.10.4:
   resolved "https://registry.yarnpkg.com/jose/-/jose-4.14.6.tgz#94dca1d04a0ad8c6bff0998cdb51220d473cc3af"
   integrity sha512-EqJPEUlZD0/CSUMubKtMaYUOtWe91tZXTWMJZoKSbLk+KtdhNdcvppH8lA9XwVu2V4Ailvsj0GBZJ2ZwDjfesQ==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -9023,6 +9028,16 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^7.14.1:
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
+  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+
+lru-cache@^8.0.0:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-8.0.5.tgz#983fe337f3e176667f8e567cfcce7cb064ea214e"
+  integrity sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==
+
 lru-cache@~4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
@@ -9039,16 +9054,6 @@ lru-memoizer@^2.1.4:
     lodash.clonedeep "^4.5.0"
     lru-cache "~4.0.0"
 
-lru-cache@^7.14.1:
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
-  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
-
-lru-cache@^8.0.0:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-8.0.5.tgz#983fe337f3e176667f8e567cfcce7cb064ea214e"
-  integrity sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==
-
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"