I have a simple login form and i show a message if the user use a wrong password or username
js
onSignin() {
axios.post(
'api/user/signin',
{
email: this.email,
password: this.password,
},
{
headers: { 'X-Requested-With': 'XMLHttpRequest' },
},
).then((response) => {
this.$router.push('dashboard');
}).catch((error) => {
this.errors.add('credentials', 'Wrong user or Password'); //this message i want to move to the dictionary
});
},
html
<form action="POST" >
<span v-show="errors.has('credentials')" class="help is-danger">{{ errors.first('credentials') }}</span>
<p class="form-group">
...
this works, the the error message gets displayed, but how can i add this message to the dictionary, that i have all my messages in one place?
I got the answer there ;)
https://github.com/baianat/vee-validate/issues/963
Validator.dictionary.merge({
en: {
messages: {
credentials: 'Wrong user or password'
}
}
});
const message = this.$validator.dictionary.getMessage('en', 'credentials');
this.errors.add('credentials', message); //this message i want to move to the dictionary
Related
I have written this code to signup:
actions: {
signup({ commit, dispatch }, formData) {
axios
.post('accounts:signUp?key=XXXXXXXXXXXX', {
email: formData.email,
password: formData.password,
returnSecureToken: true
})
.then(res => {
commit('userData', {
token: res.data.idToken,
userId: res.data.localId
});
dispatch('storeUserInfo', formData);
console.log(res);
})
.catch(error => {
alert(error.code);
alert(error.message);
});
},
My aim is to display the exact error which is returned by Firebase like
EMAIL_NOT_FOUND: There is no user record corresponding to this
identifier. The user may have been deleted. INVALID_PASSWORD: The
password is invalid or the user does not have a password.
USER_DISABLED: The user account has been disabled by an administrator
With this code every time it returns: Request failed with status code 400
In the response I can see the message like:
{
"error": {
"code": 400,
"message": "EMAIL_NOT_FOUND",
"errors": [
{
"message": "EMAIL_NOT_FOUND",
"domain": "global",
"reason": "invalid"
}
]
}
}
By doing
.catch(error => {
console.log(error.response.data.error.message);
});
You will be able to get the error message, e.g. "EMAIL_NOT_FOUND". It's then up to you to map it to the textual message (i.e. "There is no user record corresponding to this identifier. The user may have been deleted.").
For more details, see the Axios documentation on Errors Handling: https://github.com/axios/axios#handling-errors
One extra note: The error messages you use as examples in your question don't correspond to accounts:signUp but to accounts:signInWithPassword
Just getting started with Firebase phone auth. Seems pretty slick however I've hit a wall with a bug.
{
"error": {
"errors": [
{
"domain": "global",
"reason": "invalid",
"message": "SESSION_EXPIRED"
}
],
"code": 400,
"message": "SESSION_EXPIRED"
}
}
Starting with the Captcha: (standard documentation code!)
var applicationVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': function(response) {
},
'expired-callback': function() {
}
});
Its rendered and the captcha works well.
Next is the sign-in bit where you are sent the auth code to your phone. Works great:
$scope.signInWithPhoneNumber = function signInWithPhoneNumber() {
var phoneNumber = "*censored*";
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, applicationVerifier)
.then(function (confirmationResult) {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
$scope.setConfirmationResult(confirmationResult);
alert('Result: ' + JSON.stringify(confirmationResult));
}).catch(function (error) {
// Error; SMS not sent
alert('Error: ' + error);
// ...
});
};
Finally its the authentication of the code that the user inputs from the text message. Here is when I get the error 400:
$scope.AuthenticateCode = function (code) {
var code = String(document.getElementById("auth_code").value);
var confirmationResult = $scope.getConfirmationResult();
alert(code);
confirmationResult.confirm(code).then(function (result) {
// User signed in successfully.
var user = result.user;
console.log('Signed In! ' + JSON.stringify(user));
// ...
}).catch(function (error) {
// User couldn't sign in (bad verification code?)
// ...
});
}//end of AuthenticateCode
The error is coming from the VerifyPhone method:
https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPhoneNumber?key=censored
Any help or ideas?
Many Thanks,
Kieran
Ok, there are 2 likely reasons:
The code expired. The user took too long to provide the SMS code and finish sign in.
The code was already successfully used. I think this is the likely reason. You need to get a new verificationId in that case. Get a new reCAPTCHA token via the invisible reCAPTCHA you are using.
You are most likely to forget the "Country Code" before the phone no.
That is why firebase throw error 400 which means invalid parameters
If it's an Ionic3 project, change the following lines:
Imports:
import { AngularFireAuth } from 'angularfire2/auth';
import firebase from 'firebase';
Create var:
public recaptchaVerifier: firebase.auth.RecaptchaVerifier;
on "ionViewDidLoad()"
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
on "your_method(phoneNumber: number)"
const appVerifier = this.recaptchaVerifier;
const phoneNumberString = "+" + phoneNumber;
this.fireAuth.auth.signInWithPhoneNumber(phoneNumberString, appVerifier)
.then(confirmationResult => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
let prompt = this.alertCtrl.create({
title: 'Enter the Confirmation code',
inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
buttons: [
{
text: 'Cancel',
handler: data => { console.log('Cancel clicked'); }
},
{
text: 'Send',
handler: data => {
confirmationResult.confirm(data.confirmationCode)
.then(result => {
// Phone number confirmed
}).catch(error => {
// Invalid
console.log(error);
});
}
}
]
});
prompt.present();
})
.catch(error => {
console.error("SMS not sent", error);
});
Reference:
Firebase Phone Number Authentication
I got into a similar situation when a POST request to google API was returning Bad Request 400. When the message was logged, it said:
All requests from this device are blocked due to Unusual Activity. Please try again later
The issue was when the ReCaptcha was sensing a bot out of my development environment and it worked well when I tried later. During the rest of the development, I turned off this feature for easy work.
I have the following function to change the email on a Firebase user account. I want to display an ionic2 alert when complete, whether it was successful or there was an error. From my code below I do get the alert to display BUT it is blank. Most likely it is a timing issue on the Firebase promise but I don't know how to fix it.
private doChangeEmail(data): void {
var myAlert: {
title?: string,
subtitle?: string
} = {};
this.auth.ref.changeEmail({
oldEmail: data.oldemail,
newEmail: data.newemail,
password: data.password
}, function(error) {
if (error) {
switch (error.code) {
case "INVALID_PASSWORD":
myAlert.title = 'Invalid Password';
myAlert.subtitle = 'The specified user account password is incorrect.';
break;
case "INVALID_USER":
myAlert.title = 'Invalid User';
myAlert.subtitle = 'The specified user account does not exist.';
break;
default:
myAlert.title = 'Error creating user';
myAlert.subtitle = error;
}
} else {
myAlert.title = 'DONE';
myAlert.subtitle = 'User email changed successfully!';
}
});
let alert = Alert.create({
title: myAlert.title,
subTitle: myAlert.subtitle,
buttons: [{
text: 'OK',
handler: () => {
}
}]
});
this.nav.present(alert);
}
put the alert code inside the promise result....
this.auth.ref.changeEmail({
oldEmail: data.oldemail,
newEmail: data.newemail,
password: data.password
}, function(error) {
if (error){
// do error stuff..
} else {
// do success stuff..
}
// show alert here...
})
I found the following comment by Frank van Puffelen which solved my issue:
You're using this inside a callback function, where it has a different meaning. One solution is to use fat-arrow/rocket notation for the callback, which ensures this is what you expect it to be:
The correct syntax should be
this.auth.ref.changeEmail({
oldEmail: data.oldemail,
newEmail: data.newemail,
password: data.password
}, (error) => {
if (error){
// do error stuff..
} else {
// do success stuff..
}
// show alert here...
})
and the alert shows correclty as pointed out by Aaron Saunders
I am trying to send "verify email" emails from my deployed meteor app (at digital ocean Ubuntu 14.04) via Mandrill and the willio:mandrill package. After deployment, I am able to send an email from my app on startup using the Mandrill API.
Mandrill.messages.send({
message: {
"text": "Greetings from example.com!",
"from_email": "demo#example.com",
"from_name": "Keith - example.com",
"subject": "App Started",
"to": [
{ email: "ggg#gmail.com", name: "Keith" }
]
}
}, function( error, response ) {
if ( error ) {
console.log( error );
} else {
console.log( response );
}
});
This email sends so I know I have my MAIL_URL set and am able to access my mandrill account from the application. However, when I try to get an account-tied email such as verify email or reset password, it does not send. I believe this is because I am unable/dont know how to set the "from" field of email like I am with the above code. However I imagine that it could also be because of something else so here is the code that alters what the verifyEmail email looks like.
Accounts.emailTemplates.verifyEmail.subject = function(user) {
return 'Activate your new account';
}
Accounts.emailTemplates.verifyEmail.html = function (user, url) {
var result;
try {
result = Mandrill.templates.render({
template_name: 'verify-email',
template_content: [
{
name: 'CONFIRMURL',
content: url
},
{
name: 'FNAME',
content: user.username
}
],
merge_vars: [
{
name: 'CONFIRMURL',
content: url
},
{
name: 'FNAME',
content: user.username
}
]
});
} catch (error) {
console.error('Error while rendering Mandrill template', error);
}
return result.data.html;
}
How would I be able to set the from field or otherwise fix the verify email through mandrill?
BTW, I was using this guide for help but still havent been able to fix the issue. https://themeteorchef.com/snippets/sending-email-with-mandrill/
This is how I setup email in my app:
Accounts.emailTemplates.siteName = Meteor.settings.public.siteName;
Accounts.emailTemplates.from = Meteor.settings.public.emailFrom;
Hi I have a registration form with the following code:
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
var email = $scope.user.email;
var password = $scope.user.password;
if (email && password) {
auth.$createUser( {email: email, password: password})
.then(function() {
// do things if success
console.log('User creation success');
$location.path('/home');
}, function(error) {
// do things if failure
console.log(error);
$scope.regError = true;
$scope.regErrorMessage = error.message;
});
}
}
};
And an error message which should appear displaying the same contents as the console if regError is true.
<button type="button" ng-click="signUp();" ng-disabled="!user.email || !user.password" class="btn btn-lg btn-primary btn-block">Register</button>
<p style="color:red;" ng-show="regError">{{regErrorMessage}}</p>
I don't quite understand what is happening here but the normal form validation works as well as the console output of the Error but the regErrorMessage never shows up. Can anyone see anything obvious? Why would the console work fine but not ng-show?
You should use braces {{regError}}