Login with AWS Cognito


#41

Glad you’ve found it helpful!


#42

I have run into a road block at this stage in the tutorial. I can not seem to get logged in using the aws-amplify library. When the correct username and password are sent, I always receive a response like “Incorrect username or password.” The network io consists of 4 consecutive calls to https://cognito-idp.us-east-1.amazonaws.com (OPTIONS -> POST -> OPTIONS -> POST). The 2nd call contains my username and AuthFlow set to “USER_SRP_AUTH”. The 4th call corresponds to the following console output:

I have tried creating and confirming new users. The users show status as confirmed. I have tried deleting the user and identity pools and starting over. Nothing seems to help. My google-foo is failing me on this one. Any help would be greatly appreciated!

Edit: It turns out that I had to put a valid email address in, and use the confirmation code sent out in order to confirm a user. The admin confirmation functionality is not working for me. Maybe I have something misconfigured… IDK, will keep digging into that; however, it appears that I am unblocked at this point.


#43

Oh glad you figured it out. Thanks for reporting back.


#44

I am running into exact same issue. I cannot verify the test users via cognito web panel. You mentioned you are able to verify the user with verification code sent to email(which i ve got) but not sure where to get the access token from. Can you clarify where/how you retrieve the access token for specific user? Docs and google wasnt helpful neither. To verify user i use the aws cli via
aws cognito-idp verify-user-attribute --attribute-name=username --access-token=<idk-where-we-get-this-value-from> --code 078311


#45

Hi Folks,

I’ve been struggling to integrate Formik into the Login form below, could someone tell me what I might be doing wrong? After I submit the form an alert pops up saying undefined, so I think its failing to send the login data to Cognito.

//Login.js

    import React, {Component} from "react";
    import {Button, FormGroup, FormControl, ControlLabel} from "react-bootstrap";
    import {Auth} from "aws-amplify";
    import "./Login.css";
    import * as Yup from "yup";
    import {withFormik} from "formik";




     const formikEnhancer = withFormik({
            validationSchema: Yup.object().shape({
                email: Yup.string()
                   .email("Invalid Email Address")
                   .required("Email is required"),
                password: Yup.string()
                   .min(5, 'Password has to be longer than 5 characters')
                   .required('Password is required')  
            }),
            mapPropsToValues: props => ({
            email: "",
            password:""
            }),


    handleChange: event => {
            this.setState({
                [event.target.id]: event.target.value
            });
        },

        handleSubmit: async (event, values) => {
            event.preventDefault();

            try{
                await Auth.signIn(...values);
                this.props.userHasAuthenticated(true);
                this.props.history.push("/");
                
            } catch (e){
                alert(e.message);
              
            }
        }

        
        });








        const Login = (props) =>  {
            const{
            values,
           touched,
           handleSubmit,
         handleBlur,
         handleChange,
         errors
        } = props;

         return(

        <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
         <ControlLabel>Email</ControlLabel>
         {errors.email &&
         touched.email && (
             <div style={{color:"red",marginTop:".5rem"}}>{errors.email}</div>
         )}
         <FormControl 
         autoFocus
         type="email"
         value={values.email}
         onChange={handleChange}
         onBlur={handleBlur}
         />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
         <ControlLabel>Password</ControlLabel>
      {errors.password &&
      touched.password && (
         <div style={{color:"red",marginTop:".5rem"}}>{errors.password}</div>
    )}            
    <FormControl 
         autoFocus
         type="password"
         value={values.password}
         onChange={handleChange}
         onBlur={handleBlur}

         />
        </FormGroup>
        <Button 
        block
        bsSize="large"
        type="submit"
        >
        Login
        </Button> 
        </form>





         );
        }
       

        


    const MyEnhancedForm = formikEnhancer(Login);

    export default MyEnhancedForm;

Any help would be awesome.


#46

Not entirely sure here but can you confirm that ...values that is being passed in to the Auth.signIn is the same format as the one in the tutorial?


#47

No ..values is not the same format as this.state.email, this.state.password… I noticed I am not declaring any state, do you think that might be problem?


#48

I mean, the Auth.signIn call just needs to be called with the email and password as the two arguments. Is your code doing that?


#49

error


#51

Once I completed this step, the form submitted, but nothing was happening. When I examined “e” in the try block, it contained the text “no userPool”.

For some reason, the Amplify.configure() step in index.js did not seem to carry over to Auth.signIn() function in Login.js. When I copied and pasted the entire Ampify.configure() block into Login.js (with the Amplify import), it fixed the issue, but it was not an ideal solution.

I found a discussion about this issue which suggested that it can be caused by npm caching, and that removing node_modules and reinstalling npm can solve the problem:

$ rm node_modules
$ npm install

This solved the problem for me, and I was able to login from Login.js with Auth.signIn() using the Amplify.configure() code from index.js to configure it.


#52

Thanks for debugging the issue and posting about it!