Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Authentication, local storage, auto login and auto logout
- Auto logout is not very fancy, and should be refactored in the future facebook/react-native#12981 * 4_Shop_App/App.js - Imported a new component a Wrapper just to have access to our store * 4_Shop_App/navigation/ShopNavigator.js - Create this new component to check first (after the splash screen) if there is a logged user. if not redirect to Auth screen - We need to create this component to have access to our store - With the help of useRef hook, we can have access to the properties of the component * 4_Shop_App/navigation/ShopNavigator.js - Added a react component to the side drawer, so we can click to logout - Added our StartupScreen as the first screen of the stack * 4_Shop_App/store/actions/auth.js - Changed SIGNUP and LOGIN to AUTHENTICATE - Added a helper function authenticate() to dispatch the (userId, token, expiryTime) - Added a logout(), inside this function we call AsyncStorage.removeItem('') to remove the item from our local storage - Added a auto logout, it checks for the expiration date, and creates a setTimeout with the remaining time - Added a saveDataToStorage() to save the user info in the local storage * 4_Shop_App/store/reducers/auth.js - Removed the cases LOGIN and SIGNUP - Added LOGOUT -> basically sets to the initial state * 4_Shop_App/screens/StartupScreen.js - This is the first page of the app - It's very fast, and we wont see it (it's just an ActivityIndicator) - Basically it checks if there is a user in the local storage - if yes, checks the expiration date - if everything is ok, redirects to "Shop" screen - if no, or expiration date is expired - redirects to "Auth" screen
- Loading branch information
1 parent
5c54505
commit 7b7baab
Showing
7 changed files
with
234 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React, { useEffect, useRef } from 'react'; | ||
import { NavigationActions } from 'react-navigation'; | ||
import { useSelector } from 'react-redux'; | ||
import ShopNavigator from './ShopNavigator'; | ||
|
||
function NavigationContainer(props) { | ||
const navRef = useRef(); | ||
const isAuth = useSelector((state) => !!state.auth.token); | ||
|
||
useEffect(() => { | ||
if (!isAuth) { | ||
navRef.current.dispatch(NavigationActions.navigate({ routeName: 'Auth' })); | ||
} | ||
}, [isAuth]); | ||
|
||
return <ShopNavigator ref={navRef} />; | ||
} | ||
|
||
export default NavigationContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React, { useEffect } from 'react'; | ||
import { ActivityIndicator, AsyncStorage, StyleSheet, View } from 'react-native'; | ||
import { useDispatch } from 'react-redux'; | ||
import Colors from '../css/Colors'; | ||
import * as authActions from '../store/actions/auth'; | ||
|
||
function StartupScreen({ navigation }) { | ||
const dispatch = useDispatch(); | ||
|
||
useEffect(() => { | ||
const tryLogin = async () => { | ||
const userData = await AsyncStorage.getItem('userData'); | ||
|
||
if (!userData) { | ||
navigation.navigate('Auth'); | ||
return; | ||
} | ||
|
||
const transformedData = JSON.parse(userData); | ||
const { token, userId, expiryDate } = transformedData; | ||
const expirationDate = new Date(expiryDate); | ||
|
||
if (expirationDate <= new Date() || !token || !userId) { | ||
navigation.navigate('Auth'); | ||
return; | ||
} | ||
|
||
const expirationTime = expirationDate.getTime() - new Date().getTime(); | ||
|
||
navigation.navigate('Shop'); | ||
dispatch(authActions.authenticate(userId, token, expirationTime)); | ||
}; | ||
|
||
tryLogin(); | ||
}, [dispatch]); | ||
|
||
return ( | ||
<View style={styles.screen}> | ||
<ActivityIndicator size="large" color={Colors.primary} /> | ||
</View> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
screen: { | ||
flex: 1, | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}, | ||
}); | ||
|
||
export default StartupScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters