Signup with AWS Cognito

Chapter Comments
61

Oh great! I completely overlooked that extra credit chapter. I’ll follow that tutorial and then try to set up Google afterward. I’ll be sure to send over my steps if I’m successful in getting it to work!

1 Like
62

Has anyone figured out a way to incorporate MFA into this signup flow?

I have got the sign up and verify working, but looking at adding MFA to both the sign up and login, but have not been able to work it out yet. Would appreciate any guidance.

Thanks.

63

Have you tried the MFA portion in the Amplify docs - https://aws-amplify.github.io/docs/js/authentication#enabling-mfa. We’ve used it internally and it works.

We might add this to the guide at some point.

64

Thanks, I couldn’t get amplify to do everything for MFA enforced registration. In the end I ended up using Amplify and qrcode.react to generate the QR, then a lambda function to validate the submitted TOTP code. This validation function is reused for login. That way the MFA validation is handled ‘server’(less)-side in the Lambda, rather than by the front-end.

For the purposes of the registration I was also hoping that I would be able to use the code quick enough to both confirm MFA and log the user in. But the TOTP is single use, so there is no way around that.

65

Yeah that makes sense. We did something similar but did the validation on the frontend.

67

Why use useFormFields hook here to store email, pwd, confirmPwd, confirmCode instead of storing them in the state?

68

Because code reuse! don’t repeat, reuse code applied useFormFileds(Custom Hook)

1 Like
71

Hi everyone
not sure if the case with handling not confirmed user was solved so pasting the way I handled it.

In case user wants to submit existing email I am showing info that the user exists and redirecting him/her to Log in page. Then when user tries to log in and is not confirmed alert with information that user is not confirmed is displayed and I am sending new code and displaying confirmation form.

2 Likes
72

Hi, are you please able to share your solution?

73

Are you able to share your solution?

This is what I have so far:

async function handleSubmit(event) {
      event.preventDefault();
    
      setIsLoading(true);
    
      try {
        const newUser = await Auth.signUp({
          username: fields.username,
          password: fields.password,
          attributes: {
            email: fields.email,
          }
        });
        setIsLoading(false);
        setNewUser(newUser);
      } catch (e) {
        if (e.name === "UsernameExistsException") {
          onError("Username already exists! Please try a new one or login if this is your username.");
          setIsLoading(false);
        } else {
          onError(e);
          setIsLoading(false);
        }
      }
    }
74

Hi, I have made this work:

async function handleSubmit(event) {
    event.preventDefault();
    setIsLoading(true);
    try {
      const newUser = await Auth.signUp({
        username: fields.email,
        password: fields.password,
      });
      setIsLoading(false);
      setNewUser(newUser);
    } catch (e) {
      if (e.name === "UsernameExistsException") {
        handleUsernameExistsException();
      }
      onError(e);
      setIsLoading(false);
    }
  }

  async function handleUsernameExistsException() {
    try {
      await Auth.signIn(fields.email, fields.password);
      userHasAuthenticated(true);
      nav("/");
    } catch (e) {
      if (e.name === "UserNotConfirmedException") {
        handleUserNotConfirmedException();
      }
      onError(e);
      setIsLoading(false);
    }
  }

  async function handleUserNotConfirmedException() {
    try {
      const newUser = await Auth.resendSignUp(fields.email);
      setIsLoading(false);
      setNewUser(newUser);
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }
1 Like
75

Great solution! I made a slight change to the handleUsernameExistsException() function, to take into account the case where the user entered the wrong password:

  async function handleUsernameExistsException() {
    try {
      await Auth.signIn(fields.email, fields.password);
      userHasAuthenticated(true);
      nav("/");
    } catch (e) {
      if (e.name === "UserNotConfirmedException") { // user is registered but not confirmed
        handleUserNotConfirmedException();
      } else if (e.name === "NotAuthorizedException") { // user is registered and confirmed, but entered the wrong password
        alert("It looks like you are already registered. Redirecting to Login...");
        nav("/login");
      } else {
        onError(e);
      }
      setIsLoading(false);
    }
  }

Nothing crazy, just alerts the user that they entered the wrong password and redirects to /login.