feat : #46. OAuth 붙이기

.firebase/hosting.YnVpbGQ.cache

@@ -7,13 +7,13 @@ manifest.json,1640497153725,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff650
 robots.txt,1653796994101,7b657a8f8ed7578f3b0bea9ecd3bdfeac0ffee2694263a38baa5f0efc82a953b
 wide_image.png,1653796994102,5032004087477e00183adfbb9b71bde11b369f283812cae4fcfa0106d4c9f7ac
 oauth/vimeo.html,1656772329949,a7bf62daad61e161ffd50facc8bc8437403a5aa892a48f43de7e4ffa04d25b8b
-asset-manifest.json,1656943745706,a12941c6b87faf1265674051bb1b3962bc4bd239a7f79a0860ecee5ff493e6a0
-sitemap.xml,1656943715483,0847b9835d44152ddd885c1eaa736984549028faa2e3d1c19e42ff3efce6102f
-index.html,1656943745706,1c1a445f2f2f25e311d4faa0e41a8a11169bfb31828b042d9e0c002f6427710b
-static/js/main.3846ef83.js.LICENSE.txt,1656943745728,6d5e84650d66ca11d2ef0075c090a0af088ac721a18ab66615a90ce35fffce47
-static/css/main.160e0704.css,1656943745728,522063d46e8bdce6c454b7052695a11cd79264cbeaae76df9ab8859908b2202d
-static/css/main.160e0704.css.map,1656943745728,4a79795975dbcc79e7f2e7851c1892d85eac257a569cc9d9b7817f9fc43b41d0
-static/media/landing_first.923c1c4210f41cb51dee.png,1656943745728,5032004087477e00183adfbb9b71bde11b369f283812cae4fcfa0106d4c9f7ac
-static/media/no_search_result.a9ec0a22d4321a8c50c3.png,1656943745728,f2b4a86372a3a16349a36064687e526ade3b749bd1b0477d02efeb9a36b6866b
-static/js/main.3846ef83.js,1656943745729,389a6ba951ff5fba8613497ed20dc2ac38d12b48980753a09c139ff86fe41785
-static/js/main.3846ef83.js.map,1656943745730,17a83c09318b22772da7bd7354bf463350aeef605300f857bcdb7555194010a0
+asset-manifest.json,1659620657890,f5e097c928bc38b71f7cf1bbc268b31efc3ee5fa17271b65e00592a7c7a245b7
+index.html,1659620657868,e81fb878f45e5ffebd55457f312016464a997614d1cce9ad6211a9830e2b65bf
+sitemap.xml,1659620630120,0847b9835d44152ddd885c1eaa736984549028faa2e3d1c19e42ff3efce6102f
+static/js/main.b95136df.js.LICENSE.txt,1659620657891,6d5e84650d66ca11d2ef0075c090a0af088ac721a18ab66615a90ce35fffce47
+static/css/main.160e0704.css,1659620657891,522063d46e8bdce6c454b7052695a11cd79264cbeaae76df9ab8859908b2202d
+static/css/main.160e0704.css.map,1659620657891,43765f9a91b7c67bb11eaaa913c93954369e2f247f553ac7d8af843b0c12e8ce
+static/media/landing_first.923c1c4210f41cb51dee.png,1659620657891,5032004087477e00183adfbb9b71bde11b369f283812cae4fcfa0106d4c9f7ac
+static/media/no_search_result.a9ec0a22d4321a8c50c3.png,1659620657891,f2b4a86372a3a16349a36064687e526ade3b749bd1b0477d02efeb9a36b6866b
+static/js/main.b95136df.js,1659620657892,18849df91129fa741a09a1c66621e11aea683a9c6a00fa836893b168ee1c2d67
+static/js/main.b95136df.js.map,1659620657893,89843383ff9d27f1e4b032a2b77a332e1a1f9ed16adfb82a10ca5872341faabf

src/components/authFormModal/index.tsx

@@ -6,13 +6,13 @@ import FormWrapper from './view/FormWrapper'
 import * as Strings from '../../lib/strings'
 import { login as loginApi } from '../../lib/api/auth'
 import { handleAuthApiError } from '../../lib/utils/handleAuthErr'
-import { SignUp as SignUpApi } from '../../lib/utils/auth'
+import { setTokens, SignUp as SignUpApi } from '../../lib/utils/auth'
 import { useDispatch } from 'react-redux'
 import { getUserInfo } from '../../modules/userInfo/actions'
 import { getPlaylistAsync } from '../../modules/playlist/actions'
 import CustomModalWrapper from '../elements/CustomModalWrapper'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { NavAbsolutePathItems } from '../../lib/constants'
+import { localStorageKey, NavAbsolutePathItems } from '../../lib/constants'
 import { OAuth2Type } from '../../types'
 import OAuthView from './view/OAuthView'
 import axios from 'axios'
@@ -67,17 +67,25 @@ const AuthFormModal = ({ isOpen, onClose }: IProps) => {
     try {
       switch (type) {
         case 'kakao':
-          // await loginWithKakao()
-          const resKakao = window.open('https://forkie-api.com/v1/oauth2/authorization/kakao', '_blank', 'popup=true')
-          console.log(resKakao?.document?.body.innerHTML)
+          window.open('https://forkie-api.com/v1/oauth2/authorization/kakao', '_blank', 'popup=true')
           break
         case 'google':
-          // await loginWithGoogle()
-          const resGoogle = window.open('https://forkie-api.com/v1/oauth2/authorization/google', '_blank', 'popup=true')
-          console.log(resGoogle?.document?.body.innerHTML)
+          window.open('https://forkie-api.com/v1/oauth2/authorization/google', '_blank', 'popup=true')
           break
       }
-      // onSuccessAuth()
+
+      const localstorageEventCallback = async (e: any) => {
+        if (e.key === localStorageKey.TOKENS) {
+          window.removeEventListener('storage', localstorageEventCallback)
+          const tokens = localStorage.getItem(localStorageKey.TOKENS)
+          if (tokens !== null) {
+            await setTokens(JSON.parse(tokens))
+            onSuccessAuth()
+          } else {
+          }
+        }
+      }
+      window.addEventListener('storage', localstorageEventCallback)
     } catch (err) {
       if (axios.isAxiosError(err)) {
         console.log(err.response?.data)
@@ -95,7 +103,7 @@ const AuthFormModal = ({ isOpen, onClose }: IProps) => {
           onClick={onChangeFormMode}
           className="py-2"
         />
-        {false && <OAuthView onOAuth={onOAuth} />}
+        <OAuthView onOAuth={onOAuth} />
       </FormWrapper>
     </CustomModalWrapper>
   )

src/lib/constants.ts

@@ -54,6 +54,7 @@ export const infiniteEndTime = 1000000000000
 export const searchPlatforms: SearchPlatformType[] = ['YOUTUBE', 'TWITCH', 'DAILYMOTION', 'VIMEO']
 
 export const localStorageKey = {
+  TOKENS: '@tokens',
   VIMEO_STATE: 'vimeoState',
   VIMEO_CODE: 'vimeoCode',
   VIMEO_TOKEN: 'vimeoToken',

src/routes/index.tsx

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import * as Constants from '../lib/constants'
 import Home from './Home'
 import List from './List'
+import Forkie from './oauth/Forkie'
 import Vimeo from './oauth/Vimeo'
 import Play from './Play'
 import ProfilePage from './Profile'
@@ -11,7 +12,7 @@ import VideoTimeChange from './VideoTimeChange'
 
 export default function MyRoutes() {
   return (
-    <main className={'w-full h-full pt-4'}>
+    <main className={'h-full w-full pt-4'}>
       <Routes>
         <Route path={Constants.NavAbsolutePathItems.HOME}>
           <Route path={''} element={<Home />} />
@@ -29,6 +30,7 @@ export default function MyRoutes() {
           </Route>
         </Route>
         <Route path={Constants.NavAbsolutePathItems.OAUTH}>
+          <Route path={''} element={<Forkie />} />
           <Route path={Constants.NavAbsolutePathItems.OAUTH_VIMEO} element={<Vimeo />} />
         </Route>
         <Route path="*" element={<Navigate to={Constants.NavAbsolutePathItems.HOME} />} />

src/routes/oauth/Forkie.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import getQueryStringObject from '../../lib/utils/parseURLSearch'
+
+function Forkie() {
+  window.document.body.innerHTML = ''
+  React.useEffect(() => {
+    console.log('asdasd')
+    const urlSearch = getQueryStringObject<{ accessToken: string; refreshToken: string }>()
+    if (urlSearch !== null) {
+      if (urlSearch.accessToken && urlSearch.refreshToken) {
+        localStorage.setItem(
+          '@tokens',
+          JSON.stringify({ accessToken: urlSearch.accessToken, refreshToken: urlSearch.refreshToken }),
+        )
+      } else {
+        localStorage.setItem('@tokens', '')
+      }
+    }
+    window.close()
+  }, [])
+  return <>213123</>
+}
+
+export default Forkie