React Native Facebook SDK, Login is failing randomly

Question

I am using the react-native-fbsdk 0.8.0 with React-Native 0.57.4 and getting the error:

Login failed with error: the operation couldn't be completed. (com.facebook.sdk.login error 308).

about 30% of the time. I have tried with both LoginButton and LoginManager.

Also tried v0.9 and v0.7 of react-native-fbsdk, with the same result.

With LoginManager, I tried the LoginManager.logOut() trick also that I've seen posted by others (i.e. https://medium.com/@crysfel/error-when-login-with-facebook-sdk-react-native-c06a33078102)

I have the Keychain Sharing capability turned on.

I have followed all of the instructions at https://github.com/facebook/react-native-fbsdk including setting LSApplicationQueriesSchemes

Any suggestions for what I should try next if its working fine 2/3 times?

My login button code:

            <LoginButton
          style={[styles.button, styles.facebook]}
          readPermissions={[
            'public_profile',
            'user_birthday',
            'user_gender',
            'email'
          ]}
          onLoginFinished={(error, result) => {
            if (error) {
              alert('Login failed with error: ' + error.message);
            } else if (result.isCancelled) {
              alert('Login was cancelled');
            } else {
              // alert(
              //   'Login was successful with permissions: ' +
              //     result.grantedPermissions
              // );
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
                this.fetchProfile().then(profile =>
                  this.checkOrAddUser(profile)
                );
              });
            }
          }}
          onLogoutFinished={() => alert('User logged out')}
        />

And my LoginManager code:

  handleLogin = () => {
    LoginManager.logInWithReadPermissions([
      'public_profile',
      'user_birthday',
      'user_gender',
      'email'
    ]).then(
      result => {
        if (result.isCancelled) {
          console.log(result);
          console.log('Login cancelled');
        } else {
          console.log(
            'Login success with permissions: ' +
              result.grantedPermissions.toString()
          );
          console.log('result is ' + result);
          AccessToken.getCurrentAccessToken().then(data => {
            console.log(data.accessToken.toString());
            this.fetchProfile().then(profile => this.checkOrAddUser(profile));
          });
        }
      },
      function(error) {
        console.log(error);
        console.log('Login fail with error: ' + error.message);
        LoginManager.logOut();
        alert('Login failed. Try again.');
      }
    );
  };

Answer 1

I was able to solve this issue on iOS by following the steps at the end of this thread: https://github.com/facebook/facebook-swift-sdk/issues/286

Namely, adding these lines to my podfile

pod 'FacebookSDK', :git => 'https://github.com/facebook/facebook-objc-sdk.git', :branch => 'master'
pod 'FBSDKCoreKit', :git => 'https://github.com/facebook/facebook-objc-sdk.git', :branch => 'master'
pod 'FBSDKShareKit', :git => 'https://github.com/facebook/facebook-objc-sdk.git', :branch => 'master'
pod 'FBSDKLoginKit', :git => 'https://github.com/facebook/facebook-objc-sdk.git', :branch => 'master'

and removing the FBSDK .framework files that I had manually added to the 'Link Binary With Libraries' section, running 'pod install', then cleaning my build and derived data folder.

Answer 2

Hope this will help.

    import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';

export default class Login extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <LoginButton
          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) => {
                    console.log(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => console.log("logout.")}/>

      </View>
    );
  }
};