react-native aws amplify (V6) Custom authentication challenge (passwordless)

Question

I have developed a app with react-native and Amplify(This is myApp1). And I implemented passwordless authentication using AWS Amplify. (Not exactly same but similar with https://techinscribed.com/passwordless-phone-number-authentication-using-aws-amplify-cognito/)

Now, I am creating a new app(This is myApp2) with react-native and exist amplify backend(using previous one).

When I was developing myApp1, Amplify library was V5, but now it's V6. So, myApp1 is developed by V5 and myApp2 is developed by V6.

belows are my code.

myApp1 (V5)

const onSignInPressed = async data => {
    setIsLoading(true);
    const username = data.username;
    try {
      const user = await Auth.signIn('+91' + username);
      setSession(user);
      setReady(true);
    } catch (e) {
      console.error(e);
    } finally {
      setIsLoading(false);
    }
  };

  const onVerifyOtp = async data => {
    setIsLoading(true);
    try {
      const user = await Auth.sendCustomChallengeAnswer(session, data.otp);
      setAuthUser(user);
    } catch (e) {
      console.error(e);
    } finally {
      setIsLoading(false);
    }
  };

When the Sign In button is clicked, an OTP is sent, and upon entering the OTP, clicking the Verify OTP button uses sendCustomChallengeAnswer for login.

I modified my code as below by referring to AWS Documentation. (V6) (https://docs.amplify.aws/react-native/build-a-backend/auth/switch-auth/#pageMain)

It says 'To initiate a custom authentication flow in your app, call signIn without a password. A custom challenge needs to be answered using the confirmSignIn'

myApp2 (V6)

const onSignInPressed = async () => {
    setIsLoading(true);
    try {
      const user = await signIn({
        username: '+91' + phoneNumber,
        options: {
          authFlowType: 'CUSTOM_WITHOUT_SRP',
        },
      });

      setSession(user);
      setReady(true);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

const onVerifyOtp = async (otp) => {
    setIsLoading(true);
    try {
      console.log(otp);
      console.log(session.nextStep.signInStep);
      const output = await confirmSignIn({otp});
      console.log(output);

      setDbUser(output);
    } catch (err) {
      console.error('onVerifyOtp', err);
    } finally {
      setIsLoading(false);
    }
  };

But I got below error.

 LOG  111111
 LOG  CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE
 ERROR  onVerifyOtp [EmptyChallengeResponse: challengeResponse is required to confirmSignIn]

If anyone has solutions, I'd greatly appreciate detailed explanations. (I am very new, I would really appreciate it if you could explain it in detail.)

Thank you.

Answer 1

This problem is due to the parameter name, it works well if you transfer it to the confirmSignIn function as challengeResponse as shown below.

const challengeResponse = otp;
const user = await confirmSignIn({challengeResponse});