logout flow

Author: Renato Rodrigues

src/modules/Auth/actions.ts

@@ -7,6 +7,7 @@ import {
 	SIGNUP_RESULT,
 	FORGOT_PASSWORD,
 	FORGOT_PASSWORD_RESULT,
+	LOGOUT,
 } from './types';
 
 export const processing = createAction(PROCESSING);
@@ -19,3 +20,5 @@ export const signUpResult = createAction(SIGNUP_RESULT);
 
 export const doForgotPassword = createAction(FORGOT_PASSWORD);
 export const forgotPasswordResult = createAction(FORGOT_PASSWORD_RESULT);
+
+export const doLogout = createAction(LOGOUT);

src/modules/Auth/saga.ts

@@ -1,8 +1,9 @@
 import { put, takeLatest } from 'redux-saga/effects';
-import { LOGIN, SIGNUP, FORGOT_PASSWORD } from './types';
+import { LOGIN, SIGNUP, FORGOT_PASSWORD, LOGOUT } from './types';
 import { loginResult, signUpResult, forgotPasswordResult } from './actions';
 // import request from '@utils/requests';
 import { AuthSaga } from './interfaces';
+import { secureSetTokens, secureRemoveTokens } from '@utils/secureToken';
 
 export function* authenticate({ payload: authData }: AuthSaga) {
 	try {
@@ -11,6 +12,7 @@ export function* authenticate({ payload: authData }: AuthSaga) {
 		// 	method: 'POST',
 		// 	data: authData,
 		// });
+		yield secureSetTokens({ expirationDate: 3600, token: '123' });
 		yield put(
 			loginResult({
 				isLoggedIn: true,
@@ -104,8 +106,23 @@ export function* forgotPassword({ payload: forgotPasswordData }: AuthSaga) {
 	}
 }
 
+export function* logout() {
+	try {
+		yield secureRemoveTokens();
+		yield put(
+			loginResult({
+				data: {},
+				isLoggedIn: false,
+			}),
+		);
+	} catch (err) {
+		throw Error('Unexpected error when try to logout');
+	}
+}
+
 export default function* authSagas() {
 	yield takeLatest(LOGIN, authenticate);
 	yield takeLatest(SIGNUP, signUp);
 	yield takeLatest(FORGOT_PASSWORD, forgotPassword);
+	yield takeLatest(LOGOUT, logout);
 }

src/modules/Auth/screens/Login/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	SafeAreaView,
 	StyleSheet,
@@ -13,6 +13,8 @@ import { AuthRedux, AuthState } from '@modules/Auth/interfaces';
 import { useSelector, useDispatch } from 'react-redux';
 import { doLogin } from '@modules/Auth/actions';
 import { useNavigation } from 'react-navigation-hooks';
+import { secureGetTokens } from '@utils/secureToken';
+import _isEmpty from 'lodash/isEmpty';
 
 const LoginScreen = () => {
 	const dispatch = useDispatch();
@@ -26,7 +28,6 @@ const LoginScreen = () => {
 
 	const handleLogin = () => {
 		dispatch(doLogin({ email: '', password: '' }));
-		navigation.navigate('Main');
 	};
 
 	const handleSignUp = () => {
@@ -37,6 +38,15 @@ const LoginScreen = () => {
 		navigation.navigate('ForgotPassword');
 	};
 
+	useEffect(() => {
+		(async function checkLogged() {
+			const isLogged = await secureGetTokens();
+			if (!_isEmpty(isLogged)) {
+				navigation.navigate('Main');
+			}
+		})();
+	}, [navigation, authState.isLoggedIn]);
+
 	return (
 		<>
 			<StatusBar barStyle="dark-content" />

src/modules/Auth/types.ts

@@ -8,3 +8,5 @@ export const SIGNUP_RESULT = 'app/Auth/SIGNUP_RESULT';
 
 export const FORGOT_PASSWORD = 'app/Auth/FORGOT_PASSWORD';
 export const FORGOT_PASSWORD_RESULT = 'app/Auth/FORGOT_PASSWORD_RESULT';
+
+export const LOGOUT = 'app/Auth/LOGOUT';

src/modules/Main/screens/MainScreen/index.tsx

@@ -1,14 +1,48 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, Button } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { doLogout } from '@modules/Auth/actions';
+import { useNavigation } from 'react-navigation-hooks';
+import { AuthRedux, AuthState } from '@modules/Auth/interfaces';
 
 export interface AppProps {}
 
-const App = () => {
+const App: React.FC = () => {
+	const dispatch = useDispatch();
+	const navigation = useNavigation();
+
+	const authState: AuthRedux = useSelector(({ auth }: AuthState) => ({
+		isLoggedIn: auth.isLoggedIn,
+	}));
+
+	const handleLogout = () => {
+		dispatch(doLogout());
+	};
+
+	useEffect(() => {
+		if (!authState.isLoggedIn) {
+			navigation.navigate('Login');
+		}
+	}, [authState.isLoggedIn, navigation]);
+
 	return (
-		<View>
-			<Text>App</Text>
+		<View style={styles.body}>
+			<Text style={styles.title}>{`Main Screen!\nYou're Logged!`}</Text>
+			<Button onPress={handleLogout} title="Logout" />
 		</View>
 	);
 };
 
+const styles = StyleSheet.create({
+	body: {
+		flex: 1,
+		justifyContent: 'space-evenly',
+		alignItems: 'center',
+	},
+	title: {
+		fontSize: 24,
+		textAlign: 'center',
+	},
+});
+
 export default App;

src/store/reducers.ts

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import auth from '@modules/Auth/reducer';
+import { LOGOUT } from '@modules/Auth/types';
 
 const reducers = combineReducers({
 	auth,
@@ -8,7 +9,9 @@ const reducers = combineReducers({
 export default reducers;
 
 export const rootReducer = (state: any, action: any) => {
-	// TODO: Logout to clear redux states
+	if (action.type === LOGOUT) {
+		state = {};
+	}
 	return reducers(state, action);
 };