🖥 인증절차

1. 클라이언트 -> 서버로 인증데이터를 전송
2. 서버 -> 세션에서 인증데이터 저장 및 클라이언트에게 세션 키 반환

모바일 앱의 경우

서버가 클라이언트의 인증을 관리하지 않음
토큰 사용!!!!!
1. 모바일 앱 -> 인증 데이터 보냄
2. 서버 -> 개인키를 만들어 토큰을 모바일 앱에게 리턴
3. redux storge에 토큰 저장 + 앱 실행되는 동안 리덕스가 관리

🖥 로그인

• 간편 비밀번호 -> 6자리

<TextInput
                        keyboardType="number-pad"
                        maxLength={6}
                        
                        style={authStyles.contentInput}
                        placeholder="PassWord"
                        numberOfLines={1}
                        secureTextEntry
                        onChangeText={inputPw => setPassword(inputPw)}
                    />

📍 사용 라이브러리

• accessToken , refreshToken ,user 를 저장하고, 접속할 때 사용하는 방식으로 구현
• redux에 저장하면 앱을 실행할 때마다 데이터가 초기화 되므로 부적절하다

AsyncStorage

사용하여 디바이스의 하드드라이브에 데이터를 저장하자.

npm i @react-native-community/async-storage

📍 구현 기능

1. 자동로그인 또는 로그인 거부!

1. SplashScreen에서 사용자의 디바이스 하드드라이브에 user가 들어있는지 확인한다.
2. 해당 값이 있으면 Main으로
3. 없으면 Auth로 화면을 전환한다.

• root/SplashScreen.js

import React, { useState, useEffect } from 'react';
import Splash from './containers/auth/Splash'
import { View} from 'react-native';

function SplashScreen({ navigation }) {
    return (
        <View >
            <Splash navigation={navigation} />
        </View>
    )
}

export default SplashScreen;

• root/src/containers/auth/Splash.js

import Splash from '../../components/auth/Splash';
import { connect } from 'react-redux';
import { autoLogin } from '../../store/actions/userAction';


function mapReduxStateToReactProps(state) {
    return state;
}

function mapReduxDispatchToReactProps(dispatch) {
    return {
        goMain: function (dataToSubmit) {
            dispatch(autoLogin(dataToSubmit));
        }
    }
}

export default connect(mapReduxStateToReactProps, mapReduxDispatchToReactProps)(Splash);

• root/src/components/Splash.js

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import { View, Text } from 'react-native';

import { connect } from 'react-redux';
import { autoLogin } from '../../store/actions/userAction';

function Splash(props) {

    useEffect(() => {
        setTimeout(() => {
            AsyncStorage.getItem('user')
                .then((value) => {
                    console.log(value)
                    if (value != null) {
                        props.goMain(value)

                        props.navigation.replace('Main');

                    } else {
                        props.navigation.replace('Auth');
                        console.log(value);

                    }
                }
                );

        }, 3000);
    }, []);

    return (
        <View >
            <Text>스플래쉬 화면</Text>
        </View>
    )
}


export default Splash;

AsyncStorage.getItem('user') 의 값이 있으면, 메인으로 넘어아고
값이 없다면 로그인 화면으로 넘어가기!

• root/App.js

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Splash">
          <Stack.Screen name="Splash" component={SplashScreen} />
          <Stack.Screen name="Auth" component={AuthStackScreen}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="Main" component={MainTabScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};
export default App;

2. 로그인 - 토큰

• 로그인시, id, password를 body에 넣어서 post

• 서버에서 accessToken , refreshToken을 발행

• 프론트 asyncStorage에 저장

• actions/authAction.js

export function login(dataToSubmit) {

    const data = request("POST", USERS_URL + "/login", dataToSubmit);
    // data: {
    //     accessToken,
    //     refreshToken,
    //   }
    return {
        type: types.LOGIN,
        payload: data,
        uniqueId: dataToSubmit.id
    }

};

• reducers/auth.js

case types.LOGIN:
            console.log(action.uniqueId)
            AsyncStorage.multiSet([
                ['accessToken', action.data.accessToken],
                ['refreshToken', action.data.refreshToken],
                ['uniqueId', action.uniqueId]
            ])

            return {
                ...state,
                uniqueId: action.uniqueId
            }