Merge pull request #36 from arch-spatula/feat/logout

Feat/logout

Author: arch-spatula

src/Components/Navbar/index.tsx

@@ -3,8 +3,8 @@ import { Nav, Container, List, ListItem } from './Navbar.style';
 import { useLogin } from '../../hooks';
 
 export function Navbar() {
-  const { token } = useLogin();
-  return <Nav>{token ? <LoggedInNav /> : <LoggedOutNav />}</Nav>;
+  const { isLoggedIn } = useLogin();
+  return <Nav>{isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}</Nav>;
 }
 
 function LoggedInNav() {

src/api/AxiosClient.ts

@@ -9,4 +9,28 @@ const axiosClient: AxiosInstance = axios.create({
   },
 });
 
-export default axiosClient;
+const authClient: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+axiosClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('accessToken');
+
+    const configCopy = { ...config };
+    if (token)
+      configCopy.headers.Authorization = `Bearer ${token.slice(
+        1,
+        token.length - 1
+      )}`;
+    else throw new Error('token이 없습니다.');
+
+    return configCopy;
+  },
+  (error) => Promise.reject(error)
+);
+
+export { axiosClient, authClient };

src/api/authClient.ts

@@ -1,11 +1,11 @@
 import { AxiosError, AxiosResponse } from 'axios';
-import axiosClient from './AxiosClient';
-import { API_URLS, BASE_URL } from '../constant/config';
+import { authClient } from './AxiosClient';
+import { API_URLS } from '../constant/config';
 
 async function signInAPI(email: string, password: string) {
   try {
-    const res: AxiosResponse<{ email: string }> = await axiosClient.post(
-      BASE_URL + API_URLS.SIGN_IN,
+    const res: AxiosResponse<{ email: string }> = await authClient.post(
+      API_URLS.SIGN_IN,
       {
         email,
         password,
@@ -21,7 +21,7 @@ async function signInAPI(email: string, password: string) {
 
 async function signUpAPI(email: string, password: string) {
   try {
-    const res = await axiosClient.post(BASE_URL + API_URLS.SIGN_UP, {
+    const res = await authClient.post(API_URLS.SIGN_UP, {
       email,
       password,
     });

src/api/cardClient.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { API_URLS, BASE_URL } from '../constant/config';
-import axiosClient from './AxiosClient';
+import { axiosClient } from './AxiosClient';
 
 async function getCardsAPI() {
   try {

src/constant/config.ts

@@ -4,7 +4,8 @@ export const API_URLS = {
   CARDS: '/card',
   SIGN_IN: '/auth/signin',
   SIGN_UP: '/auth/signup',
-};
+  SIGN_OUT: '/auth/signout',
+} as const;
 
 export const ROUTE_PATHS = {
   WELCOME: '/',
@@ -13,4 +14,4 @@ export const ROUTE_PATHS = {
   CARDS: '/cards',
   DECK: '/deck',
   SETTING: '/setting',
-};
+} as const;

src/hooks/useLogin/index.ts

@@ -1,10 +1,33 @@
 import { useAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+import { useCallback } from 'react';
 
-const tokenAtom = atomWithStorage('token', '');
+const session = createJSONStorage(() => sessionStorage);
+const accessTokenAtom = atomWithStorage('accessToken', '');
+const sessionTokenAtom = atomWithStorage('sessionToken', '', session);
 
 export function useLogin() {
-  const [token, setToken] = useAtom(tokenAtom);
+  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+  const [sessionToken, setSessionToken] = useAtom(sessionTokenAtom);
 
-  return { token, setToken };
+  const isLoggedIn = Boolean(accessToken && sessionToken);
+
+  const setTokens = useCallback(
+    (accessToken: string, sessionToken: string) => {
+      setAccessToken(accessToken);
+      setSessionToken(sessionToken);
+    },
+    [setAccessToken, setSessionToken]
+  );
+
+  const emptyTokens = useCallback(() => {
+    setAccessToken('');
+    setSessionToken('');
+  }, [setAccessToken, setSessionToken]);
+
+  return {
+    isLoggedIn,
+    setTokens,
+    emptyTokens,
+  };
 }

src/hooks/useLogin/useLogin.test.ts

@@ -4,20 +4,39 @@ import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 describe('useLogin', () => {
-  it('returns initial isLoggedIn value as false', () => {
+  it('should returns initial isLoggedIn value as false', () => {
     const { result } = renderHook(() => useLogin());
 
-    expect(result.current.token).toBe('');
+    expect(result.current.isLoggedIn).toBe(false);
   });
 
-  it('updates isLoggedIn value when login is called', () => {
-    const token = 'token1234';
+  it('should updates isLoggedIn value when login is called', () => {
+    const accessToken = 'token1234';
+    const refreshToken = 'token5678';
     const { result } = renderHook(() => useLogin());
 
     act(() => {
-      result.current.setToken(token);
+      result.current.setTokens(accessToken, refreshToken);
     });
 
-    expect(result.current.token).toBe(token);
+    expect(result.current.isLoggedIn).toBe(true);
+  });
+
+  it('should empty both tokens', () => {
+    const accessToken = 'token1234';
+    const refreshToken = 'token5678';
+    const { result } = renderHook(() => useLogin());
+
+    act(() => {
+      result.current.setTokens(accessToken, refreshToken);
+    });
+
+    expect(result.current.isLoggedIn).toBe(true);
+
+    act(() => {
+      result.current.emptyTokens();
+    });
+
+    expect(result.current.isLoggedIn).toBe(false);
   });
 });

src/pages/Landing/index.tsx

@@ -4,13 +4,13 @@ import { ROUTE_PATHS } from '../../constant/config';
 import { useEffect } from 'react';
 
 function Landing() {
-  const { token } = useLogin();
+  const { isLoggedIn } = useLogin();
   const navigate = useNavigate();
   useEffect(() => {
-    if (token) {
+    if (isLoggedIn) {
       navigate(ROUTE_PATHS.CARDS);
     }
-  }, [token]);
+  }, [isLoggedIn]);
 
   return (
     <div>

src/pages/Setting/index.tsx

@@ -1,5 +1,23 @@
+import { Button } from '../../Components';
+import { useLogin } from '../../hooks';
+import { useNavigate } from 'react-router-dom';
+import { ROUTE_PATHS } from '../../constant/config';
+
 function Setting() {
-  return <div>Setting</div>;
+  const { emptyTokens } = useLogin();
+  const navigate = useNavigate();
+
+  const handelSignOut = () => {
+    emptyTokens();
+    navigate(ROUTE_PATHS.SIGN_IN);
+  };
+
+  return (
+    <div>
+      <h1>Setting</h1>
+      <Button onClick={handelSignOut}>Sign out</Button>
+    </div>
+  );
 }
 
 export default Setting;

src/pages/SignIn/index.tsx

@@ -28,7 +28,7 @@ function SignIn() {
   const navigate = useNavigate();
   const [emailError, setEmailError] = useState('');
   const [passwordError, setPasswordError] = useState('');
-  const { setToken } = useLogin();
+  const { setTokens } = useLogin();
 
   const signIn = async () => {
     try {
@@ -42,8 +42,8 @@ function SignIn() {
         throw new Error('이메일이 없습니다.');
 
       if (res?.success) {
-        const { access_token } = res;
-        if (access_token) setToken(`${access_token}`);
+        const { access_token, refresh_token } = res;
+        if (access_token) setTokens(access_token, refresh_token);
         navigate(ROUTE_PATHS.CARDS);
       }
     } catch (error) {