I have a web-app built with the AWS Amplify framework. I rely on Cognito Hosted UI w/ identity federation for registration and login. In reviewing the registrations for my app, I noticed that it got 70+ registrations, but of these only 12 went on to create user profiles. I tested creating an account and signing in through each identity provider (Amazon, Google, Facebook) as well as through standard signup with an email and password. I never had any issues.
I started testing more heavily on mobile and eventually I started to encounter the an error. I plugged my mobile device into my laptop, navigated to chrome//:inspect and checked the network tab and JS console. Only when my chosen identity provider required an OTP code, I noted that I was getting invalid_request and invalid_grant errors on after I input the code and continued with sign-in, even though registration seemed to work (I say registration seemed to work because I received AWS credentials in the initial response and amplify-signin-with-hostedUI was set to true in localStorage. Also, when I open the AWS Console and go to Cognito, I can see that I've been added as a user in my User_Pool).
If I refresh the browser at this point, it seems a new request is sent off to /token, but it comes back with a 400 error with the invalid_grant message.
I kept poking around and eventually found something interesting. There are three tabs involved in the login process, and I think this is somehow messing things up. On mobile, when I try to register or login with the Cognito Hosted UI, I am first met with the Federated Identity Provider buttons and email/password page.
First I got to my website (Tab One). Then I click sign-up and the Hosted UI page pops up (Tab Two). I select one of the login methods (Amazon, Google, Facebook, or Email/Password). If the selected method requires no OTP, I'm golden. I'm redirected to my web app and the app works fine. If my selected method requires an OTP, a new tab opens (Tab 3) which asks for the token. At this point, I can see in Chrome devtools that an error occurs on this tab (Tab 3).
After plugging in the OTP code and clicking sign-in, I'm redirected, as expected, back to the my web-app, but this redirect occurs in the original tab (Tab One), however with a query string added to the URL (/?code=). If I click the view tabs button, I see that the Hosted UI tab (Tab Two) is still open and still has the Cognito Hosted UI buttons/username+password page open. Not sure if that's important.
Now on Tab One with my web app, I don't immediately see any errors in Chrome devtools. But I can see that my app is unable to load. If I wait, it just loads and loads forever. If I refresh the page, then at this point I see a new request to /token fire off in the Network Tab of Chrome DevTools and it comes back with the 400 error invalid_grant response.
Has anyone else encountered this issue or found a resolution?
Thanks in advance!