react-native aws amplify passwordless authentication (V6)

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)

import {Auth} from 'aws-amplify';

const onSignInPressed = async data => {
    try {
      const user = await Auth.signIn(phonenumber);
      setSession(user);
      setReady(true);
    } catch (e) {
      ...
    }
}

myApp2 (V6)

import {signIn} from 'aws-amplify/auth';

const onSignInPressed = async data => {
    try {
      const user = await signIn(phonenumber);
      const user = await signIn({username: phonenumber});
      const user = await signIn({username: phonenumber, password: null});
      const user = await signIn({username: phonenumber, password: pwd});
      setSession(user);
      setReady(true);
    } catch (e) {
      ...
    }
}

myApp1 works fine. But myApp2 has the following error. The following error occurs when the "signIn" function is called in four ways.

const user = await signIn(phonenumber);
>> ERROR  [EmptySignInUsername: username is required to signIn]

const user = await signIn({username: phonenumber});
>> ERROR  [EmptySignInPassword: password is required to signIn]

const user = await signIn({username: phonenumber, password: null});
>> ERROR  [EmptySignInPassword: password is required to signIn]

const user = await signIn({username: phonenumber, password: pwd});
>> ERROR  [EmptySignInPassword: password is required to signIn]

I configured the backend to be authenticated without a password (myApp1), I got the configuration as it was and implemented myApp2, but I don't know why I'm being asked for a password. (myApp1 is still working fine.)

The only difference is version.(V5 and V6)

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 guys.

Answer 1

It seems that with the recent update to the AWS Amplify library version 6, there are changes in the authentication flow. To resolve the issue you're facing, you need to explicitly specify the authFlowType as 'CUSTOM_WITHOUT_SRP' when calling the signIn function in Amplify signIn. This change is necessary to align with the updated authentication flow introduced in version 6.

Here's an example of how you can modify your onSignInPressed function in myApp2:

import { signIn } from 'aws-amplify/auth';

const onSignInPressed = async (data) => {
  try {
    const user = await signIn({
      username: phonenumber,
      options: {
        authFlowType: 'CUSTOM_WITHOUT_SRP',
      },
    });

    // Continue with your logic based on the user response.

    setSession(user);
    setReady(true);
  } catch (e) {
    // Handle any errors here.
    console.error(e);
  }
};

By explicitly setting authFlowType to 'CUSTOM_WITHOUT_SRP', you should be able to initiate the Custom authentication challenge Lambda triggers that you defined earlier. For more details on Custom authentication challenge Lambda triggers, you can refer to the AWS documentation. This resource provides in-depth information on how to configure and work with Lambda triggers in the context of user pool challenges.

Additionally, make sure that your Cognito user pool configuration includes the necessary settings for the parameters used during login. You can refer to the Amplify documentation on configuring Amazon Cognito for more details: Configure Amazon Cognito.

Feel free to reach out if you have any further questions or encounter any issues. Good luck with your development!