CODEWITHSUNDEEP
reactjsaws-sdkamazon-cognito
KMC
KMC

Reputation: 1742

Network error when authenticating user with AWS Cognito

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?

Upvotes: 5

Views: 4965

Answers (2)

Jason Pascoe
Jason Pascoe

Reputation: 345

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()
      }

Upvotes: 1

GetShifting
GetShifting

Reputation: 742

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);
});

Upvotes: 6

Related Questions