How to set state ('this.setState({})') inside error handling function for Firebase auth?
its not working in React Native.
onSignUpPress() {
if (this.state.password !== this.state.passwordConfirmation ) {
return this.setState({errorMessage: 'Your passwords do not match'});
}
ref.createUser({
email : this.state.email,
password : this.state.password
}, function(error, authData) {
if (error) {
console.log(error);
// this.setState({errorMsg: error}) <-- Like this, it not work on React Native.
} else {
console.log("Successfully created user account with uid:", userData.uid);
}
});
}
});
Try rewriting the function using es6 fat arrow syntax. One issue for sure in the above code is that this is not bound to the correct scope. Try writing the function like this:
onSignUpPress() {
if (this.state.password !== this.state.passwordConfirmation ) {
return this.setState({errorMessage: 'Your passwords do not match'});
}
ref.createUser({
email : this.state.email,
password : this.state.password
},(error, authData) => {
if (error) {
console.log(error);
this.setState({errorMsg: error})
} else {
console.log("Successfully created user account with uid:", userData.uid);
}
});
}
})
Related
I am using React native with Redux-saga. When I try to pass value saga true my back end...I got an error message like this. And I have already tried the same question answer in StackOverflow, But this answer did not work for me. I am a student, so I don't know much more. If anyone can help me with this, I really grateful to you all.❤️
function addUserPassMailChild(email, password) {
auth()
.createUserWithEmailAndPassword(email, password)
.then(() => {
console.log('User account created & signed in!');
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.log('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.log('That email address is invalid!');
}
console.error(error);
});
}
export function* addUserPassMail(action) {
const email = action.payload.email;
const password =action.payload.password;
console.log(email, password)
try {
const emailLogin = yield call(addUserPassMailChild, {email:email, password:password})
if (emailLogin) {
// console.log(loginData.additionalUserInfo.profile)
yield put(AddUserSuccess(emailLogin))
yield put({
type: GET_USER_TOKEN_LISTENER,
})
}
} catch (error) {
console.log(error)
yield put(AddUserField(error))
}
}
Try passing arguments like this:
yield call(addUserPassMailChild, email, password);
Or try getting the arguments like this:
function addUserPassMailChild({email, password}) {
// TODO
}
To start off, I do want to clarify that I know how to use APi's created in NodeJS in Angular. The problem I have is a little tricky.
I have a function that verifies the email used in registering:
exports.confirmEmail = function (req, res) {
ConfirmToken.findOne({
token: req.params.token
}, function (err, token) {
if (err) {
return res.status(500).send({
message: "Internal Server Error " + err
})
}
// token is not found into database i.e. token may have expired
if (!token) {
return res.status(400).send({
message: 'Your verification link may have expired. Please click on resend for verify your Email.'
});
}
// if token is found then check valid user
else {
Account.findOne({
_id: token._accountId,
email: req.params.email
}, function (err, user) {
if (err) {
return res.status(500).send({
message: "Internal Server Error " + err
})
}
// User does not exist
if (!user) {
return res.status(401).send({
message: 'The account does not exist'
});
}
// user is already verified
else if (user.isVerified) {
return res.status(200).send('User has been already verified. Please Login');
}
// verify user
else {
// change isVerified to true
user.isVerified = true;
user.save(function (err) {
// error occur
if (err) {
return res.status(500).send({
message: err.message
});
}
// account successfully verified
else {
return res.status(200).send('Your account has been successfully verified');
}
});
}
});
}
})
}
This is the response I get when I register an account
Now my question is: is there a way to pass in html code or have it show in a custom Angular component instead of displaying as simple plain text on the web browser as such
Your service should send a isVerified status back to the client. You are sending only a string at the moment
return res.status(200).send('Your account has been successfully verified');
based on this status, let's call it, isVerified your angular app would render a isVerfiedComponent.ts or notVerifiedComponent.ts
Been trying to write to my Firebase Realtime Database with something as simple as this in my react-native app:
newTips = () => {
firebase.database().ref('users/').set({
tips: "tips"
}).then((data)=>{
//success callback
console.log('data ' , data)
}).catch((error)=>{
//error callback
console.log('error ' , error)
})
}
But it is not writing and I am getting this yellow message in Expo. Any idea what the issue is? Auth works perfectly however.
Fixed this by chaning from Firebase Realtime to Firestore. Works perfectly.
newTips = () => {
let user = firebase.auth().currentUser;
let name, email, photoUrl, uid, emailVerified;
firebase.auth().onAuthStateChanged(user => {
if (user) {
email = user.email;
// User is signed in.
console.log('Logged in user: ' + email)
firestore.collection("tips").add({
user: user.email,
tips: "bla bla"
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
} else {
// User is signed out.
console.log('No user signed in')
}
})
}
I am building a React Native app, I previously implemented Facebook login using login Manager
export const onLogin = () => {
return (dispatch) => {
console.log('inside login');
dispatch({ type: ON_LOGIN });
LoginManager.logInWithReadPermissions(['public_profile',
'email']).then((res) => {
console.log(res);
MakeGraphRequest(dispatch);
},
(error) => {
console.log(error);
LoginFail(dispatch, error);
});
};
};
function MakeGraphRequest(dispatch) {
const responseInfoCallback = (error: ?Object, result: ?Object) => {
if (error) {
console.log(error);
LoginFail(dispatch, error);
} else {
axios({
method: 'post',
url: 'url',
data: {
first_name: result.first_name,
last_name: result.last_name,
profile_photo: result.picture.data.url,
email: result.email,
spend_history: []
}
}).then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
LoginSuccess(dispatch, result);
}
});
}
};
const infoRequest = new GraphRequest(
'/me',
{
parameters: {
fields: {
string: 'email, first_name, last_name, picture.type(large), birthday'
}
}
},
responseInfoCallback
);
new GraphRequestManager().addRequest(infoRequest).start();
}
Also I've used Login Button and Expo Facebook login but I could not find a way to implement this kind of a login.
Should I use Login Manager or Login Button. The Facebook docs are valid for web only. Is there a way to integrate this in my RN(react native) project?
You already have the user data in the response. So you can just start your screen (like in the picture) and ask if the user really wants to sign in with this account. Only after that, call your LoginSuccess events. If the user doesn't want to login just dispose the result data.
.then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
// add screen logic here
// LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
// add screen logic here
// LoginSuccess(dispatch, result);
}
});
Same would go with the Facebook Login Button or AuthSession.
Using AsyncStorage to save/fetch the state and get wether he goes or goes not to the "continue as" screen.
try {
await AsyncStorage.setItem('#MySuperStore:key', 'I like to save it.');
} catch (error) {
// Error saving data
}
try {
const value = await AsyncStorage.getItem('#MySuperStore:key');
if (value !== null){
// We have data!!
// show "continue as" screen
console.log(value);
}
} catch (error) {
// Error retrieving data
}
I am enabling email/password sign in method in firebase menu.The code for creating a new user and also to login are given below:
$scope.chatRef = new Firebase("https://project-497516355415797631.firebaseio.com");
$scope.login = function(){
$scope.chatRef.authWithPassword({
email : "debojyoti1#gmail.com",
password : "123456"
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
}
});
}
$scope.createUser = function(){
$scope.chatRef.createUser({
email : "bobtony#firebase.com",
password : "correcthorsebatterystaple"
}, function(error, userData) {
if (error) {
console.log("Error creating user:", error);
} else {
console.log("Successfully created user account with uid:", userData.uid);
}
});
}
Still the error Error: The specified authentication provider is not enabled for this Firebase. is showing.What i am doing wrong?Thank you for your time.
You are using the old SDK for your project. the "new Firebase("etc...")" is for the Firebase Legacy Version not the Firebase 3.0 version you should use this documentation
https://firebase.google.com/docs/web/setup