UI Component Flashes "Account recovery contact verification" even though user is verified, login is fine

[24601]

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

Angular

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` System: OS: macOS 11.2.3 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 61.60 MB / 64.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node Yarn: 1.22.10 - ~/GitHub/agileonboarding/node_modules/.bin/yarn npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Browsers: Chrome: 90.0.4430.85 Edge: 90.0.818.46 Firefox: 88.0 Safari: 14.0.3 npmPackages: @4tw/cypress-drag-drop: ^1.4.0 => 1.6.0 @angular-devkit/build-angular: ~0.1102.4 => 0.1102.6 @angular-eslint/eslint-plugin: ~1.0.0 => 1.0.0 @angular-eslint/eslint-plugin-template: ~1.0.0 => 1.0.0 @angular-eslint/template-parser: ~1.0.0 => 1.0.0 @angular/animations: ^11.2.6 => 11.2.8 @angular/animations/browser: undefined () @angular/animations/browser/testing: undefined () @angular/cdk: ^11.2.4 => 11.2.7 @angular/cdk/a11y: undefined () @angular/cdk/accordion: undefined () @angular/cdk/bidi: undefined () @angular/cdk/clipboard: undefined () @angular/cdk/coercion: undefined () @angular/cdk/collections: undefined () @angular/cdk/drag-drop: undefined () @angular/cdk/keycodes: undefined () @angular/cdk/layout: undefined () @angular/cdk/observers: undefined () @angular/cdk/overlay: undefined () @angular/cdk/platform: undefined () @angular/cdk/portal: undefined () @angular/cdk/scrolling: undefined () @angular/cdk/stepper: undefined () @angular/cdk/table: undefined () @angular/cdk/testing: undefined () @angular/cdk/testing/protractor: undefined () @angular/cdk/testing/testbed: undefined () @angular/cdk/text-field: undefined () @angular/cdk/tree: undefined () @angular/cli: ^11.2.2 => 11.2.6 @angular/common: ^11.2.5 => 11.2.8 @angular/common/http: undefined () @angular/common/http/testing: undefined () @angular/common/testing: undefined () @angular/common/upgrade: undefined () @angular/compiler: ^11.2.5 => 11.2.8 (9.0.0) @angular/compiler-cli: ^11.2.5 => 11.2.8 @angular/compiler/testing: undefined () @angular/core: ^11.2.5 => 11.2.8 (9.0.0) @angular/core/testing: undefined () @angular/forms: ^11.2.5 => 11.2.8 @angular/language-service: ^11.2.5 => 11.2.8 @angular/material: ^11.2.4 => 11.2.7 @angular/material-moment-adapter: ^11.2.4 => 11.2.7 @angular/material/autocomplete: undefined () @angular/material/autocomplete/testing: undefined () @angular/material/badge: undefined () @angular/material/badge/testing: undefined () @angular/material/bottom-sheet: undefined () @angular/material/bottom-sheet/testing: undefined () @angular/material/button: undefined () @angular/material/button-toggle: undefined () @angular/material/button-toggle/testing: undefined () @angular/material/button/testing: undefined () @angular/material/card: undefined () @angular/material/card/testing: undefined () @angular/material/checkbox: undefined () @angular/material/checkbox/testing: undefined () @angular/material/chips: undefined () @angular/material/chips/testing: undefined () @angular/material/core: undefined () @angular/material/core/testing: undefined () @angular/material/datepicker: undefined () @angular/material/datepicker/testing: undefined () @angular/material/dialog: undefined () @angular/material/dialog/testing: undefined () @angular/material/divider: undefined () @angular/material/divider/testing: undefined () @angular/material/expansion: undefined () @angular/material/expansion/testing: undefined () @angular/material/form-field: undefined () @angular/material/form-field/testing: undefined () @angular/material/form-field/testing/control: undefined () @angular/material/grid-list: undefined () @angular/material/grid-list/testing: undefined () @angular/material/icon: undefined () @angular/material/icon/testing: undefined () @angular/material/input: undefined () @angular/material/input/testing: undefined () @angular/material/list: undefined () @angular/material/list/testing: undefined () @angular/material/menu: undefined () @angular/material/menu/testing: undefined () @angular/material/paginator: undefined () @angular/material/paginator/testing: undefined () @angular/material/progress-bar: undefined () @angular/material/progress-bar/testing: undefined () @angular/material/progress-spinner: undefined () @angular/material/progress-spinner/testing: undefined () @angular/material/radio: undefined () @angular/material/radio/testing: undefined () @angular/material/select: undefined () @angular/material/select/testing: undefined () @angular/material/sidenav: undefined () @angular/material/sidenav/testing: undefined () @angular/material/slide-toggle: undefined () @angular/material/slide-toggle/testing: undefined () @angular/material/slider: undefined () @angular/material/slider/testing: undefined () @angular/material/snack-bar: undefined () @angular/material/snack-bar/testing: undefined () @angular/material/sort: undefined () @angular/material/sort/testing: undefined () @angular/material/stepper: undefined () @angular/material/stepper/testing: undefined () @angular/material/table: undefined () @angular/material/table/testing: undefined () @angular/material/tabs: undefined () @angular/material/tabs/testing: undefined () @angular/material/toolbar: undefined () @angular/material/toolbar/testing: undefined () @angular/material/tooltip: undefined () @angular/material/tooltip/testing: undefined () @angular/material/tree: undefined () @angular/material/tree/testing: undefined () @angular/platform-browser: ^11.2.5 => 11.2.8 @angular/platform-browser-dynamic: ^11.2.5 => 11.2.8 @angular/platform-browser-dynamic/testing: undefined () @angular/platform-browser/animations: undefined () @angular/platform-browser/testing: undefined () @angular/router: ^11.2.5 => 11.2.8 @angular/router/testing: undefined () @angular/router/upgrade: undefined () @apollo/client: ^3.2.5 => 3.3.13 @apollo/client/cache: undefined () @apollo/client/core: undefined () @apollo/client/errors: undefined () @apollo/client/link/batch: undefined () @apollo/client/link/batch-http: undefined () @apollo/client/link/context: undefined () @apollo/client/link/core: undefined () @apollo/client/link/error: undefined () @apollo/client/link/http: undefined () @apollo/client/link/persisted-queries: undefined () @apollo/client/link/retry: undefined () @apollo/client/link/schema: undefined () @apollo/client/link/utils: undefined () @apollo/client/link/ws: undefined () @apollo/client/react: undefined () @apollo/client/react/components: undefined () @apollo/client/react/context: undefined () @apollo/client/react/data: undefined () @apollo/client/react/hoc: undefined () @apollo/client/react/hooks: undefined () @apollo/client/react/parser: undefined () @apollo/client/react/ssr: undefined () @apollo/client/testing: undefined () @apollo/client/utilities: undefined () @aws-amplify/ui-angular: ^1.0.7 => 1.0.7 @aws-cdk/aws-cloudtrail: ^1.100.0 => 1.100.0 @aws-cdk/aws-events: ^1.100.0 => 1.100.0 @commitlint/cli: ^12.0.1 => 12.1.1 @commitlint/config-conventional: ^12.0.1 => 12.1.1 @commitlint/load: ^12.0.1 => 12.1.1 @fortawesome/angular-fontawesome: ^0.8.1 => 0.8.2 @fortawesome/angular-fontawesome/testing: undefined () @fortawesome/fontawesome-free: ^5.15.2 => 5.15.3 @fortawesome/fontawesome-svg-core: ^1.2.32 => 1.2.35 @fortawesome/free-solid-svg-icons: ^5.15.1 => 5.15.3 @jurijzahn8019/aws-sdk-paginate-list: ^1.0.3 => 1.0.18 @ng-idle/core: ^10.0.0-beta.1 => 10.0.0-beta.1 @ng-idle/keepalive: 10.0.0-beta.1 => 10.0.0-beta.1 @ng-select/ng-select: ^6.1.0 => 6.1.0 @ng-web-apis/common: ^1.9.0 => 1.9.0 @ng-web-apis/intersection-observer: ^2.1.0 => 2.1.0 @nrwl/angular: 11.2.12 => 11.2.12 @nrwl/angular/testing: undefined () @nrwl/cli: 11.2.12 => 11.2.12 @nrwl/cypress: 11.2.12 => 11.2.12 @nrwl/eslint-plugin-nx: 11.2.12 => 11.2.12 @nrwl/jest: 11.2.12 => 11.2.12 @nrwl/linter: 11.2.12 => 11.2.12 @nrwl/node: 11.2.12 => 11.2.12 @nrwl/nx-cloud: latest => 11.2.0 @nrwl/tao: 11.2.12 => 11.2.12 @nrwl/workspace: 11.2.12 => 11.2.12 @octokit/core: ^3.2.5 => 3.3.2 @octokit/rest: ^18.5.2 => 18.5.2 @types/chart.js: ^2.9.19 => 2.9.31 @types/datatables.net: ^1.10.18 => 1.10.19 @types/datatables.net-buttons: ^1.4.3 => 1.4.5 @types/datatables.net-select: ^1.2.6 => 1.2.6 @types/faker: ^4.1.9 => 4.1.12 @types/gapi: 0.0.39 => 0.0.39 @types/html-pdf: ^2.2.0 => 2.2.0 @types/jasmine: ^3.6.0 => 3.6.9 @types/jasmine-given: ^2.6.4 => 2.6.4 @types/jasminewd2: ~2.0.8 => 2.0.8 @types/jest: 26.0.8 => 26.0.8 @types/jquery: ^3.3.32 => 3.5.5 @types/jspdf: ^1.3.3 => 1.3.3 @types/node: 12.12.38 => 12.12.38 (14.14.37, 12.12.50) @types/uuid: ^3.4.7 => 3.4.9 @types/video.js: ^7.3.10 => 7.3.15 @typescript-eslint/eslint-plugin: 4.3.0 => 4.3.0 @typescript-eslint/parser: 4.3.0 => 4.3.0 angular-animations: ^0.11.0 => 0.11.0 angular-bootstrap-md: ^10.1.1 => 10.1.1 angular-calendar: ^0.28.16 => 0.28.22 angular-email-editor: ^0.7.1 => 0.7.1 angular-froala-wysiwyg: ^3.2.1-1 => 3.2.6 angular-google-charts: ^2.0.1 => 2.0.1 angular-mentions: ^1.1.3 => 1.3.0 angular-page-visibility: ^9.0.0 => 9.0.6 angular-plotly.js: ^2.0.0 => 2.0.0 angular-resizable-element: ^3.3.3 => 3.3.5 angular-user-idle: ^2.2.2 => 2.2.5 angular2-query-builder: 0.0.1 angular2-query-builder-operator-labels: ^0.6.2 => 0.6.2 angularx-flatpickr: ^6.4.0 => 6.5.2 angularx-social-login: ^2.2.1 => 2.3.1 animate.css: ^3.7.2 => 3.7.2 apollo: ^2.29.1 => 2.32.5 apollo-angular: ^2.1.0 => 2.4.0 apollo-angular-link-http: ^1.11.0 => 1.11.0 apollo-angular/headers: undefined () apollo-angular/http: undefined () apollo-angular/persisted-queries: undefined () apollo-angular/testing: undefined () apollo-cache-inmemory: ^1.6.5 => 1.6.6 apollo-link: ^1.2.13 => 1.2.14 apollo-link-context: ^1.0.20 => 1.0.20 apollo-link-error: ^1.1.13 => 1.1.13 apollo-link-http: ^1.5.17 => 1.5.17 apollo-link-persisted-queries: ^0.2.2 => 0.2.2 apollo-link-retry: ^2.2.16 => 2.2.16 apollo-link-state: ^0.4.2 => 0.4.2 apollo-link-ws: ^1.0.19 => 1.0.20 apollo-upload-client: ^13.0.0 => 13.0.0 at.js: ^1.5.4 => 1.5.4 autosize: ^4.0.2 => 4.0.2 awesome-phonenumber: ^2.33.0 => 2.48.0 aws-amplify: ^3.3.26 => 3.3.26 aws-api-gateway-client: ^0.3.6 => 0.3.7 aws-sdk: ^2.616.0 => 2.878.0 aws-sdk-mock: ^5.1.0 => 5.1.0 axios: ^0.21.1 => 0.21.1 boolean-parser: 0.0.2 => 0.0.2 bootstrap: ^4.4.1 => 4.6.0 bootstrap-slider: ^11.0.2 => 11.0.2 (10.6.2) browser-or-node: ^1.2.1 => 1.3.0 buffer: ^5.6.0 => 5.7.1 (4.9.2) c3: ^0.7.15 => 0.7.20 canonical-json: 0.0.4 => 0.0.4 chart.js: ^2.9.3 => 2.9.4 classlist.js: ^1.1.20150312 => 1.1.20150312 codelyzer: ^6.0.1 => 6.0.1 coffeeify: ^3.0.1 => 3.0.1 coffeescript: ^2.5.1 => 2.5.1 commitlint-config-jira: ^1.4.1 => 1.5.1 commitlint-plugin-jira-rules: ^1.4.0 => 1.5.1 compromise: ^13.5.0 => 13.10.5 concurrently: ^5.3.0 => 5.3.0 conventional-recommended-bump: ^6.0.11 => 6.1.0 core-js: ^3.6.5 => 3.10.0 (3.8.3, 2.6.12) create-hmac: ^1.1.7 => 1.1.7 crypto-js: ^3.3.0 => 3.3.0 (4.0.0) cypress: ^6.6.0 => 6.8.0 cypress-file-upload: ^4.1.1 => 4.1.1 cypress-localstorage-commands: ^1.2.4 => 1.4.2 cypress-mochawesome-reporter: ^1.3.0 => 1.3.0 cypress-multi-reporters: ^1.4.0 => 1.4.0 cypress-parallel: ^0.1.8 => 0.1.9 cypress-pipe: ^2.0.0 => 2.0.0 cz-conventional-changelog: ^3.3.0 => 3.3.0 (3.2.0) d3: ^5.16.0 => 5.16.0 (3.5.17) datatables.net: ^1.10.20 => 1.10.24 datatables.net-bs4: ^1.10.20 => 1.10.24 datatables.net-buttons: ^1.6.1 => 1.7.0 datatables.net-buttons-dt: ^1.6.1 => 1.7.0 datatables.net-colreorder: ^1.5.2 => 1.5.3 datatables.net-colreorder-dt: ^1.5.2 => 1.5.3 datatables.net-dt: ^1.10.20 => 1.10.24 datatables.net-editor: ^1.6.5 => 1.6.5 datatables.net-fixedheader: ^3.1.6 => 3.1.8 datatables.net-fixedheader-dt: ^3.1.6 => 3.1.8 datatables.net-jqui: ^1.10.21 => 1.10.24 datatables.net-responsive: ^2.2.3 => 2.2.7 datatables.net-responsive-dt: ^2.2.3 => 2.2.7 datatables.net-select: ^1.3.1 => 1.3.3 datatables.net-select-dt: ^1.3.1 => 1.3.3 date-fns: ^2.14.0 => 2.19.0 (1.30.1) dateformat: ^3.0.3 => 3.0.3 docx: ^5.4.1 => 5.5.0 dotenv: 6.2.0 => 6.2.0 (8.2.0) downloadjs: ^1.4.7 => 1.4.7 eslint: 7.10.0 => 7.10.0 eslint-config-airbnb: ^18.2.0 => 18.2.1 eslint-config-prettier: 6.0.0 => 6.0.0 eslint-plugin-cypress: ^2.10.3 => 2.11.2 eslint-plugin-import: ^2.22.0 => 2.22.1 eslint-plugin-jsx-a11y: ^6.3.1 => 6.4.1 eslint-plugin-react: ^7.20.3 => 7.23.1 eslint-plugin-react-hooks: ^4.0.0 => 4.2.0 factory.ts: ^0.5.1 => 0.5.1 faker: ^4.1.0 => 4.1.0 fetch: ^1.1.0 => 1.1.0 ffmpeg.js: ^4.2.9003 => 4.2.9003 file-saver: ^2.0.5 => 2.0.5 (1.3.8) font-awesome: ^4.7.0 => 4.7.0 github-api: ^3.4.0 => 3.4.0 google-charts: ^2.0.0 => 2.0.0 google-geo-decoder: ^1.0.7 => 1.0.7 graphql: ^14.6.0 => 14.7.0 (14.0.0) hammerjs: ^2.0.8 => 2.0.8 handlebars: ^4.7.6 => 4.7.7 hasura-cli: ^2.0.0-alpha.4 => 2.0.0-alpha.7 html-docx-js: ^0.3.1 => 0.3.1 html-pdf: ^2.2.0 => 2.2.0 html-to-pdfmake: ^1.2.1 => 1.3.6 html-to-text: ^5.1.1 => 5.1.1 html2pdf.js: ^0.9.2 => 0.9.2 humanparser: ^1.11.0 => 1.11.0 husky: ^4.3.8 => 4.3.8 immutability-helper: ^3.0.1 => 3.1.1 jasmine: ^3.5.0 => 3.7.0 jasmine-auto-spies: ^6.9.2 => 6.9.3 jasmine-core: ~3.5.0 => 3.5.0 (3.7.1) jasmine-es6-spies: 0.0.4 => 0.0.4 jasmine-given: ^2.6.4 => 2.6.4 jasmine-spec-reporter: ~5.0.0 => 5.0.2 jest: 26.2.2 => 26.2.2 jest-preset-angular: 8.3.2 => 8.3.2 jira-client: ^6.21.1 => 6.21.1 jira-prepare-commit-msg: ^1.5.2 => 1.5.2 jira.js: ^1.7.3 => 1.8.0 jquery: ^3.5.1 => 3.6.0 jquery-ui: ^1.12.1 => 1.12.1 jquery-ui-dist: ^1.12.1 => 1.12.1 js-coroutines: ^2.3.67 => 2.4.24 json-to-graphql-query: ^2.0.0 => 2.0.0 jspdf: ^2.2.0 => 2.3.1 (1.5.3) jwt-check-expiration: ^1.0.5 => 1.0.5 karma: ~5.1.1 => 5.1.1 karma-chrome-launcher: ~3.1.0 => 3.1.0 karma-coverage-istanbul-reporter: ~3.0.2 => 3.0.3 karma-jasmine: ~4.0.0 => 4.0.1 karma-jasmine-given: ^0.1.1 => 0.1.1 karma-jasmine-html-reporter: ^1.5.0 => 1.5.4 karma-json-reporter: ^1.2.1 => 1.2.1 karma-junit-reporter: ^2.0.1 => 2.0.1 karma-mocha-reporter: ^2.2.5 => 2.2.5 karma-structured-json-reporter: ^1.0.1 => 1.0.1 lib: 0.0.1 lint-staged: ^10.5.4 => 10.5.4 lodash: ^4.17.19 => 4.17.21 logrocket: ^1.0.14 => 1.0.14 mammoth: ^1.4.9 => 1.4.16 mat-table-exporter: ^9.0.2 => 9.1.0 mdbootstrap: ^4.19.1 => 4.19.2 memo-parser: 0.2.1 mochawesome: ^6.2.1 => 6.2.2 mochawesome-merge: ^4.2.0 => 4.2.0 mochawesome-report-generator: ^5.1.0 => 5.2.0 moment: ^2.29.1 => 2.29.1 moment-range: ^4.0.2 => 4.0.2 ng-keyboard-shortcuts: ^10.1.16 => 10.1.17 ng-multiselect-dropdown: ^0.3.1 => 0.3.4 ng-packagr: ^11.2.4 => 11.2.4 ng-table-virtual-scroll: ^1.3.4 => 1.3.5 ng2-charts: ^2.3.2 => 2.4.2 ng2-dragula: ^2.1.1 => 2.1.1 ng2-file-upload: ^1.4.0 => 1.4.0 ng2-pdf-viewer: ^6.4.0 => 6.4.1 ngx-bootstrap: ^5.3.2 => 5.6.2 ngx-bootstrap-slider: ^1.9.0 => 1.9.0 ngx-bootstrap/accordion: 5.6.2 ngx-bootstrap/alert: 5.6.2 ngx-bootstrap/buttons: 5.6.2 ngx-bootstrap/carousel: 5.6.2 ngx-bootstrap/chronos: 5.6.2 ngx-bootstrap/collapse: 5.6.2 ngx-bootstrap/component-loader: 5.6.2 ngx-bootstrap/datepicker: 5.6.2 ngx-bootstrap/dropdown: 5.6.2 ngx-bootstrap/locale: 5.6.2 ngx-bootstrap/mini-ngrx: 5.6.2 ngx-bootstrap/modal: 5.6.2 ngx-bootstrap/pagination: 5.6.2 ngx-bootstrap/popover: 5.6.2 ngx-bootstrap/positioning: 5.6.2 ngx-bootstrap/progressbar: 5.6.2 ngx-bootstrap/rating: 5.6.2 ngx-bootstrap/sortable: 5.6.2 ngx-bootstrap/tabs: 5.6.2 ngx-bootstrap/timepicker: 5.6.2 ngx-bootstrap/tooltip: 5.6.2 ngx-bootstrap/typeahead: 5.6.2 ngx-bootstrap/utils: 5.6.2 ngx-chips: ^2.1.0 => 2.2.2 ngx-color-picker: ^11.0.0 => 11.0.0 ngx-contextmenu: ^5.4.0 => 5.4.0 ngx-cookie-service: ^11.0.2 => 11.0.2 ngx-device-detector: ^2.0.6 => 2.0.6 ngx-doc-viewer: ^2.0.2 => 2.0.2 ngx-google-places-autocomplete: ^2.0.4 => 2.0.5 ngx-image-cropper: ^3.3.5 => 3.3.5 ngx-mat-select-search: ^3.2.0 => 3.2.0 ngx-moment: ^4.0.1 => 4.0.1 ngx-perfect-scrollbar: ^8.0.0 => 8.0.0 ngx-select-ex: ^5.0.3 => 5.0.3 ngx-skeleton-loader: ^2.6.1 => 2.9.1 ngx-sortablejs: ^3.1.4 => 3.1.4 ngx-spinner: ^8.1.0 => 8.1.0 node-example: 1.0.0 node-geocoder: ^3.27.0 => 3.27.0 p-limit: ^3.1.0 => 3.1.0 (2.3.0, 1.3.0) p-queue: ^6.4.0 => 6.6.2 patch-package: ^6.4.7 => 6.4.7 pdfmake: ^0.1.64 => 0.1.70 pg: ^8.5.1 => 8.5.1 plotly: ^1.0.6 => 1.0.6 plotly.js: ^1.54.7 => 1.58.4 popper.js: ^1.16.1 => 1.16.1 postcss: ^8.2.1 => 8.2.9 (8.2.4, 7.0.35, 7.0.21) prettier: 2.2.1 => 2.2.1 pretty-quick: ^3.0.2 => 3.1.0 protractor-example: 1.0.0 puppeteer: ^5.5.0 => 5.5.0 queueing-subject: ^0.3.4 => 0.3.4 rxjs: ~6.6.3 => 6.6.7 (6.6.3, 6.5.5) rxjs-websockets: ^8.0.0 => 8.0.1 rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () session-storage-cache: ^1.0.4 => 1.0.4 shuffle-seed: ^1.1.6 => 1.1.6 sortablejs: ^1.10.2 => 1.13.0 start-server-and-test: ^1.11.3 => 1.12.1 stats-lite: ^2.2.0 => 2.2.0 stopword: ^1.0.3 => 1.0.7 string-strip-html: ^6.0.0 => 6.3.0 subscriptions-transport-ws: ^0.9.16 => 0.9.18 svg-to-pdfkit: ^0.1.8 => 0.1.8 throttle-debounce: ^2.1.0 => 2.3.0 tributejs: ^4.1.1 => 4.1.3 ts-jest: 26.4.0 => 26.4.0 ts-node: ~9.1.1 => 9.1.1 (8.10.2) tslib: ^2.0.0 => 2.1.0 (1.14.1) tslint: ~6.1.0 => 6.1.3 typescript: ^4.1.2 => 4.2.3 (4.1.5) typescript-example: 1.0.0 uuid: ^3.4.0 => 3.4.0 (8.3.2, 3.3.2) videojs-record: ^4.1.0 => 4.3.0 wait-on: ^5.2.0 => 5.3.0 web-animations-js: ^2.3.2 => 2.3.2 ws: ^7.2.5 => 7.4.4 (6.2.1, 5.2.2) xlsx: ^0.15.6 => 0.15.6 (0.14.5) xml-js: ^1.6.11 => 1.6.11 zone.js: ^0.10.2 => 0.10.3 npmGlobalPackages: npm: 6.14.12 ```

Describe the bug

Occasionally, especially on new browsers/incognito browsers/anonymous browsers where the user has not logged in recently, a brief flash of the 'Account recovery contact verification' screen occurs. It is brief and then the app transitions away, no problem.

But it is there long enough to be very disconcerting to users. We are fielding tons of support requests about this.

See video below (sensitive info redacted, but you will be able to see the quick flash in the middle of the video that is about .5s long, sometimes it is longer, sometimes it doesn't happen).

We have attempted to use both the handleAuthStateChange method and the Hub listener method to detect an auth state change to react to this quickly, and we do act very quickly, but this still occurs (e.g. no long async methods in the state transition, just literally a router.navigate.

We have found that commenting out the line at https://github.com/aws-amplify/amplify-js/blob/df95ea3724eb6406f64b03f25086cd3e8644cb5f/packages/amplify-ui-components/src/common/auth-helpers.ts#L25 avoids this problem, BUT, of course, defeats the whole ability to use contact verification in the UI package, because it never allows a transition into that state. Which is OK for our current use, but that will not fly forever. It seems the logic that transitions the state machine into this state is spurious.

Expected behavior

A normal, successful login for a user with verified info should not flash this information.

Reproduction steps

Login

Code Snippet

We have tried both methods, they yield the same issue.

Hub listener

    const listener = (data) => {
      switch (data.payload.event) {
        case 'signIn':
          this.userService.clearCaches().then(() => this.navigateToHome());
          break;

      }
    };

    Hub.listen('auth', listener);

handleAuthStateChange

        <!-- AWS is due to merge a PR so we don't have to hack the "create account" signin, 
        but this isn't released yet, when it is, this is will be the way, not the CSS hack. -->

        <amplify-sign-in slot="sign-in" usernameAlias="email">
          <div slot="secondary-footer-content"></div>
        </amplify-sign-in>
      </amplify-authenticator>
    </div>```

### Log output

<details>

// Put your logs below this line

</details>

### aws-exports.js

```/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:5d148b0b-70bb-4413-8979-435b3e384904",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_iGCxzwvxB",
    "aws_user_pools_web_client_id": "4obpouae45f2gnohrpt0um8s30",
    "oauth": {}
};

export default awsmobile;

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

https://www.dropbox.com/s/fp0aco1fo297ekq/AmplifyUIBug.mp4?dl=0

[24601]

PS - Our workaround has gotten even more painful, we are using patch-package to literally replace any instance of handleAuthStateChange(AuthState.VerifyContact, newUser); in the lib with handleAuthStateChange(AuthState.SignedIn, user);

The state machine that controls this is horribly broken. There is no valid reason at all to transition the state machine into AuthState.VerifyContact when the contact info is totally validated and always has been. Absolutely no exception.

Please fix it so we don't have to keep forking or monkey patching libs to get them to basically work they way they should at 1.0.

Yes, I am frustrated. Amplify and AWS are not free little open source projects. They are marketed as enterprise-grade frameworks and integrations for production-grade AWS services that accelerate development and improve user and developer experience. This is exactly the opposite of both. Especially when it isn't fixed quickly (such a basic defect should never have made it out of unit test, frankly!).

[chrisbonifacio]

@24601 If you can still reproduce this issue consistently, would you mind console logging the data.payload from the Hub listener when attempting to login and posting the results here. The main things we are looking for are whether the verifyContact event is being triggered as well as whether the user data contains verified or unverified properties at any point during your login process.

[eddiekeller]

Hey @24601 , I'm sorry you're having this issue and that nobody has addressed it yet. I'm looking into it but I can't reproduce it on my end. If you can log what @chrisbonifacio mentioned above, that might help me debug this a bit better.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.