Amplify-js: Simple way to force login after a user enters their confirmation code (instead of forcing the user to type in the email/password again).

[ajhool]

* Which Category is your question related to? *
Auth

* What AWS Services are you utilizing? *
aws-amplify and aws-amplify-react

* Provide additional details e.g. code snippets *

Currently, when a user Registers (provides email + password) and is sent a confirmation code (eg. 12345 is sent to their email/phone) which they enter into an aws-amplify-react Confirmation page. Then, the user is forced to enter their email name and password, again, into a SignIn form. However, the natural flow would be to automatically log them into their account once they have Registered and Confirmed.

This is bad friction at a critical point in a user's first use of the website. I'm aware that the team isn't going to touch aws-amplify-react components while they do the Stencil revamp, but does anybody have a working patch for the time being?

[houmark]

I think partly the reason for this is to re-confirm the password right after signup, as the signup form only has one password field (no repeat).

Considering that you'd have a hard time capturing the password, there's no workaround besides making your own component which is not that hard actually. And you could enable other benefits in the process, such as a working ENTER submit and also keeping a more persistent step in local storage.

We had people signing up, getting the verification code, closing the browser in the meantime and losing the actual step, so they have to figure out to sign in, and then get greeted by the missing verification code that would then be sent once more (which renders the old one they just copied from their mail invalid). To prevent all of this, we did our own component which uses Auth to sign the user up and in, and also keeps track of their process in local storage, so if you reload the page or close the browser, to come back later, then the verification form would load up as you enter, ready to receive the code.

Doing each component is a few hours depending on what UI components you have already ready to support this.

And one more very important thing (I'm was using the React component):
If a user signs up with [email protected], then that's a different user than [email protected] and you have no way of making sure it's lowercased, so with that you have serious problems waiting to happen.

Want one more? Sometimes it can be nice to send along some signup information, what page did the user sign up from, which button did they click etc. That's not possible in the core component either, but you would be able to hook that in using attributes and have a Lambda function react on that value after "signup confirmation".

This got way longer than I wanted it to be :) But here's my feedback after trying to use the core components, only to realize that the only way I could get to where we needed was by making my own. The core ones were a nice quick/kick starter though but for production use, I honestly don't think anyone should use them.

[ajhool]

Thanks for the thoughtful response. Can't believe that cognito doesn't have a flag for case-insensitive emails in the userpool settings, I'm glad that you caught that for me.

The only component I'm using is the SignUp/SignIn/Confirm. It's frustrating that the most common answer for "how do i do this simple, common, reasonable thing in Amplify" is "don't use amplify"

[houmark]

I've been at the point where I was doubting Amplify, but at this point I am on the other side. This is a platform with a lot of potential, which is already very powerful, and what I have seen until now, is that Amazon is putting a lot of resources into developing the platform. A year from now, I think a lot of these issues are a thing of the past. You got a lot of "out of the box stuff here" and a lot of very fast development, so remember that positive side when you're looking at one day of making some login components that you most likely would have to do in any other platform anyways. That they even exist you could see as a free gift to get you started making the platform you need to do without having to think too much about users, signup, login, etc. Then later you can come back to improve on that.

I have done SignUp (switches to confirm if not confirmed), SignIn (including confirm), ForgotPassword and a current status (when logged in, that has a logout button) until now, so that's probably what you would want to start out with. You can even copy the best parts out of the Authenticator compont from aws-amplify-react (I didn't though) or at least read the code to see what's going on.

Yeah, the Cognito situation with usernames is really bad and the fix should be simple for them, but for some reason, the most simple and really bad "bugs" seems to escape the attention of the AWS team.

Good luck!

[ajhool]

So, I went ahead and rewrote all of the Amplify Auth components and am glad that I did, however I was expecting for the custom Auth.signUp and Auth.confirmSignUp to log the user in in the Auth module. I'm checking for a user at Auth.currentAuthenticatedUser and assumed that confirmSignUp would set that field up.

Do you have a way to automatically Sign the user in after confirm code? Should I just store the password somewhere and call Auth.signIn immediately after confirmSignUp succeeds? (I'm a little hesitant to store passwords if I don't need to!)

[houmark]

@ajhool not that hard right? And nice to have full control over everything, at least in my opinion.

To answer your question, to my knowledge it's not possible to have Auth sign the user in. I kept it like that and let the user sign in as I also kept only one field for the password on creation, which means the user does not confirm the password. If you auto-sign in the user, then you risk they typed a non-intended password and they won't notice until a long time later.

This way the user would at least notice right away and you could even notify the user that the password they are trying to sign in with, is not the same password as they just created. Keeping the password in memory inside the component does not really pose a risk for me, as it will vanish the moment you reset the variable or the page is refreshed — just don't start saving it in localStorage. The main thing is that once it's submitted, it's sent over https so it's not possible to snap it in flight.

[pbirsinger]

There still no simple fix for this? There realistically should just be a password confirm field and then have it auto-sign in after confirm. I can't even disable email verification if I try- Amplify console gives me the same error:

MFA cannot be turned off if an SMS role is configured

even though I've never had MFA on, and have deleted the sns role.

[elorzafe]

@ajhool from today new User Pools can be created with case insensitivity for username input
More info here