firebase facebook failed authentication - facebook

Question

I have a screens where I am trying my hands on firebase's facebook authentication.
Using expo i can successfully generate facebook token. next what i did was to use this token to genrate cerdentials, which i think also ran successfully but when I am trying to use the credentials to signin to firebase i get error login failed.
I am not sure what is the problem. Do I need to register user using email & password before letting them login using facebook auth.
Any help will be appreciated...
here is the code...
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
View,
Text,
} from 'react-native';
import Expo, { Facebook } from 'expo';
import * as firebase from 'firebase';
import ModalActivityIndicator from '../../components/ModalActivityIndicator';
export default class SignInFacebookScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
};
}
componentDidMount = async () => {
await this.facebookLogin();
};
facebookLogin = async () => {
const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
'<AppId>',
{
permissions: ['public_profile', 'email'],
}
);
if (type === 'success') {
await this.callGraph(token);
} else if (type === 'cancel') {
alert('Cancelled!', 'Login was cancelled!');
} else {
alert('Oops!', 'Login failed!');
}
};
callGraph = async token => {
const response = await fetch(
`https://graph.facebook.com/me?access_token=${token}`
);
const userProfile = JSON.stringify(await response.json());
const credential = firebase.auth.FacebookAuthProvider.credential(token);
await this.firebaseLogin(credential);
};
// Sign in with credential from the Facebook user.
firebaseLogin = async credential => {
firebase
.auth()
.signInAndRetrieveDataWithCredential(credential)
.then(() => {
this.setState({
isLoading: false,
hasError: false,
errorMessage: null,
});
this.props.navigation.navigate('App');
})
.catch(error => {
this.setState({
isLoading: false,
hasError: true,
errorMessage: error.errorMessage,
});
});
};
render() {
let { isLoading, hasError, errorMessage } = this.state;
return (
<View style={styles.container}>
<ModalActivityIndicator isLoading={!!isLoading} />
<Text>Sign In with Facebook</Text>
{hasError && (
<React.Fragment>
<Text style={[styles.errorMessage, { color: 'black' }]}>
Error logging in. Please try again.
</Text>
<Text style={[styles.errorMessage, { color: 'black' }]}>
{errorMessage}
</Text>
</React.Fragment>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

Well I fixed the issue with the following code. Seemed like the issue was with channing of async functions.
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
View,
Text,
} from 'react-native';
import Expo, { Facebook } from 'expo';
import * as firebase from 'firebase';
import ModalActivityIndicator from '../../components/ModalActivityIndicator';
export default class SignInFacebookScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
firstName: '',
lastName: '',
};
}
componentDidMount = async () => {
const fbToken = await this.getFacebookToken();
const userProfile = await this.getFacebookUserProfile(fbToken);
this.setUserDetails(userProfile);
const credential = await this.getFirebaseFacebookCredential(fbToken);
await this.loginToFirebaseWithFacebook(credential);
};
getFacebookToken = async () => {
const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
'<AppId>',
{
permissions: ['public_profile', 'email'],
}
);
if (type === 'success') {
return token;
} else if (type === 'cancel') {
alert('Cancelled!', 'Login was cancelled!');
} else {
alert('Oops!', 'Login failed!');
}
};
getFacebookUserProfile = async token => {
this.setState({ isLoading: true });
const response = await fetch(
`https://graph.facebook.com/me?access_token=${token}&fields=first_name,last_name`
);
const userProfile = JSON.stringify(await response.json());
return userProfile;
};
setUserDetails = userProfile => {
const userProfileObj = JSON.parse(userProfile);
this.setState({
firstName: userProfileObj.first_name,
lastName: userProfileObj.last_name,
});
};
getFirebaseFacebookCredential = async token => {
const credential = firebase.auth.FacebookAuthProvider.credential(token);
return credential;
};
loginToFirebaseWithFacebook = async credential => {
firebase
.auth()
.signInAndRetrieveDataWithCredential(credential)
.then(() => {
let user = firebase.auth().currentUser;
firebase
.database()
.ref('users/' + user.uid)
.update({
firstName: this.state.firstName,
lastName: this.state.lastName,
});
})
.then(() => {
this.setState({
isLoading: false,
haserror: false,
errorMessage: null,
});
this.props.navigation.navigate('App');
});
};
render() {
let { isLoading, hasError, errorMessage } = this.state;
return (
<View style={styles.container}>
<ModalActivityIndicator isLoading={!!isLoading} />
<Text>Sign In with Facebook</Text>
{hasError && (
<React.Fragment>
<Text style={[styles.errorMessage, { color: 'black' }]}>
Error logging in. Please try again.
</Text>
<Text style={[styles.errorMessage, { color: 'black' }]}>
{errorMessage}
</Text>
</React.Fragment>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});