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?