Get user's email from Graph API

[swhamilton]

Ran into an issue where Meteor.call('login') would return most of the user's fields, but not email, even though it was whitelisted here: https://github.com/spencercarli/react-native-meteor-accounts/blob/master/MeteorApp/server/imports/oauth-facebook.js#L34

// RNFacebookExample/app/fb-login.js
// This call triggers the code in our Meteor server.

export const loginWithTokens = () => {
  const Data = Meteor.getData();
  AccessToken.getCurrentAccessToken()
    .then((res) => {
      if (res) {
        Meteor.call('login', { facebook: res }, (err, result) => {
          if(!err) {//save user id and token
            AsyncStorage.setItem(USER_TOKEN_KEY, result.token);
            Data._tokenIdSaved = result.token;
            Meteor._userIdSaved = result.id;
          }
        });
      }
    });
};

and here is the call to FB in our Meter server that fires after receiving the Meteor.call('login') event:

// MeteorApp/server/imports/oauth-facebook.js
...
const getIdentity = (accessToken, fields) => {
  try {
    return HTTP.get("https://graph.facebook.com/v2.4/me", {
      params: {
        access_token: accessToken,
        fields: fields
      }
    }).data;
  } catch (err) {
    throw _.extend(new Error("Failed to fetch identity from Facebook. " + err.message),
                   {response: err.response});
  }
};

https://github.com/spencercarli/react-native-meteor-accounts/blob/master/MeteorApp/server/imports/oauth-facebook.js#L88

After further investigation I finally figured out the cause. You need to replace the

publishPermissions={["publish_actions"]}

(https://github.com/spencercarli/react-native-meteor-accounts/blob/master/RNFacebookExample/app/SignIn.js#L17) property in the <LoginButton> component from react-native-fbsdk with the following readPermissions property:

// RNFacebookExample/app/SignIn.js
...
  render() {
    return (
      <View style={styles.container}>
        <LoginButton
          readPermissions={["email", "user_friends", "public_profile"]}
          onLoginFinished={onLoginFinished}
        />
      </View>
    );
  }

Note that you need to REPLACE, not add the readPermission property as per this issue: https://github.com/facebook/react-native-fbsdk/issues/147

As a side note, removing the "publish_permissions" prop from the component also removes the Facebook login warning "Submit for Login Review: Some of the permissions below have not been approved for use by Facebook." you see when going through the FB login process in a web view.

Hopefully this will save some time for somebody!

[spencercarli]

I haven't looked at this code in a while - do you think you could submit a PR w/ the appropriate fix?

Thanks for looking into this and sharing your findings!

[darshanaGharat]

Thanks

[xyzzyxyzzy0077]

This is sooooooo damn true!!!! Saved me a lot of time! Millions of thanks! @swhamilton

[azizazlan]

I follow exactly as what swhamilton suggested but I got the following error in the Meteor console output:

Exception while invoking method 'login' Error: Failed to fetch identity from Facebook. HTTP is not defined at getIdentity (imports/startup/server/services.js:115:7)

where services.js is my file containing exactly as in MeteorApp/server/imports/oauth-facebook.js

Which part did I miss?

[hugoh59]

Why is this not updated in the docs after all this time? Anyways, thanks a lot for sharing this! Very helpful.