Bug/3464 fix login bug

app/actions/user/index.js

@@ -76,3 +76,9 @@ export function logOut() {
 		type: 'LOGOUT',
 	};
 }
+
+export function checkedAuth() {
+	return {
+		type: 'CHECKED_AUTH',
+	};
+}

app/components/Nav/App/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { NavigationContainer, CommonActions } from '@react-navigation/native';
-import { Animated } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import Login from '../../Views/Login';
@@ -30,10 +30,14 @@ import { trackErrorAsAnalytics } from '../../../util/analyticsV2';
 import { routingInstrumentation } from '../../../util/setupSentry';
 import Analytics from '../../../core/Analytics';
 import AsyncStorage from '@react-native-community/async-storage';
-import { connect } from 'react-redux';
-
+import { connect, useSelector, useDispatch } from 'react-redux';
 import { EXISTING_USER, CURRENT_APP_VERSION, LAST_APP_VERSION } from '../../../constants/storage';
 import { getVersion } from 'react-native-device-info';
+import { checkedAuth } from '../../../actions/user';
+
+const styles = StyleSheet.create({
+	fill: { flex: 1 },
+});
 
 const Stack = createStackNavigator();
 const Drawer = createDrawerNavigator();
@@ -147,6 +151,10 @@ const App = ({ userLoggedIn }) => {
 	const [route, setRoute] = useState();
 	const [animationPlayed, setAnimationPlayed] = useState();
 
+	const isAuthChecked = useSelector((state) => state.user.isAuthChecked);
+	const dispatch = useDispatch();
+	const triggerCheckedAuth = () => dispatch(checkedAuth());
+
 	const handleDeeplink = useCallback(({ error, params, uri }) => {
 		if (error) {
 			trackErrorAsAnalytics(error, 'Branch:');
@@ -196,6 +204,9 @@ const App = ({ userLoggedIn }) => {
 			const existingUser = await AsyncStorage.getItem(EXISTING_USER);
 			const route = !existingUser ? 'OnboardingRootNav' : 'Login';
 			setRoute(route);
+			if (!existingUser) {
+				triggerCheckedAuth();
+			}
 		}
 
 		checkExsiting();
@@ -225,14 +236,23 @@ const App = ({ userLoggedIn }) => {
 			} catch (error) {
 				Logger.error(error);
 			}
-
-			animation?.current?.play();
-			animationName?.current?.play();
 		}
 
 		startApp();
 	}, []);
 
+	useEffect(() => {
+		if (!isAuthChecked) {
+			return;
+		}
+		const startAnimation = async () => {
+			await new Promise((res) => setTimeout(res, 50));
+			animation?.current?.play();
+			animationName?.current?.play();
+		};
+		startAnimation();
+	}, [isAuthChecked]);
+
 	const onAnimationFinished = useCallback(() => {
 		Animated.timing(opacity, {
 			toValue: 0,
@@ -244,41 +264,44 @@ const App = ({ userLoggedIn }) => {
 		});
 	}, [opacity]);
 
-	if (!animationPlayed) {
-		return (
-			<MetaMaskAnimation
-				animation={animation}
-				animationName={animationName}
-				opacity={opacity}
-				onAnimationFinish={onAnimationFinished}
-			/>
-		);
-	}
+	const renderSplash = () => {
+		if (!animationPlayed) {
+			return (
+				<MetaMaskAnimation
+					animation={animation}
+					animationName={animationName}
+					opacity={opacity}
+					onAnimationFinish={onAnimationFinished}
+				/>
+			);
+		}
+		return null;
+	};
 
 	return (
 		// do not render unless a route is defined
 		(route && (
-			<NavigationContainer
-				ref={navigator}
-				onReady={() => {
-					routingInstrumentation.registerNavigationContainer(navigator);
-				}}
-			>
-				<Stack.Navigator route={route} initialRouteName={route}>
-					{userLoggedIn ? (
-						<Stack.Screen name="HomeNav" component={HomeNav} options={{ headerShown: false }} />
-					) : (
-						<>
-							<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
-							<Stack.Screen
-								name="OnboardingRootNav"
-								component={OnboardingRootNav}
-								options={{ headerShown: false }}
-							/>
-						</>
-					)}
-				</Stack.Navigator>
-			</NavigationContainer>
+			<View style={styles.fill}>
+				<NavigationContainer
+					ref={navigator}
+					onReady={() => {
+						routingInstrumentation.registerNavigationContainer(navigator);
+					}}
+				>
+					<Stack.Navigator route={route} initialRouteName={route}>
+						<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
+						<Stack.Screen
+							name="OnboardingRootNav"
+							component={OnboardingRootNav}
+							options={{ headerShown: false }}
+						/>
+						{userLoggedIn && (
+							<Stack.Screen name="HomeNav" component={HomeNav} options={{ headerShown: false }} />
+						)}
+					</Stack.Navigator>
+				</NavigationContainer>
+				{renderSplash()}
+			</View>
 		)) ||
 		null
 	);

app/components/UI/DrawerView/index.js

@@ -565,6 +565,7 @@ class DrawerView extends PureComponent {
 	};
 
 	logOut = () => {
+		this.props.navigation.navigate('Login');
 		this.props.logOut();
 	};
 

app/components/UI/MetaMaskAnimation/index.tsx

@@ -9,7 +9,7 @@ const LOGO_PADDING = 25;
 
 const styles = StyleSheet.create({
 	main: {
-		flex: 1,
+		...StyleSheet.absoluteFillObject,
 		backgroundColor: colors.white,
 	},
 	metamaskName: {

app/components/Views/LockScreen/index.js

@@ -96,6 +96,7 @@ class LockScreen extends PureComponent {
 	}
 
 	logOut = () => {
+		this.props.navigation.navigate('Login');
 		this.props.logOut();
 	};
 

app/components/Views/Login/index.js

@@ -25,7 +25,7 @@ import { strings } from '../../../../locales/i18n';
 import SecureKeychain from '../../../core/SecureKeychain';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
 import setOnboardingWizardStep from '../../../actions/wizard';
-import { logIn, logOut } from '../../../actions/user';
+import { logIn, logOut, checkedAuth } from '../../../actions/user';
 import { connect } from 'react-redux';
 import Device from '../../../util/device';
 import { OutlinedTextField } from 'react-native-material-textfield';
@@ -214,6 +214,10 @@ class Login extends PureComponent {
 		selectedAddress: PropTypes.string,
 		logIn: PropTypes.func,
 		logOut: PropTypes.func,
+		/**
+		 * TEMPORARY state for animation control on Nav/App/index.js
+		 */
+		checkedAuth: PropTypes.func,
 	};
 
 	state = {
@@ -273,9 +277,11 @@ class Login extends PureComponent {
 					console.warn(e);
 				}
 			} else {
-				this.checkIfRememberMeEnabled();
+				await this.checkIfRememberMeEnabled();
 			}
 		}
+
+		this.props.checkedAuth();
 	}
 
 	componentWillUnmount() {
@@ -653,6 +659,7 @@ const mapDispatchToProps = (dispatch) => ({
 	setOnboardingWizardStep: (step) => dispatch(setOnboardingWizardStep(step)),
 	logIn: () => dispatch(logIn()),
 	logOut: () => dispatch(logOut()),
+	checkedAuth: () => dispatch(checkedAuth()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Login);

app/components/Views/Onboarding/index.js

@@ -247,6 +247,7 @@ class Onboarding extends PureComponent {
 	}
 
 	logOut = () => {
+		this.props.navigation.navigate('Login');
 		this.props.logOut();
 	};
 

app/reducers/user/index.js

@@ -7,10 +7,16 @@ const initialState = {
 	protectWalletModalVisible: false,
 	gasEducationCarouselSeen: false,
 	userLoggedIn: false,
+	isAuthChecked: false,
 };
 
 const userReducer = (state = initialState, action) => {
 	switch (action.type) {
+		case 'CHECKED_AUTH':
+			return {
+				...state,
+				isAuthChecked: true,
+			};
 		case 'LOGIN':
 			return {
 				...state,

app/store/index.js

@@ -85,12 +85,22 @@ const persistTransform = createTransform(
 	{ whitelist: ['engine'] }
 );
 
+const persistUserTransform = createTransform(
+	(inboundState) => {
+		const { isAuthChecked, ...state } = inboundState;
+		// Reconstruct data to persist
+		return state;
+	},
+	null,
+	{ whitelist: ['user'] }
+);
+
 const persistConfig = {
 	key: 'root',
 	version,
 	blacklist: ['onboarding'],
 	storage: MigratedStorage,
-	transforms: [persistTransform],
+	transforms: [persistTransform, persistUserTransform],
 	stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
 	migrate: createMigrate(migrations, { debug: false }),
 	timeout: TIMEOUT,