fix: login

애플 자동로그인 및 로그아웃 기능 구현 #70
Amattang · Mar 31, 2022 · 47643da · 47643da
1 parent 0e3d630
commit 47643da
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 21 deletions.
diff --git a/App.tsx b/App.tsx
@@ -37,7 +37,11 @@ function App() {
         <NavigationContainer independent={true}>
           <BottomSheetModalProvider>
             <QueryClientProvider client={queryClient}>
-              {isLogin ? <RootNav /> : <OnBoardingStack setIsLogin={setIsLogin} />}
+              {isLogin ? (
+                <RootNav setIsLogin={setIsLogin} />
+              ) : (
+                <OnBoardingStack setIsLogin={setIsLogin} />
+              )}
             </QueryClientProvider>
           </BottomSheetModalProvider>
         </NavigationContainer>

diff --git a/components/CheckListComponent/CheckListImage.tsx b/components/CheckListComponent/CheckListImage.tsx
@@ -12,13 +12,12 @@ interface IProps {
   checkList: answerButtonType[];
   setModal?: Dispatch<SetStateAction<boolean>>;
   modal?: boolean;
-  order: number;
+  order: number | undefined;
 }
 const windowWidth = Dimensions.get('window').width;
 
 function CheckListImage({ checkList, setModal, modal, order }: IProps) {
   const checkListContext = useContext(checkListCtx);
-  const [index, setIndex] = useState(0);
   const isCarousel = useRef(null);
 
   const mainImageHandler = async (item: answerButtonType) => {
@@ -62,6 +61,7 @@ function CheckListImage({ checkList, setModal, modal, order }: IProps) {
           <Image source={require('../../assets/images/common/X.png')} />
         </Pressable>
         <Carousel
+          keyExtractor={(item) => item.toString()}
           firstItem={order}
           ref={isCarousel}
           data={checkList}

diff --git a/components/Login/AppleLoginBtn.tsx b/components/Login/AppleLoginBtn.tsx
@@ -7,6 +7,7 @@ import styles from '../../screens/Landing/styles';
 import jwtDecode from 'jwt-decode';
 import axios from 'axios';
 import { API_HOST } from '../../constant';
+import { setAccessToken, setAuthTokens } from 'react-native-axios-jwt';
 
 interface tokenType {
   aud: string;
@@ -25,6 +26,24 @@ interface tokenType {
 
 const AppleLoginBtn = ({ setIsLogin }: any) => {
   const onAppleLoginHandler = async () => {
+    const onLoginSuccess = (res: any) => {
+      const res_data = res.data.data;
+      let accessToken: string = '';
+      if (Object.keys(res_data).includes('token')) {
+        // 재접속
+        accessToken = res_data.token;
+        setAccessToken(accessToken);
+      } else {
+        // 처음 호출
+        accessToken = res_data.accessToken;
+        setAuthTokens({
+          accessToken: accessToken,
+          refreshToken: res_data.refreshToken,
+        });
+      }
+      axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+      setIsLogin(true);
+    };
     try {
       // performs login request
       const appleAuthRequestResponse = await appleAuth.performRequest({
@@ -48,10 +67,7 @@ const AppleLoginBtn = ({ setIsLogin }: any) => {
             email: decodedToken.email,
             user: user,
           })
-          .then((res) => {
-            axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.data.accessToken}`;
-            setIsLogin(true);
-          })
+          .then(onLoginSuccess)
           .catch((e) => {
             console.log(e);
           });

diff --git a/components/Login/KakaoLoginBtn.tsx b/components/Login/KakaoLoginBtn.tsx
@@ -58,9 +58,9 @@ const KakaoLoginBtn = ({ setIsLogin }: Props) => {
     }
     axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
     setIsLogin(true);
-    const refreshToken = getRefreshToken().then((refreshToken) => console.log(refreshToken));
+    // const refreshToken = getRefreshToken().then((refreshToken) => console.log(refreshToken));
     // accessToken 만료하기 1분 전에 로그인 연장
-    setTimeout(() => requestRefresh(refreshToken), acessTokenExpiresIn - 60000);
+    // setTimeout(() => requestRefresh(refreshToken), acessTokenExpiresIn - 60000);
   };
 
   const catchError = (err: any) => {

diff --git a/components/ProfileSetting/ProfileSettingComponent.tsx b/components/ProfileSetting/ProfileSettingComponent.tsx
@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { View, Image, Pressable, Linking, ScrollView } from 'react-native';
 import { DefaultText } from '../../CustomText';
 import styles from './styles';
+import { clearAuthTokens } from 'react-native-axios-jwt';
+interface IProps {
+  setIsLogin: Dispatch<SetStateAction<boolean>>;
+}
 
-function ProfileSettingComponent() {
+function ProfileSettingComponent({ setIsLogin }: IProps) {
+  const onLogoutHandler = () => {
+    clearAuthTokens();
+    setIsLogin(false);
+  };
   return (
     <>
       <ScrollView>
@@ -74,7 +82,10 @@ function ProfileSettingComponent() {
                     버전정보 1.0
                   </DefaultText>
                 </Pressable>
-                <Pressable style={styles.profileSettingEachElementWrapper}>
+                <Pressable
+                  style={styles.profileSettingEachElementWrapper}
+                  onPress={onLogoutHandler}
+                >
                   <DefaultText style={styles.profileSettingEachElementText}>로그아웃</DefaultText>
                 </Pressable>
                 <Pressable style={styles.profileSettingEachElementWrapper}>

diff --git a/navigation/Main/RootNav.tsx b/navigation/Main/RootNav.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import BottomNavigation from './BottomNavigation/BottomNavigation';
@@ -7,10 +7,14 @@ import { RootStackProps } from '../../types/navigationTypes';
 
 const RootNav = createNativeStackNavigator<RootStackProps>();
 
-const Root = () => (
+interface IProps {
+  setIsLogin: Dispatch<SetStateAction<boolean>>;
+}
+
+const Root = ({ setIsLogin }: IProps) => (
   <RootNav.Navigator screenOptions={{ headerShown: false }}>
     <RootNav.Screen name="tab" component={BottomNavigation} />
-    <RootNav.Screen name="stack" component={CheckListStackNav} />
+    <RootNav.Screen name="stack" children={() => <CheckListStackNav setIsLogin={setIsLogin} />} />
   </RootNav.Navigator>
 );
 export default Root;
diff --git a/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx b/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { Dispatch, SetStateAction, useContext, useState } from 'react';
 import { Image, Pressable, Share } from 'react-native';
 
 import BasicCheckList from './BasicCheckList/BasiclCheckList';
@@ -13,10 +13,16 @@ import {
 } from '@react-navigation/native-stack';
 import { checkListCtx } from '../../../Context/CheckListByServer';
 import axios from 'axios';
+import { useNavigation } from '@react-navigation/native';
 
 const NativeStack = createNativeStackNavigator<CheckListStackParamsList>();
 
-function CheckListStackNav({ navigation }: CheckListStackProps) {
+interface IProps {
+  setIsLogin: Dispatch<SetStateAction<boolean>>;
+}
+
+function CheckListStackNav({ setIsLogin }: IProps) {
+  const navigation = useNavigation();
   const checkListContext = useContext(checkListCtx);
 
   const [isEdit, setIsEdit] = useState(true);
@@ -79,7 +85,7 @@ function CheckListStackNav({ navigation }: CheckListStackProps) {
       <NativeStack.Navigator screenOptions={screenOptions}>
         <NativeStack.Screen
           name={'profileSetting'}
-          component={ProfileSetting}
+          children={() => <ProfileSetting setIsLogin={setIsLogin} />}
           options={() => ({
             title: '설정',
             headerStyle: { backgroundColor: 'white' },

diff --git a/screens/ProfileSetting/ProfileSetting.tsx b/screens/ProfileSetting/ProfileSetting.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import ProfileSettingComponent from '../../components/ProfileSetting/ProfileSettingComponent';
 
-function ProfileSetting() {
-  return <ProfileSettingComponent />;
+interface IProps {
+  setIsLogin: Dispatch<SetStateAction<boolean>>;
+}
+
+function ProfileSetting({ setIsLogin }: IProps) {
+  return <ProfileSettingComponent setIsLogin={setIsLogin} />;
 }
 
 export default ProfileSetting;