AWS Amplify: Forgot password function with custom UI

Question

I am trying to implement a login page containing a "Forgot password?" button which opens a form that then allows the user to submit an email, which at the same time is the username, and if that entry exists within Cognito a reset password process should be started.

One of the issues I have had so far is that I'm not sure how to actually get the corresponding username from Cognito, as all the email logins seem to get assigned unique hashs and are not stored in plain text within Cognito.

I had a look at the code below line 1000 here in the docs but this also seems to assume that you have the corresponding username and other attributes.

(Signups should be only possible by admins, currently simply through the AWS console).

Any ideas on how this could be implemented? Thanks!

Solution

Ok - let me know if you need more information. It's a little different than most forgot password processes in that they require a code as you mention. I think what may be tripping you up is that the username is just the user's email (or whatever you designate as a username for your Cognito user pool). It's not the Cognito user id or whatever.

I use 4 inputs to get all the information needed, and two forms. You could easily use only one form.

The first input collects the email; I put this input on it's own form with instructions. You then run the Auth.forgotPassword method below (please provide the email input value as the username variable).

AWS will send a verification code to your user (if you're changing the format of your messages in the Cognito console; the code will use the "verification code" format, at least for SMS messages).

I think by default, if you've collected a phone number and provided it to Cognito during sign up, the code should go to the user's phone number, via SMS. If not, I would imagine the code goes to the user's email, though I don't know for sure (I have the user's phone number in Cognito, and I've never gotten this code by email).

Your other three inputs should be: code, password, verify password. I have these three on a second form. The user supplies the code to the code input form, supplies the new password, and verifies the new password.

You take the email (from the other form), code, and password, and you use the Auth.forgotPasswordSubmit method (provide the email input value as username again, code input value as code, and password input value as password).

You don't really need the "data" message returned from either method (I think it's just a string saying "success" if I remember correctly).

If the user is not in the system the Auth.forgotPassword method will return an error (something to the effect of "user not found").

Please find the pertinent methods below (copied from the docs):

import { Auth } from 'aws-amplify';

Auth.forgotPassword(username)
    .then(data => console.log(data))
    .catch(err => console.log(err));

// Collect confirmation code and new password, then
Auth.forgotPasswordSubmit(username, code, new_password)
    .then(data => console.log(data))
    .catch(err => console.log(err));

Comments

[Fesch]

Thanks a lot! I will have a go at it over the weekend

[twils0]

@Fesch sure - glad to help! Add a comment if you have any issues. If everything works, please accept the answer.

[Fesch]

Great, works like a charm! Fyi, i'm only using email without phone numbers and the users end up receiving an email with the code without having to change any of the default Cognito settings.

[AnBisw]

Guys I am in the same situation as @Fesch, and only have email authentication without alias. When I send the email address as the "username" to the forgotPassword method i keep getting this error - "Cannot reset password for the user as there is no registered/verified email or phone_number". Any idea? Btw, my user's are created through invitation rather than sign up but not sure if that matters here.

[AnBisw]

nevermind....I had to send attribute email_verified as true while creating the user programmatically using adminCreateUser. Once I did that, forgot password started working. It's weird because you can create a user without having their email or phone verified, and if that is the case forgotPassword won't ever work. For forgotPassword to work the user must either have verified_email or verified_phone_number set to true.

[twils0]

Yea - AWS sends out a code to confirm the password reset. It needs a verified email or phone to send out that code.

[Jemil Oyebisi]

@AnBisw, thanks so much, setting email_verified as true works for me too.