I've created a Login button using Facebook SDK. Once the user is logged in, the app navigates to the second screen (NavigatorIOS). From that second screen the user can go back to the login screen using the navigation (back button).
How can I prevent the user from going back to the Login screen if he is already logged in?
index.ios.js
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
NavigatorIOS
} from 'react-native'
import LoginView from './src/login-view'
class MyApp extends Component {
render() {
return (
<Provider store={store}>
<NavigatorIOS
initialRoute={{
component: LoginView,
title: 'MyApp',
index: 0
}}
/>
</Provider>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
LoginView
import React, {Component} from 'react'
import {
View,
Text,
StyleSheet,
TouchableHighlight,
} from 'react-native'
import CategoryView from './category-view'
import {LoginButton, AccessToken, GraphRequest, GraphRequestManager} from 'react-native-fbsdk'
class LoginView extends Component {
goToCategoryView = () =>
this.props.navigator.push({
title: 'Categories',
component: CategoryView,
})
render(){
return(
<View style={styles.container}>
<LoginButton
readPermissions={['public_profile','email']}
onLoginFinished={
(error, result) => {
if (error) {
console.log('login has error: ', result.error)
} else if (result.isCancelled) {
console.log('login is cancelled.')
} else {
AccessToken.getCurrentAccessToken().then((data) => {
this.goToCategoryView()
})
}
}
}
onLogoutFinished={() => {console.log('logged out')}} />
</View>
)
}
}
export default LoginView
To make this work, you need to: Disable the swipe gesture for the screen ( gestureEnabled: false ). Override the native back button in the header with a custom back button ( headerLeft: (props) => <CustomBackButton {... props} /> ).
I succeeded in preventing my website from going back to the login page by pressing the back button using history.
Using Navigator, you can use resetTo(startingRoute)
method to reset the stack and start a new one from the route you past as a parameter. Doing this you will prevent to navigate back in the stack.
If I'm not misunderstanding your component, you should use something like this:
goToCategoryView = () => {
//Replace here push with resetTo
this.props.navigator.resetTo({
title: 'Categories',
component: CategoryView,
})
}
Facebook Docs
Like you said "One last question on the topic - once user is logged in, if I refresh the simulator, it goes back to Login screen showing Facebook continue button. Is it possible to also prevent going back to that screen on refresh/reload?"
If you are using token based auth, then store user token in AsyncStorage by AsyncStorage.setItem("jwtToken", token) then check it using AsyncStorage.getItem('jwtToken') if token exist redirect user to main screen else login screen
// Fetch the token from storage then navigate to our appropriate place
const userToken = await AsyncStorage.getItem('jwtToken');
//set auth token header auth
setAuthToken(userToken);
// // decode token and get user and experire
const decoded = jwt_decode(userToken);
// set user and isAuthenticated
// this will help you to login as current user
store.dispatch(setCurrentUser(decoded));
// This will switch to the App screen or Auth screen and this loading
//check if token is there or not
if (userToken === null) {
//else logout to login page
Actions.login()
console.log(userToken)
} else {
//if token then redirect to main screen
Actions.main()
console.log(userToken)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With