Amplify - error signing in TypeError: user.sendMFACode is not a function

awsjoaomp commented 1 year ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Not applicable

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 12.6.6 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 88.68 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.15.0 - /usr/local/bin/node npm: 9.5.0 - /usr/local/bin/npm Browsers: Chrome: 115.0.5790.114 Firefox: 102.13.0 Safari: 16.5.2 npmPackages: @aws-amplify/ui-react: ^3.6.1 => 3.6.1 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @testing-library/jest-dom: ^5.16.5 => 5.16.5 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 aws-amplify: ^4.3.46 => 4.3.46 bootstrap: ^5.2.2 => 5.2.3 formik: ^2.4.2 => 2.4.2 react: ^18.2.0 => 18.2.0 react-bootstrap: ^2.6.0 => 2.7.2 react-bootstrap/AbstractModalHeader: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionBody: undefined () react-bootstrap/AccordionButton: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionHeader: undefined () react-bootstrap/AccordionItem: undefined () react-bootstrap/AccordionItemContext: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Anchor: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardHeader: undefined () react-bootstrap/CardHeaderContext: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownContext: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/FloatingLabel: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFloating: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormRange: undefined () react-bootstrap/FormSelect: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/InputGroupContext: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarOffcanvas: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Offcanvas: undefined () react-bootstrap/OffcanvasBody: undefined () react-bootstrap/OffcanvasHeader: undefined () react-bootstrap/OffcanvasTitle: undefined () react-bootstrap/OffcanvasToggling: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Placeholder: undefined () react-bootstrap/PlaceholderButton: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverBody: undefined () react-bootstrap/PopoverHeader: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/Ratio: undefined () react-bootstrap/Row: undefined () react-bootstrap/SSRProvider: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Stack: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContainer: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastFade: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/TransitionWrapper: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createUtilityClasses: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/getInitialPopperStyles: undefined () react-bootstrap/getTabTransitionComponent: undefined () react-bootstrap/helpers: undefined () react-bootstrap/safeFindDOMNode: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/useOverlayOffset: undefined () react-bootstrap/usePlaceholder: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-dom: ^18.2.0 => 18.2.0 react-router-dom: ^6.4.3 => 6.9.0 react-scripts: 5.0.1 => 5.0.1 uuid: ^9.0.0 => 9.0.0 (3.4.0, 3.3.2, 8.3.2) web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: corepack: 0.15.3 npm: 9.5.0 ```

Describe the bug

I trying to create a sign in process with MFA, I am using the Auth.signIn function. The user object is returned and I received an SMS Code for MFA.

When trying to call the Auth.confirmSignIn function (passing the user object received from the Auth.signIn), I am receiving this error: "error signing in TypeError: user.sendMFACode is not a function".

The Sign Up and Sign In process works fine, but when calling the Confirm SignIn function results in error.

Expected behavior

The expected behavior is the Sign In process finish successfully using the Confirm Sign function (passing the user object, MFA Code received and the MFA Type)

Reproduction steps

Calling the Auth.ConfirmSignIn function

Code Snippet

// Put your code below this line.
import { Auth } from 'aws-amplify';

async function signInWithMFA() {
  try {
    const user = await Auth.signIn(username, password);
    if (
      user.challengeName === 'SMS_MFA' ||
      user.challengeName === 'SOFTWARE_TOKEN_MFA'
    ) {
      // You need to get the code from the UI inputs
      // and then trigger the following function with a button click.
      const code = getCodeFromUserInput();
      const mfaType = getMFATypeFromUserInput();
      // If MFA is enabled, sign-in should be confirmed with the confirmation code
      const loggedUser = await Auth.confirmSignIn(
        user, // Return object from Auth.signIn()
        code, // Confirmation code
        mfaType // MFA Type e.g. SMS_MFA, SOFTWARE_TOKEN_MFA
      );
      console.log(loggedUser)
    } else { 
      // The user directly signs in
    console.log(user)
    }
  } catch (error) {
    console.log(`error signing in`, error);
  }
};

Log output

``` // Put your logs below this line ```

aws-exports.js

export default {
    "REGION": "sa-east-1",
    "USER_POOL_ID": "sa-east-1_umQOAvjDg",
    "USER_POOL_APP_CLIENT_ID": "5ueqm0mcq4q5la368i7h0oduft"
}

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

cwomack commented 1 year ago

Hello, @awsjoaomp 👋. I believe this issue was opened due to #1411 being closed a couple years ago due to inactivity, but with no resolution provided. Is that right?

And can you confirm that you're currently on v4.3.46 of Amplify? If so, can you try upgrading to the latest version possibly and see if the issue persists?

cwomack commented 1 year ago

@awsjoaomp, just wanted to check in and see if you had a chance to upgrade to the most recent version of Amplify to see if you still experience this issue.

awsjoaomp commented 1 year ago

Hello Chris! Yes, I update amplify to the latest version and I also pass the user object directly to the API. That way it worked! Thank you very much and sorry for the delay.

cwomack commented 1 year ago

@awsjoaomp, that's great to hear! No worries, and feel free to comment back or create a new issue if you experience any other blockers.

aws-amplify / amplify-js