Network error when authenticating user with AWS Cognito - reactjs

Question

I'm trying to incorporate Cognito authentication into my React based project. My code is based on examples given in NPM page. This is what it looks like :
var authenticationData = {
Username : 'username',
Password : 'password',
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : 'username',
Pool : userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log('Successfully logged!');
}
});
},
onFailure: function(err) {
console.log(JSON.stringify(err));
},
});
I have created a user pool and added an app client. I have also enabled identity provider for app client. However, my code fails to authenticate with error {"code":"NetworkError","name":"Error","message":"Network error"}. Since my project is still hosted on a localhost, I have installed CORS plug-in for firefox, but that doesn't resolve the issue. I couldn't make much sense out of this error message. I have double checked Cognito region, pool id and client id. They all set to correct values. Does anyone familiar with this error and have an idea what maybe causing this?

Answer 1

A bit late, but I had exactly the same error today and it took me a while to figure it out. This happens when the automatic refresh occurs after a submit. This prevents the API call to AWS Cognito to finish resulting in a network error.
Before starting the cognito function, add a event.preventDefault(); to your code.
For example, I do this in my addEventListener:
document.querySelector("#authCognito").addEventListener("click", function(){
var username = document.getElementById("userInput").value;
var password = document.getElementById("passInput").value;
var authenticationData = {
Username: username,
Password: password,
};
event.preventDefault();
cognitoAuthenticate(authenticationData);
});

Answer 2

I had the same issue, the following is the fix in Vue
<template>
<button v-on:click="login($event)" class="btn btn-default btn-large">login</button>
</template>
<script>
methods: {
login (event) {
if (event) {
event.preventDefault()
}