How to get user info (email, name, etc.) from the react-native-fbsdk?

Question

I'm trying to access the user's email and name to setup and account when a user authenticates with Facebook. I've ready the documentations for react-native-fbsdk but I'm not seeing it anywhere.

score 60 · Answer 1 · edited Oct 06 '19 at 10:41

60

The accepted answer uses fetch but the SDK is capable of doing this request as well... So in case anyone is wondering, this is how it can be done with the SDK.

let req = new GraphRequest('/me', {
    httpMethod: 'GET',
    version: 'v2.5',
    parameters: {
        'fields': {
            'string' : 'email,name,friends'
        }
    }
}, (err, res) => {
    console.log(err, res);
});

For more details, See https://github.com/facebook/react-native-fbsdk#graph-requests

edited Oct 06 '19 at 10:41

Denis Zavedeev

7,627
4
32
53

answered Dec 31 '16 at 19:58

honerlawd

1,499
11
10

3

This is certainly the preferred method, see https://github.com/facebook/react-native-fbsdk#graph-requests for more details – IanBussieres Feb 16 '17 at 16:21
Where to set access token in this method? – Pavindu Oct 06 '19 at 10:28
@Pavindu you can set it as `accessToken: {{value}}` above the parameters object. – Haseeb Burki Oct 08 '19 at 07:09

score 55 · Accepted Answer · edited Aug 15 '18 at 05:14

You could do something like this (which is a boiled down version of what I'm doing in my app):

<LoginButton
  publishPermissions={['publish_actions']}
  readPermissions={['public_profile']}
  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) => {
          const { accessToken } = data
          initUser(accessToken)
        })
      }
    }
  }
  onLogoutFinished={logout} />

// initUser function

initUser(token) {
  fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + token)
  .then((response) => response.json())
  .then((json) => {
    // Some user object has been set up somewhere, build that user here
    user.name = json.name
    user.id = json.id
    user.user_friends = json.friends
    user.email = json.email
    user.username = json.name
    user.loading = false
    user.loggedIn = true
    user.avatar = setAvatar(json.id)      
  })
  .catch(() => {
    reject('ERROR GETTING DATA FROM FACEBOOK')
  })
}

Excellent response. I was assuming that there would be something built-in to the SDK for these requests but a regular old http request will do the trick. Thanks! — danseethaler, May 27 '16 at 13:35
It works, but the below answer is the correct one which use SDK itself. — Ali Emre Çakmakoğlu, Aug 10 '17 at 08:06

Naeem Ibrahim · Answer 3 · 2018-01-03T14:51:03.033

That will help you, this is worked for me

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

export default class App extends Component<{}> {

  render() {
    return (
      <View style={styles.container}>

        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    const infoRequest = new GraphRequest(
                      '/me?fields=name,picture',
                      null,
                      this._responseInfoCallback
                    );
                    // Start the graph request.
                    new GraphRequestManager().addRequest(infoRequest).start();
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }

  //Create response callback.
  _responseInfoCallback = (error, result) => {
    if (error) {
      alert('Error fetching data: ' + error.toString());
    } else {
      alert('Result Name: ' + result.name);
    }
  }
}

For Detail visit here it will help you more. Facebook Login React

what's the purpose of putting const method inside of promise call back? since you don't pass access_token to `infoRequest` — TomSawyer, Mar 13 '21 at 14:30

score 4 · Answer 4 · answered Mar 19 '20 at 07:25

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

export default class FBLogin extends Component {

    initUser = (token) => {
        fetch('https://graph.facebook.com/v2.5/me?fields=email,first_name,last_name,friends&access_token=' + token)
            .then((response) => {
                response.json().then((json) => {
                    const ID = json.id
                    console.log("ID " + ID);

                    const EM = json.email
                    console.log("Email " + EM);

                    const FN = json.first_name
                    console.log("First Name " + FN);
                })
            })
            .catch(() => {
                console.log('ERROR GETTING DATA FROM FACEBOOK')
            })
    }

    render() {
        return (
            <View>
                <LoginButton
                    publishPermissions={['publish_actions']}
                    readPermissions={['public_profile']}
                    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) => {
                                    const { accessToken } = data
                                    // console.log(accessToken);
                                    this.initUser(accessToken)
                                })
                            }
                        }
                    }
                    onLogoutFinished={() => {
                        console.log('Logout');
                    }}
                />
            </View>
        );
    }
};

That actually worked for me.Thanks.It only took data from access token. — bilalmohib, Jan 30 '21 at 05:11

score 3 · Answer 5 · answered Jan 08 '21 at 09:22

Here is the whole code snippet to get the Facebook profile information.

"react": "16.13.1"
"react-native": "0.63.3"
"react-native-fbsdk": "^3.0.0"

const infoRequest = new GraphRequest(
    '/me', 
    {
      parameters: {
        'fields': {
            'string' : 'email,name'
        }
      }
    },
    (err, res) => {
      console.log(err, res);
    }
);

const facebookLogin = () => {
    LoginManager.logInWithPermissions(["public_profile", "email"]).then(
      function(result) {
        if (result.isCancelled) {
          console.log("Login cancelled");
        }
        else {
          console.log("Login success with permissions: " + result.grantedPermissions.toString());
          new GraphRequestManager().addRequest(infoRequest).start();
        }
      },
      function(error) {
        console.log("Login fail with error: " + error);
      }
    );
}

How to get user info (email, name, etc.) from the react-native-fbsdk?

5 Answers5

Linked