Search code examples
react-nativefacebook-loginreact-native-fbsdk

React-Native-FBSDK login doesn't return email


I'm trying to use the default <'LoginButton ... > for login in the app through Facebook login, but I can't manage to get the user's email.

This is my button:

<LoginButton   
  publishPermissions={["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)
      }
    }
  }
 onLogoutFinished={() => alert("User logged out")}
/>

And this is how i try to get the user's details:

  async FBGraphRequest(fields, callback) {
    const accessData = await AccessToken.getCurrentAccessToken();

    console.log("token= ", accessData.accessToken )
    // Create a graph request asking for user information
    const infoRequest = new GraphRequest('/me', {
      accessToken: accessData.accessToken,
      parameters: {
        fields: {
          string: fields
        }
      }
    }, this.FBLoginCallback.bind(this));
    // Execute the graph request created above
    new GraphRequestManager().addRequest(infoRequest).start();
  }

  async FBLoginCallback(error, result) {
    if (error) {
      this.setState({
        showLoadingModal: false,
        notificationMessage: "facebook error"
      });
    } else {
      // Retrieve and save user details in state. In our case with 
      // Redux and custom action saveUser
      this.setState({
        id: result.id,
        email: result.email,
        name: result.name
      });
      console.log("facebook login",result)
    }

  }

The console.log("facebook login",result) line returns me only the account name and id, but there is no field for te email...

What am I doing wrong?

PS.: I've also tryed to use a "custom function", but it doesn't work too (for the email, the login worked and i get only the user details like name and id):

async facebookLogin() {
    // native_only config will fail in the case that the user has
    // not installed in his device the Facebook app. In this case we
    // need to go for webview.
    let result;
    try {
      this.setState({showLoadingModal: true});   
      LoginManager.setLoginBehavior('NATIVE_ONLY');
      result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
    } catch (nativeError) {
      try {
        LoginManager.setLoginBehavior('WEB_ONLY');
        result = await LoginManager.logInWithReadPermissions(['email']);
      } catch (webError) {
        // show error message to the user if none of the FB screens
        // did not open
      }
    }
    console.log("facebook result 1: ", result)
    // handle the case that users clicks cancel button in Login view
    if (result.isCancelled) {
      this.setState({
        showLoadingModal: false,
        notificationMessage: I18n.t('welcome.FACEBOOK_CANCEL_LOGIN')
      });
    } else {
      // Create a graph request asking for user information
      this.FBGraphRequest('id, email, name', this.FBLoginCallback);
    }
  }
.
.
.
        <LoginButton   
          publishPermissions={["email"]}
          onPress={
            this.facebookLogin()
          }
          onLogoutFinished={() => alert("User logged out")}
          />

this are the field request by the app. I need to insert also the user's Email: Request from the app


Solution

  • !!!RESOLVED!!!

    the <'LoginButton ...> props for the permission is "permissions", not "readPermission"...

    so the button code is:

    <LoginButton
       permissions={['public_profile', 'email', 'user_birthday', ]}
    
       onClick={this.facebookLogin}
    />