[React Native] 로그인 Flow - 자동 로그인, Intro 페이지, 권한 페이지, Launcher, 앱 로딩

Nadan
Nadan Dev Blog

로그인 Flow - 자동 로그인, Intro 페이지, 권한 페이지, Launcher, 앱 로딩

1) 자동 로그인

AuthContext

const tryLocalSignin = dispatch => async () => {
    const token = await AsyncStorage.getItem('token');
    if (token) {
        dispatch({ type: 'signin', payload: token });
        navigate('TrackList');
    } else {
        navigate('loginFlow')
    }
};

...

export const { Provider, Context } = createDataContext(
    authReducer,
    { signin, signup, signout, clearErrorMessage, tryLoalSignin },
    { token: null, errorMessage: '' }
)

SignUpScreen

import React, { useContext, useEffect } from 'react';
... 

const SignUpScreen = ({ navigation }) => {

    const { state, signup, clearErrorMessage, tryLoalSignin } = useContext(AuthContext);
    
    useEffect(() => {
        tryLoalSignin();
    }, [])
  ...
  
}

2) Launcher Loading

-> 예제 변경

App.js

import LoadingScreen from './src/screens/LoadingScreen';

const switchNavigator = createSwitchNavigator({
  loading: LoadingScreen,
  loginFlow: createStackNavigator({
    SignUp: SignUpScreen,
    SignIn: SignInScreen
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    TrackCreate: TrackCreateScreen,
    Account: AccountScreen 
  })
});

LoadingScreen.js

import React, { useContext, useEffect } from 'react';
import { Context as AuthContext } from '../context/AuthContext';

const LoadingScreen = () => {

    const { tryLoalSignin } = useContext(AuthContext);

    useEffect(() => {
        tryLoalSignin();
    }, []);

    return null;
};

export default LoadingScreen;