Facebook Login Cannot Login after logout

#1
import Exponent from 'exponent'
import firebase from 'firebase'
import React, {Component} from 'react'
import {View, StyleSheet, ActivityIndicator,Text,Image,Dimensions,StatusBar,TouchableOpacity} from 'react-native'
import { NavigationActions } from 'react-navigation'
import FacebookButton from '../components/facebookButton'
import Swiper from 'react-native-swiper';
const {width, height} = Dimensions.get('window')
export default class Login extends Component {

  state = {
    showSpinner: true,
    status:"gray",
    prosesFB:"Loading",
  }



  componentDidMount() {
    // firebase.auth().signOut()
    firebase.auth().onAuthStateChanged(auth => {
      if (auth) {
        this.firebaseRef = firebase.database().ref('users')
        this.firebaseRef.child(auth.uid).on('value', snap => {
          const user = snap.val()
          if (user != null) {
            this.firebaseRef.child(auth.uid).off('value')
            this.goHome(user)
          }
        })
      } else {
        this.setState({showSpinner:false})
      }
    })
  }




  goHome(user) {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Home', params:{user}}),
      ],
    })
    this.props.navigation.dispatch(resetAction)
  }

  authenticate = (token) => {
    const provider = firebase.auth.FacebookAuthProvider
    const credential = provider.credential(token)
    return firebase.auth().signInWithCredential(credential)
  }



  createUser = (uid, userData) => {
    const defaults = {
      uid,
      distance:6,
      ageRange: [18,24],
      serumpun: [0],
      marga: "",
      margaTitle:"",
      marpadan: [0],
      margaIbu: "",
      margaIbuTitle:"",
      ompungBoru:"",
      ompungBoruTitle: "",
      filter_religion: false,
      lokasi: false,
      religion: 'false',
      work : [ {
        "employer" : {
          "id" : "",
          "name" : ""
        },
        "id" : "",
        "position" : {
          "id" : "",
          "name" : ""
        }
      } ]

    }
this.setState({status:"red"})
    firebase.database().ref('users').child(uid).once('value', (snap) => {
    firebase.database().ref('users').child(uid).update({...userData, ...defaults,...snap.val()})
  })


  }

  tutorialImage = () => {
    return (
      <Swiper style={styles.wrapper} >
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/1.png')}/>
        </View>
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/2.png')}/>
        </View>
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/3.png')}/>
        </View>
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/4.png')}/>
        </View>
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/5.png')}/>
        </View>
        <View style={styles.slide}>
          <Image style={{resizeMode: 'contain', width: width-50}} source={require('../components/login/6.png')}/>
        </View>
      </Swiper>
    )
  }

  login = async () => {
    this.setState({showSpinner:true})
    this.setState({status:"blue"})
    const APP_ID = '1374193259339584'
    const options = {
      permissions: ['public_profile', 'user_birthday', 'user_work_history', 'email'],

    }
    const {type, token} = await Exponent.Facebook.logInWithReadPermissionsAsync(APP_ID, options)
    this.setState({status:"purple"})
    
    if (type === 'success') {
      this.setState({status:"yellow"})
      const fields = ['id', 'first_name', 'last_name', 'gender', 'birthday', 'work']
      const response = await fetch(`https://graph.facebook.com/me?fields=${fields.toString()}&access_token=${token}`)
      const userData = await response.json()
      const {uid} = await this.authenticate(token)
      this.createUser(uid, userData)
      this.setState({status:"green"})
    }else{
      this.setState({showSpinner:false})
    }
  }





  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        { this.state.showSpinner ?

          <ActivityIndicator color={this.state.status} animating={this.state.showSpinner} /> :

          <View>

          <View style={{flex:5,
          alignItems: 'center',
          justifyContent: 'center',}}>
          {this.tutorialImage()}
          </View>

          <View style={{flex:3,
          alignItems: 'center',
          justifyContent: 'center',}}>
              <View style={{marginTop:80, justifyContent:'center', alignItems:'center'}}>
                <FacebookButton onPress={this.login} />

                <Text style={{fontSize:11 ,color:'#b5b5b5',textAlign:'center',justifyContent:'center', alignItems:'center'}}>
                Kami tidak akan memposting apapun ke akun Facebook Anda. {"\n"}Dengan login, Anda setuju dengan

                <Text onPress={() => {
                  this.props.navigation.navigate('Info')
                }} style={{color:'#5f5f5f'}}> Syarat & Ketentuan </Text> dan
                <Text onPress={() => {
                  this.props.navigation.navigate('KP')
                }} style={{color:'#5f5f5f'}}> Kebijakan Privasi</Text> Kami.
                </Text>
              </View>

            </View>

          </View>
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f5f5f5'
  },
  wrapper: {

 },
 slide: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',

 },
 text: {
   color: '#fff',
   fontSize: 30,
   fontWeight: 'bold',
 }
})

when redirecting to the facebook app it redirects back to the app and not doing anything. i add an activity indicator to find out the problem. and it stack with the blue activity indicator. BUT if i delete the app from my facebook acount and i try to login again it work perfectly

#2

facing same issue here at my project.!

#3

Is this happening on iOS or Android or both?

#4

Hello @chunhung. Were you able to fix your problem? If not, can you give us a little more details? What platform are you testing on, and is it in Expo client or as a Standalone? Thanks!

#5

@dikaiosune i tested on android as a standalone, so after logout when i try to login again it didnt open the facebook login or anything. but it work totally fine on expo client