Glad you’ve found it helpful!
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.
1 Like
Oh glad you figured it out. Thanks for reporting back.
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
1 Like
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.
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.
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?
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?
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?
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.
1 Like
Thanks for debugging the issue and posting about it!
Login window is using successful but after add facebook button its throwing network error how to deal it
Whats the error that you are seeing in the console?
Hello dev community, does anyone know what is going on here, with AWSPinPointProvider?
Even though, all my network requests are successful, I’m sure there are some unwanted issues I’ll have to face sooner or later.
BTW, I poked around and I can see my email is verified, & I’m talking about I can see it from the data the 200 status payloads return to an object stored in localStorage.
And this is my code for the submit event
handleSubmit = async event => {
event.preventDefault();
try{
await Auth.signIn(this.state.email, this.state.password);
alert("logged in");
} catch (e) {
alert(e.message);
}
}
Thanks dev community!
I could not find much about why AWSPinpointProvider isn’t receiving credentials, but I did read the AWS Amplify docs for react, not sure if
- this tutorial needs an update to meet the different code setup I seen
or - the version dependency I’m using: “aws-amplify”: “^1.1.29”, is not compatible with an earlier version(the one used at the time or near the time of writing the tutorial)
Does anybody know a workaround/solution for this problem?
Also, I was reading this thread, seems pretty dire for what it means for Cognito.
I’m pretty new to AWS development & I’m wondering if continuing this tutorial is worth it. If anyone could share some knowledge on what their opinion is on these matters, that would be great!
All feedback appreciated community!
AWSPinpointProvider is their internal analytics tool. I think the newer versions of Amplify are turning it on by default? You can try disabling it.
https://aws-amplify.github.io/docs/js/analytics#manual-setup
About the GitHub thread, Cognito and a lot of the AWS SDKs in general are just not well documented. It’s part of the reason why we wrote this guide in the first place.
Hello,
I add this code to get the authenticated session after the user logged in:
async componentDidMount() {
try {
await Auth.currentSession();
this.userHasAuthenticated(true);
}
catch(e) {
if (e !== 'No current user') {
alert(e);
}
}
this.setState({ isAuthenticating: false });
}
When I do the login everthing works fine, but if a reload de page, a got the following error:
Someone has the same issue?
And after you get the error, you are not logged in?
Yes, after the erro the session is losed.
That pretty much means that the call to Cognito is failing. Can you have a look at the developer console to see which call is failing? It’s likely that the User Pool config is not set correctly.