AWS Amplify phone number login is not working. Am I doing it correct?

[therealkh]

Which Specific Feature is your question related to?

authentication

Question

I am trying make the authentication the way when user can sign up with email, add their phone number and use phone number as sign in option. But when I am trying to sign in with phone number I am getting 'User doesn't exist' error. When I use email to sign in, everything works and I am able to sign in.
Can someone point me at place where is my mistake or tell that it is a bug?
Also is that AWS SNS is in sandbox mode can be the reason? But I am using phone number that is verified for sandbox usage.

SNS verified numbers:

Versions:

"@apollo/client": "^3.8.5",
"@aws-amplify/auth": "^5.4.0",
"@aws-amplify/core": "^5.4.0",

Here is how Amplify Authentication is set:

Redux saga that calls signing up:

import { Auth } from '@aws-amplify/auth';
import { call, put, SagaGenerator } from 'typed-redux-saga';

import { authSetLoading, signUp, signUpResponse } from '~/entities/auth';
import { ToastError } from '~/features/toastMessage';
import { logger } from '~/shared/logger';

export function* signUpSaga({
  payload,
}: ReturnType<typeof signUp>): SagaGenerator<void> {
  yield* put(authSetLoading({ key: 'isSigningUp', value: true }));

  try {
    const { email, password, phoneNumber } = payload;
    const awsUser = yield* call([Auth, 'signUp'], {
      username: email,
      password,
      attributes: {
        phone_number: phoneNumber,
      },
      autoSignIn: {
        enabled: true,
      },
    });

    const { userSub: userId } = awsUser;

    yield* put(signUpResponse({ ...payload, userId }));
  } catch (error) {
    const { message: errorMessage } = error as Record<string, string>;

    if (errorMessage) {
      yield* call(ToastError, errorMessage);
    }
    yield* call(logger, {
      msg: JSON.stringify(error, null, 2),
      source: 'signUpSaga',
    });
  } finally {
    yield* put(authSetLoading({ key: 'isSigningUp', value: false }));
  }
}

Sign in redux-saga (email field can contain phone number, depends on what user types in):

import { Auth } from '@aws-amplify/auth';
import { call, put, SagaGenerator } from 'typed-redux-saga';

import { authSetLoading, getUserData, signIn } from '~/entities/auth';
import { ToastError } from '~/features/toastMessage';
import { logger } from '~/shared/logger';

export function* signInSaga({
  payload,
}: ReturnType<typeof signIn>): SagaGenerator<void> {
  yield* put(authSetLoading({ key: 'isSigningIn', value: true }));

  try {
    const { email, password } = payload;
    console.log('Sign in credentials: ', email, password);
    /**
    ***
    ***  LOG RESULT IS IN SCREENSHOT BELOW
    ***
    **/

    const result = yield* call([Auth, 'signIn'], {
      username: email,
      password,
    });
    const userSub = result.attributes.sub;
    yield* put(getUserData({ userId: userSub }));
  } catch (error) {
    const { message: errorMessage } = error as Record<string, string>;

    if (errorMessage) {
      yield* call(ToastError, errorMessage);
    }
    yield* call(logger, { msg: error, source: 'signInSaga' });
  } finally {
    yield* put(authSetLoading({ key: 'isSigningIn', value: false }));
  }
}

Logs that I am receiving in console:

How user looks like in amplify studio

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our JS repository for better assistance 🙂

[israx]

hello @therealkh , how did you configure your Cognito User pool ? and what can you see in the Login Experience tab ? If you want to login with your phone_number you need to enable alias attributes, once the the user pool is created, you need to mark the email and phone_number fields as showed here.

[nadetastic]

Hi @therealkh following up here - are you able to review/verify the comment above by @israx ?

[therealkh]

Hi, i made a workaround. I didnt find where i can mark fields as aliases and how to enable alias. My workaround is enabling username login option. Once i enabled it - it worked. Can you guys suggest better solution?

[nadetastic]

@therealkh enabling alias would need to be done when the userpool is created, unfortunately at this time, its not possible to update the userpool alias after the userpool has been created.

https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html#user-pool-settings-aliases

[nadetastic]

@therealkh Im going to go ahead and close out this issue as you have become unblocked. Let me know if you still have any questions. Thanks!