♻️ refactor : Modify to store tokens in cookies

- Modify token to be stored in cookies instead of local storage

Related Issue: YJU-OKURA#102

Author: dorimu0

src/api/apiUtils.ts

@@ -1,11 +1,12 @@
+import Cookies from 'js-cookie';
 import BASE_URLS from './baseUrl';
 import HTTP_STATUS from './httpStatus';
 
 async function fetchWithInterceptors(url: string, options: RequestInit) {
   let response = await fetch(url, options);
 
   if (response.status === HTTP_STATUS.UNAUTHORIZED) {
-    const refreshToken = localStorage.getItem('refresh_token');
+    const refreshToken = Cookies.get('refresh_token');
     const refreshResponse = await fetch(
       `${BASE_URLS.gin}/auth/google/refresh-token`,
       {
@@ -20,7 +21,7 @@ async function fetchWithInterceptors(url: string, options: RequestInit) {
     if (refreshResponse.ok) {
       const data = await refreshResponse.json();
       const newToken = data.data.access_token;
-      localStorage.setItem('access_token', newToken);
+      Cookies.set('access_token', newToken);
       options.headers = {
         ...options.headers,
         Authorization: `Bearer ${newToken}`,
@@ -47,7 +48,7 @@ const req = async (
   body: BodyInit | object | undefined = undefined
 ) => {
   const headers = new Headers();
-  const token = localStorage.getItem('access_token');
+  const token = Cookies.get('access_token');
   if (token) {
     headers.append('Authorization', `Bearer ${token}`);
   }

src/app/googleLogin/page.tsx

@@ -2,19 +2,16 @@
 import {useEffect} from 'react';
 import Image from 'next/image';
 import {useRouter, useSearchParams} from 'next/navigation';
+import Cookies from 'js-cookie';
 import {useSetRecoilState} from 'recoil';
 import userState from '@/src/recoil/atoms/userState';
-import accessTokenState from '@/src/recoil/atoms/accessTokenState';
-import refreshTokenState from '@/src/recoil/atoms/refreshTokenState';
 import postGoogleLogin from '@/src/api/auth/postGoogleLogin';
 import gifs from '@/public/gif';
 import '@/src/styles/variable.css';
 
 const Page = () => {
   const code: string | null = useSearchParams().get('code');
   const setUser = useSetRecoilState(userState);
-  const setAccessToken = useSetRecoilState(accessTokenState);
-  const setRefreshToken = useSetRecoilState(refreshTokenState);
   const router = useRouter();
   useEffect(() => {
     if (code) {
@@ -23,10 +20,8 @@ const Page = () => {
           setUser(res.user);
         }
         if (res) {
-          setAccessToken({access_token: res.access_token});
-          setRefreshToken({refresh_token: res.refresh_token});
-          window.localStorage.setItem('access_token', res.access_token);
-          window.localStorage.setItem('refresh_token', res.refresh_token);
+          Cookies.set('access_token', res.access_token);
+          Cookies.set('refresh_token', res.refresh_token);
         }
         router.push('/classes');
       });