My firebase method onAuthStateChanged() trigger several times when I sign in and out using firebase-authentication according to console.log. Isn't it supposed to trigger only once at login and once at logout. The result is that when signing out, the navigation to a previous page is triggered several times. Here's the code:

ponentDidMount() {
    fbAuth.onAuthStateChanged(user => this.loginFunc(user));
}

loginFunc(user) {
   if (user) {
     console.log('LOGGED IN');
}else {
  console.log('LOGGED OUT');
  this.props.navigation.navigate('FbLogin');
}
console.log('onAUTH LOGGED IN: ', user);
}

This is what the console looks like. As you can see both login and logout are triggered on just a single logout click. On login, it triggers twice....

LOGGED OUT
FbLogin.js:46 onAUTH:  null
LoggedIn.js:27 LOGGED OUT
LoggedIn.js:30 onAUTH LOGGED IN:  null
FbLogin.js:44 LOGGED OUT
FbLogin.js:46 onAUTH:  null

My logout button looks like this:

<TouchableHighlight //LOGOUT
   style={{
      ...
   }}
   onPress={() => {
      fbAuth.signOut();
      this.setState({ loginState: "You are logged out" });
   }}
   >
      <Text>Logout</Text>
   </TouchableHighlight>

My firebase method onAuthStateChanged() trigger several times when I sign in and out using firebase-authentication according to console.log. Isn't it supposed to trigger only once at login and once at logout. The result is that when signing out, the navigation to a previous page is triggered several times. Here's the code:

ponentDidMount() {
    fbAuth.onAuthStateChanged(user => this.loginFunc(user));
}

loginFunc(user) {
   if (user) {
     console.log('LOGGED IN');
}else {
  console.log('LOGGED OUT');
  this.props.navigation.navigate('FbLogin');
}
console.log('onAUTH LOGGED IN: ', user);
}

This is what the console looks like. As you can see both login and logout are triggered on just a single logout click. On login, it triggers twice....

LOGGED OUT
FbLogin.js:46 onAUTH:  null
LoggedIn.js:27 LOGGED OUT
LoggedIn.js:30 onAUTH LOGGED IN:  null
FbLogin.js:44 LOGGED OUT
FbLogin.js:46 onAUTH:  null

My logout button looks like this:

<TouchableHighlight //LOGOUT
   style={{
      ...
   }}
   onPress={() => {
      fbAuth.signOut();
      this.setState({ loginState: "You are logged out" });
   }}
   >
      <Text>Logout</Text>
   </TouchableHighlight>

• javascript
• firebase
• react-native
• firebase-authentication
• react-navigation

• In your console messages there seem to be two classes writing messages: FbLogin.js and LoggedIn.js. Or am i reading that wrong? – André Kool Commented Apr 17, 2018 at 9:37

3 Answers 3

Yes this is normal, onAuthStateChanged will keep triggering, I solved this by using this code:

  var authFlag = true;
  Firebase.onAuthStateChanged( user => {
    if(authFlag) {
      authFlag = false;
      if (user) {
        // Do something,
      }
      else {
        // Alert.alert("Auth Error")
      }
    }
  });

Ok I was able to HALF the number of times it runs (from 4 to 2) by simply putting the function into a useEffect and leaving the [] empty.

 useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
         ...DOING SOMETHING...
      }
    });
  }, []);

I realize you might not have been using the same functional ponents when asking this question, but this issue has been driving me crazy, as well. If someone knows the underlying reason why this happens and could bring us down to a single time running the code, that would be awesome.

I was able to address this by resolving a promise within the onAuthStateChanged listener. In my case, I was only interested in the user's ID token.

  const [request, response, promptAsync] = Google.useAuthRequest({
      androidClientId: "XXXXXXX",
      iosClientId: "XXXXXXX",
      expoClientId: "XXXXXXX",
  });

  const promptGoogleLogin = useCallback(() => {
    promptAsync().catch(console.error);
  }, [promptAsync]);

  const loginWithFirebaseIdToken = async (idToken: string) => {
    // Send idToken to the backend to authenticate user and return custom token
  };

  useEffect(() => {
    const handleResponse = async (response: AuthSessionResult) => {
        if (response.type === "success") {
            const { authentication } = response;

            const credential = GoogleAuthProvider.credential(
              authentication.idToken,
              authentication.accessToken
            );

            await signInWithCredential(firebaseAuth, credential);

            const idToken = await getUserIdToken();

            // Send Firebase token to my backend to continue auth flow
            loginWithFirebaseIdToken(idToken);
        }
    }

    if (response) {
        handleResponse(response);
    }
  }, [response]);

  // The secret ingredient
  const getUserIdToken = (): Promise<string> => {
    return new Promise((resolve) => {
      firebaseAuth.onAuthStateChanged((user) => {
        if (user) {
          user.getIdToken().then(resolve);
        }
      });
    });
  };