amplify-js
amplify-js copied to clipboard
Published
20 hours ago •
aws-amplify
aws-amplify
MFA Enable/Disable using setUserMfaPreference doesn't sync with AWS cognito
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
React
Amplify APIs
Not applicable
Amplify Categories
No response
Environment information
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 3.22 GB / 15.76 GB
Binaries:
Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44)
Internet Explorer: 11.0.19041.1566
npmPackages:
@babel/code-frame: ^7.10.4 => 7.16.7 (7.5.5)
@babel/core: ^7.3.4 => 7.17.10
@babel/plugin-proposal-class-properties: ^7.3.4 => 7.16.7
@babel/plugin-proposal-nullish-coalescing-operator: ^7.10.1 => 7.16.7
@babel/plugin-proposal-object-rest-spread: ^7.10.1 => 7.17.3
@babel/plugin-proposal-optional-chaining: ^7.10.1 => 7.16.7
@babel/preset-env: ^7.10.2 => 7.17.10
@babel/preset-react: ^7.10.1 => 7.16.7
@date-io/date-fns: ^1.3.13 => 1.3.13
@hookform/resolvers: ^0.1.0 => 0.1.1
@material-ui/core: ^4.11.3 => 4.12.4
@material-ui/icons: ^4.11.2 => 4.11.3
@material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.61
@material-ui/pickers: ^3.2.10 => 3.3.10
@storybook/addon-actions: ^5.3.19 => 5.3.21
@storybook/addon-console: ^1.2.1 => 1.2.3
@storybook/addon-knobs: ^5.3.19 => 5.3.21
@storybook/addon-links: ^5.3.19 => 5.3.21
@storybook/addon-storysource: ^5.3.19 => 5.3.21
@storybook/addons: ^5.3.19 => 5.3.22 (5.3.21)
@storybook/react: ^5.3.19 => 5.3.21
@storybook/theming: ^5.3.19 => 5.3.22 (5.3.21)
@testing-library/react: ^10.4.3 => 10.4.9
@wojtekmaj/react-daterange-picker: ^3.1.0 => 3.4.0
amazon-cognito-identity-js: ^4.5.7 => 4.6.3
axios: ^0.18.1 => 0.18.1
babel-eslint: ^10.1.0 => 10.1.0
babel-jest: ^26.0.1 => 26.6.3
babel-loader: ^8.0.5 => 8.2.5
bootstrap: ^4.5.3 => 4.6.1
copy-webpack-plugin: ^6.0.2 => 6.4.1
cross-env: ^7.0.2 => 7.0.3
css-loader: ^2.1.1 => 2.1.1 (3.6.0)
custom-env: ^2.0.1 => 2.0.1
date-fns: ^2.16.1 => 2.28.0
demo: 1.0.1
eslint: ^5.16.0 => 5.16.0
eslint-config-airbnb: ^18.2.0 => 18.2.1
eslint-config-prettier: ^6.11.0 => 6.15.0
eslint-import-resolver-alias: ^1.1.2 => 1.1.2
eslint-plugin-import: ^2.22.1 => 2.26.0
eslint-plugin-jsx-a11y: ^6.3.1 => 6.5.1
eslint-plugin-react: ^7.21.2 => 7.29.4
eslint-plugin-react-hooks: ^1.7.0 => 1.7.0
file-loader: ^6.2.0 => 6.2.0 (4.3.0)
html-webpack-plugin: ^4.3.0 => 4.5.2
image-webpack-loader: ^6.0.0 => 6.0.0
jest: ^26.0.1 => 26.6.3
jsonwebtoken: ^8.5.1 => 8.5.1
mini-css-extract-plugin: ^0.7.0 => 0.7.0
moment: ^2.29.1 => 2.29.3
node-sass: ^4.14.1 => 4.14.1
npm-run-all: ^4.1.5 => 4.1.5
prop-types: ^15.7.2 => 15.8.1
react: ^16.8.4 => 16.14.0
react-bootstrap: ^1.4.0 => 1.6.4
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-csv: ^2.0.3 => 2.2.2
react-date-picker: ^8.1.1 => 8.4.0
react-dom: ^16.8.4 => 16.14.0
react-ga4: ^1.0.2 => 1.4.1
react-hook-form: ^6.13.1 => 6.15.8
react-icons: ^4.3.1 => 4.3.1
react-iframe: ^1.8.0 => 1.8.0
react-infinite-scroller: ^1.2.4 => 1.2.6
react-phone-input-2: ^2.15.0 => 2.15.0
react-pro-sidebar: ^0.5.0 => 0.5.0
react-router-dom: ^5.2.0 => 5.3.1
react-test-renderer: ^16.13.1 => 16.14.0
react-to-print: ^2.12.6 => 2.14.7
reactjs-popup: ^2.0.5 => 2.0.5
redux: ^4.0.5 => 4.2.0
sass-loader: ^7.1.0 => 7.3.1
style-loader: ^1.2.1 => 1.3.0
styled-components: ^5.3.0 => 5.3.5
styled-components/macro: undefined ()
styled-components/native: undefined ()
styled-components/primitives: undefined ()
url-loader: ^4.1.1 => 4.1.1 (2.3.0)
webpack: ^4.29.6 => 4.46.0
webpack-cli: ^3.3.12 => 3.3.12
webpack-dev-server: ^3.2.1 => 3.11.3
yup: ^0.32.8 => 0.32.11
npmGlobalPackages:
expo-cli: 5.3.1
mirror-config-china: 2.5.1
node-sass: 7.0.1
react-native: 0.68.1
Describe the bug
We have a cognito user pool which has MFA as optional. When we enable the MFA through React web application for a user through the SDK(using setUserMfaPreference method), the status in AWS console is not reflecting the same. The console UI doesn't have any effect. It always shows as disabled. Also when we disable MFA for the same user from AWS cognito, UI the frontend application still persist the previous status(enabled) and prompt the user for MFA code .
Expected behavior
Whenever the user Enable/Disable the MFA Status using this SDK, AWS Cognito userpool should reflect the changes in MFA Status section.
Reproduction steps
- Install package (npm i amazon-cognito-identity-js)
- signUp a user with email, password (signUp)
- Add a mobile number for that user and verify the mobile number (updateAttributes & getAttributeVerificationCode)
- Once verified, Enable the MFA (setUserMfaPreference)
- Try login for this user, it will ask MFA code.
- Now login into AWS and open the user profile in cognito user pool
- MFA status will be shown as disabled
Code Snippet
var smsMfaSettings = {
PreferredMfa: true,
Enabled: true,
};
cognitoUser.setUserMfaPreference(smsMfaSettings, null, function(err, result) {
if (err) {
console.log(err);
return;
}
console.log(result);
return result;
})
Log output
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
Chrome
Mobile Browser Version
No response
Additional information and screenshots
No response
@YazhiniGurubaran Hello, I've tried to reproduce your issue, but it seems to be only reproducible using the older user interface for the Amazon Cognito Console, and behaves as expected on the new Amazon Cognito Console interface. I was wondering if you were using the older Cognito Console and referencing SMS MFA method which would look like the below image:
If this is the case is it possible you could switch to the new console, and see if the same issue persists using the MFA setting and MFA method instead:
Since if it is not reproducible in the new console this may have something to do with a deprecated parameter. Please let me know if I misunderstood anything, and if you experience the issue on the newer console interface let me know. Also if possible could you expand on where you mention
Also when we disable MFA for the same user from AWS cognito, UI the front end application still persist the previous status(enabled) and prompt the user for MFA code
If I understand correctly you try to disable it through the AWS console, and it still returns the callback requesting an MFA code.
Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.
Thank you!
