search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.41k stars 2.12k forks source link

Amplify Sign In HandleSubmit doesn't fire onAuthUIStateChange when a password challenge occurs #9371

Closed yojake42 closed 1 year ago

yojake42 commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 11.6.1 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 694.13 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.1.0 - ~/.asdf/installs/nodejs/16.1.0/bin/node npm: 7.11.2 - ~/.asdf/plugins/nodejs/shims/npm Browsers: Chrome: 92.0.4515.131 Safari: 14.1.2 npmPackages: @aws-amplify/ui-components: ^1.7.3 => 1.7.3 @aws-amplify/ui-react: ^1.2.10 => 1.2.10 @aws-sdk/client-cognito-identity: ^1.0.0-gamma.2 => 1.0.0-rc.10 (3.6.1) @aws-sdk/client-s3: ^1.0.0-gamma.2 => 1.0.0-rc.10 (3.6.1) @aws-sdk/credential-provider-cognito-identity: ^1.0.0-gamma.2 => 1.0.0-rc.10 (3.6.1) @bryntum/demo-resources: 1.0.1 => 1.0.1 @bryntum/gantt: 4.3.2 => 4.3.2 @bryntum/gantt-react: 4.3.2 => 4.3.2 @emotion/react: ^11.6.0 => 11.6.0 @emotion/styled: ^11.6.0 => 11.6.0 @material-ui/core: ^4.12.3 => 4.12.3 @material-ui/icons: ^4.11.2 => 4.11.2 @mui/icons-material: ^5.1.1 => 5.1.1 @mui/material: ^5.1.1 => 5.1.1 @primer/octicons-react: ^10.0.0 => 10.1.0 @rehooks/local-storage: ^2.4.1 => 2.4.1 @scope/sample: 1.0.0 @testing-library/jest-dom: ^4.2.4 => 4.2.4 @testing-library/react: ^9.5.0 => 9.5.0 @testing-library/user-event: ^7.2.1 => 7.2.1 ag-grid-base-icons: 1.0.0 ag-grid-community: 26.0.0 => 26.0.0 ag-grid-enterprise: 26.0.0 => 26.0.0 ag-grid-react: 26.0.0 => 26.0.0 amplify-ui-components-loader: undefined () aws-amplify: ^4.2.4 => 4.2.4 aws-sdk: ^2.958.0 => 2.974.0 bootstrap: ^4.6.0 => 4.6.0 dep-dep-file: undefined () dep-file: 0.0.1 dep-wildcard: undefined () eslint: ^6.8.0 => 6.8.0 eslint-config-airbnb: ^18.2.1 => 18.2.1 eslint-plugin-import: ^2.24.2 => 2.24.2 (2.20.1) eslint-plugin-jsx-a11y: ^6.4.1 => 6.4.1 (6.2.3) eslint-plugin-react: ^7.24.0 => 7.24.0 (7.19.0) eslint-plugin-react-hooks: ^1.7.0 => 1.7.0 ignore-scripts: undefined () jsonc: ^2.0.0 => 2.0.0 jsonpack: ^1.1.5 => 1.1.5 local-file: undefined () lzwcompress: ^1.1.0 => 1.1.0 md5: ^2.3.0 => 2.3.0 memo-parser: undefined (0.2.1) moment: ^2.29.1 => 2.29.1 plotly.js: ^1.54.6 => 1.58.5 plotly.js-dist: ^1.54.6 => 1.58.5 postinstall: ~0.7.0 => 0.7.3 react: ^16.13.1 => 16.14.0 react-bootstrap: ^1.5.2 => 1.6.1 react-bootstrap-icons: ^1.5.0 => 1.5.0 react-bootstrap/AbstractNav: undefined () react-bootstrap/AbstractNavItem: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionToggle: undefined () react-bootstrap/Alert: 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/CardColumns: undefined () react-bootstrap/CardContext: undefined () react-bootstrap/CardDeck: undefined () react-bootstrap/CardGroup: 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/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/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFile: undefined () react-bootstrap/FormFileInput: undefined () react-bootstrap/FormFileLabel: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/Jumbotron: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Media: 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/NavbarToggle: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverContent: undefined () react-bootstrap/PopoverTitle: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/ResponsiveEmbed: undefined () react-bootstrap/Row: undefined () react-bootstrap/SafeAnchor: undefined () react-bootstrap/SelectableContext: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabContext: 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/ToastContext: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/helpers: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/usePopperMarginModifiers: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-dom: ^16.13.1 => 16.14.0 react-dropzone: ^11.3.4 => 11.3.4 react-dropzone-uploader: ^2.11.0 => 2.11.0 react-export-excel: github:danlherman/react-export-excel#master => 0.5.3 react-icons: ^4.2.0 => 4.2.0 react-idle-timer: ^4.6.4 => 4.6.4 react-local-store: ^3.0.2 => 3.0.2 react-phone-number-input: ^3.1.35 => 3.1.35 react-phone-number-input-core: 1.0.0 react-phone-number-input-flags: 1.0.0 react-phone-number-input-input-core: 1.0.0 react-phone-number-input-input-max: 1.0.0 react-phone-number-input-input-min: 1.0.0 react-phone-number-input-input-mobile: 1.0.0 react-phone-number-input-max: 1.0.0 react-phone-number-input-min: 1.0.0 react-phone-number-input-mobile: 1.0.0 react-phone-number-input/react-hook-form: 1.0.0 react-phone-number-input/react-hook-form-core: 1.0.0 react-phone-number-input/react-hook-form-input: 1.0.0 react-phone-number-input/react-hook-form-input-core: 1.0.0 react-phone-number-input/react-native-input: 1.0.0 react-plotly.js: ^2.5.1 => 2.5.1 react-router-bootstrap: ^0.25.0 => 0.25.0 react-router-dom: ^5.1.2 => 5.2.0 react-scripts: 3.4.1 => 3.4.1 react-simple-tooltip: ^2.6.1 => 2.6.3 react-sticky-footer: 0.1.0-rc3 => 0.1.0-rc3 react-use-localstorage: ^3.5.3 => 3.5.3 reactjs-localstorage: ^1.0.1 => 1.0.1 sample: 1.0.0 sass: ~1.32.0 => 1.32.13 scoped-dep-file: undefined () throw: undefined () uuid: ^3.4.0 => 3.4.0 (3.3.2, 8.3.2) whitelist: undefined () npmGlobalPackages: license-checker: 25.0.1 playwright: 1.15.0 ```

Describe the bug

This bug has been crushing me for days before I felt the need to post this, but I've exhausted everything I can imagine.

I'm using all the default UI components for sign in/signup etc and using cognito for users. I need to determine when a sign in occurs via submitting the login form rather than refreshing the session. onAuthUIStateChange fires indistinguishably for both, and the only way I've been able to differentiate is from the handleSubmit override on the AmplifySignIn component. That said, if I create a new user in cognito, it requires a password change on first login. Calling Auth.signin does not trigger the state change in this case. With no handlesubmit override provided, it does fire the state change with a state of resettingpassword, and the UI changes to reflect that. It also works as expected when no challenges are present. I believe this to be a bug, but also highly appreciate any workarounds in the mean time.

Expected behavior

I expect that Auth.signIn would trigger the UI component's state change the same way that the default sign in does (no handleSubmit property), regardless of the presence of password/email challenges.

Reproduction steps

  1. Create a cognito user, or set an existing one to force_change_password
  2. Implement a handleSubmit function using Auth.signIn
  3. Attempt to login with that user using out of the box Amplify components with handleSubmit function set

Code Snippet

// Put your code below this line.
<AmplifyAuthContainer>
      <AmplifyAuthenticator initialAuthState={AuthState.SignIn}>
        <AmplifySignIn
          hideSignUp
          slot="sign-in"
          usernameAlias="email"
          handleSubmit={async(e)=> {
            e.preventDefault();
            const formData = new FormData(e.target);
            const formValues = Object.fromEntries(formData);
            const res = await Auth.signIn(formValues.email, formValues.password).catch((err) => console.log(err))
            console.log(res);
            if(res) {
              setHasLoggedIn(true);
            }
            return res
          }}
        />
      </AmplifyAuthenticator>
    </AmplifyAuthContainer>

Log output

without handleSubmit, onAuthUIStateChange logs nextAuthState: resettingpassword, AuthData: CognitoUser {...}

aws-exports.js

No response

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

The network response when there is a challenge: {“ChallengeName”:“NEW_PASSWORD_REQUIRED”,“ChallengeParameters”:{“requiredAttributes”:“[]“,”userAttributes”:“{\“email_verified\“:\“true\“,\“email\“:\“xxx@xxx.xxx\“}”},“Session”:“AYABeOhNfgLuKmA9I5R-MZtT97sAHQABAAdTZXJ2aWNlABBDb2duaXRvVXNlclBvb2xzAAEAB2F3cy1rbXMAS2Fybjphd3M6a21zOnVzLWVhc3QtMTo3NDU2MjM0Njc1NTU6a2V5L2IxNTVhZmNhLWJmMjktNGVlZC1hZmQ4LWE5ZTA5MzY1M2RiZQC4AQIBAHiAcAt7Ei832QLLvv5tnR-fAKEzaf-OMDg-j1aLh6qMVAHwKEp9Gc9aBjKEBJzi1PddAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMZ5C6nYpWwi8fJzalAgEQgDuuIeGJnGR9-wpSq98vEZ_ueLRQTE6ixpfijT8nSl_wJcKOQm6Mg1_3cXGjElwGVtHx_2rsrEUxnXHCHwIAAAAADAAAEAAAAAAAAAAAAAAAAACzsA-XvcIN8nrqLyuFR2qp_____wAAAAEAAAAAAAAAAAAAAAEAAADVA8wd7hZRb_0uexs_EZp3o-3khaIZ1p6G9VTlFrzTT6iT_vOkbD3Rbms2rLEKy5PU_9pvfozL9a8AoMYV1lwbmjvvQUVXmdzEqGLcGEKPw7vl4j24z5DHQJlzciDrM5o3zT-I_nKnxeHJZYij8mmgQXSV1oHbLbA-0DQ4576GDYa9oq2Yo-MBuUs-jwMgyKg3vS_Pl5xNOamtQ_l1buZQmk5s73nCXHE9ORzmlAsrrGjFLucAsDe2LcG5lFDkDzEeSSBKf2bloqBAj_qY2by5SDYthc5PA7YK-58AbGC1Nx5cDjIeMQ”}

tannerabread commented 1 year ago

Amplify UI components have been updated since this issue was written. We recommend using the new components over this old version. Check out the docs for that here!

If you are still experiencing this issue with the new components and in need of assistance, please feel free to comment and provide us with additional information so we can re-open this issue and be better able to assist you.

Thank you!