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!

Answer 1

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));