React-Native 에서 자동로그인 설정하기(Async Storage 기본 셋팅)

대부분의 어플에 있는 자동로그인을 설정하는 법을 알아보자!

자동 로그인 기능을 하기 위해서는 AsyncStoage 를 모두 세팅 해 둔 상태여야 한다.
내 프로젝트의 AsyncStorage 세팅 같은 경우는

import AsyncStorage from '@react-native-async-storage/async-storage';

// get
export const getStorage = async (key) => {
  const result = await AsyncStorage.getItem(key);
  return result && JSON.parse(result);
};

// set
export const setStorage = async (key, value) => {
  return await AsyncStorage.setItem(key, JSON.stringify(value));
};

// remove
export const removeStorage = async (key) => {
  return await AsyncStorage.removeItem(key);
};

이렇게 되어있다.

그럼 이제 본격적으로 자동로그인을 설정해보자!

로그인 화면에 자동로그인 버튼을 하나 설정해두자

그리고 로그인 로직 성공후 자동로그인 여부를 체크하여 스토리지에 저장해주면 끝!

export const sendLogin = async () => {
  if (addData?.email && addData?.password) {
    await restApi
      .post('/account/signin', {
        email: addData?.email,
        password: addData?.password,
      })
      .then(async (res) => {
        // console.log(res.data)
        // res 값 asyncstorage로 저장
        if (res.data.message === 'OK') {
          const token = res.data.payload.access_token;
          const refreshtoken = res.data.payload.refresh_token;
          setStorage('token', token);
          setStorage('refreshToken', refreshtoken);
          setStorage('autoLogin', true);
        } else {
         
        }
      })
      .catch((err) => {});
  } else {
    setModal(true), setText( `모두 입력해 주세요!`);
  }
};

이렇게 저장된 autoLogin 스토리지는 자동로그아웃(토큰만료 혹은 중복로그인 등), 수동 로그아웃을 제외하고는 어플을 켰을 때 항상 체크되어 자동으로 로그인이 되어야 한다.그럼 이 로직은 어디에 넣지?

내가 했던 프로젝트의 경우에는 첫 화면인 로그아웃에 해당 페이지에 들어갈 때마다 스토리지에서 autoLogin이 트루인지 체크하는 로직을 useEffect를 사용해서 체크해주었다.

useEffect(() => {
    getStorage('refreshToken').then((v) => {
      if (v) {
        getStorage('autoLogin').then((z) => {
          if (z) {
            navigation.navigate('Main');
          }
        });
      }
    });
  }, []);

refresh토큰 만료 이후에 혹시 모를 오류를 방지하기 위해서 refresh토큰 확인하는 로직도 넣어뒀다. 또한 위에서 말했던 자동로그아웃(refresh토큰 만료 혹은 중복로그인 등), 수동 로그아웃 시에는 해당 부분이 사라져야 하기 때문에 위의 두 경우에 autoLogin 항목을 제거시켜주었다.

 			<Text
              onPress={() => {
                removeStorage('token');
                removeStorage('refreshToken');
                removeStorage('autoLogin');
                navigation.dispatch(
                  CommonActions.reset({
                    routes: [{ name: 'Login' }],
                  }),
                );
                navigation.navigate('Login');
              }}
            >
              로그아웃
            </Text>

중복로그인 등으로 자동으로 로그아웃이 되었다면 navigation에서 체크하여 삭제하고 메인으로 돌려보내줘야한다. 이 부분에 대한 설명은 이전 블로그 글에 적어 두었으니 그쪽에서 확인해주면된다!