I have implemented a custom Login.vue component using vue.js to allow users to log in to my application through AWS Cognito. The authentication process is handled by the ___.authenticateUser() method, which initiates a session with Cognito. Below is the code snippet that performs this functionality:
export default {
name : 'Login',
data: function() {
return {
errorMessageHidden: true,
formHidden: false,
errorMessage: '',
email: '',
password: ''
}
},
methods: {
showValuesToMe: function() {
console.log(this.errorMessageHidden)
},
handleLogin: function() {
const data = {
Username: this.email,
Pool: userPool
}
const cognitoUser = new CognitoUser(data);
const authenticationData = {
Username : this.email,
Password : this.password,
};
function showErrorMessage(err) {
this.errorMessageHidden = false;
this.errorMessage = err.message;
console.log("The method got called... errorMessageHidden = " + this.errorMessageHidden);
}
const authenticationDetails = new AuthenticationDetails(authenticationData)
cognitoUser.authenticateUser(authenticationDetails, {
callback: showErrorMessage,
onSuccess: function(result) {
console.log('access token ' + result.getAccessToken().getJwtToken());
},
onFailure: function(err) {
this.callback(err);
}
});
},
hideErorrMessage: function() {
this.errorMessageHidden = true;
}
}
}
The problem arises within the handleLogin() function of the component when the ___.authenticateUser() method triggers either onSuccess() or onFailure() callbacks based on the authentication outcome from AWS.
When attempting to modify the errorMessageHidden and errorMessage values inside the onFailure() callback, they remain unchanged. This behavior occurs because the onFailure() method is a closure-based callback method.
In order to access and update these values, I introduced the
function showErrorMessage(err) {...}data, modification remains ineffective.
If anyone can offer insight into how I can successfully alter these values to display error messages in the browser, it would be greatly appreciated.