How to get user info (email, name, etc.) from the react-native-fbsdk?
Solution 1
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')
})
}
Solution 2
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
Solution 3
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
Solution 4
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>
);
}
};
Solution 5
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);
}
);
}
Related videos on Youtube
danseethaler
I’m passionate about using code to make the world a better place. I got started in software development by automating work that took myself and my co-worker's dozens of hours each week to complete. I saw how powerful well-designed code can be at elevating our human capacity. I’ve since built dozens of native apps, desktop apps, servers, scripts, and voice-driven tools to enhance my reach and elevate our world.
Updated on January 08, 2021Comments
-
danseethaler over 3 years
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.
-
danseethaler about 8 yearsExcellent 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!
-
IanBussieres over 7 yearsThis is certainly the preferred method, see github.com/facebook/react-native-fbsdk#graph-requests for more details
-
Ali Emre Çakmakoğlu almost 7 yearsIt works, but the below answer is the correct one which use SDK itself.
-
Pavindu over 4 yearsWhere to set access token in this method?
-
Haseeb Burki over 4 years@Pavindu you can set it as
accessToken: {{value}}
above the parameters object. -
bilalmohib over 3 yearsThat actually worked for me.Thanks.It only took data from access token.
-
TomSawyer over 3 yearswhat's the purpose of putting const method inside of promise call back? since you don't pass access_token to
infoRequest