Amplify-js: Account recovery contact verification is broken on aws-amplify-react since 4.1.20

[mfferreira]

Describe the bug
Account recovery contact verification is broken on aws-amplify-react since 4.1.20.

To Reproduce
Steps to reproduce the behavior:

1. Install [email protected] or [email protected]
2. Have a component wrapped in withAuthenticator
3. Login with a freshly created account, and you'll be thrown right into your app component instead of the "Account recovery requires verified contact information" form

Expected behavior
After logging in, it is expected to be presented with the form "Account recovery requires verified contact information", that look something like this:

What is Configured?
```
import Amplify from '@aws-amplify/core'

Amplify.configure({
region: process.env.AWS_REGION,
userPoolId: process.env.AWS_USER_POOL_ID,
userPoolWebClientId: process.env.AWS_USERPOOL_WEBCLIENT_ID
})

```

Environment

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 217.07 MB / 16.00 GB
    Shell: 3.1.2 - /usr/local/bin/fish
  Binaries:
    Node: 12.16.3 - /var/folders/5s/1t5kw3r54ps7k4mc4t630myc0000gn/T/fnm-shell-8519761/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /var/folders/5s/1t5kw3r54ps7k4mc4t630myc0000gn/T/fnm-shell-8519761/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 84.1.11.104
    Chrome: 84.0.4147.105
    Chrome Canary: 86.0.4220.0
    Firefox: 78.0.2
    Safari: 14.0
  npmPackages:
    @mdx-js/loader: ^1.6.16 => 1.6.16 
    @next/bundle-analyzer: ^9.5.1 => 9.5.1 
    @next/mdx: ^9.5.1 => 9.5.1 
    @openapitools/openapi-generator-cli: ^1.0.15-4.3.1 => 1.0.15-4.3.1 
    @sentry/browser: ^5.20.1 => 5.20.1 
    @stripe/react-stripe-js: ^1.1.2 => 1.1.2 
    @stripe/stripe-js: ^1.8.0 => 1.8.0 
    @types/js-cookie: ^2.2.4 => 2.2.4 
    @types/lodash.throttle: ^4.1.6 => 4.1.6 
    @types/mdx-js__react: ^1.5.1 => 1.5.1 
    @types/node: ^12.12.11 => 12.12.11 
    @types/styled-components: ^4.4.0 => 4.4.0 
    @types/styled-system: ^5.1.4 => 5.1.4 
    @types/uuid: ^7.0.2 => 7.0.2 
    @typescript-eslint/eslint-plugin: ^2.21.0 => 2.21.0 
    @typescript-eslint/parser: ^2.21.0 => 2.21.0 
    @zeit/next-css: 1.0.1 => 1.0.1 
    antd: 3.25.2 => 3.25.2 
    aws-amplify: ^3.0.22 => 3.0.22 
    aws-amplify-react: 4.1.20 => 4.1.20 
    axios: ^0.19.2 => 0.19.2 
    babel-plugin-styled-components: ^1.10.6 => 1.10.6 
    currency-symbol-map: ^4.0.4 => 4.0.4 
    date-fns: ^2.9.0 => 2.9.0 
    dotenv: ^8.2.0 => 8.2.0 
    easy-peasy: ^3.3.1 => 3.3.1 
    eslint: ^6.7.0 => 6.7.0 
    eslint-config-standard: ^14.1.0 => 14.1.0 
    eslint-config-standard-jsx: ^8.1.0 => 8.1.0 
    eslint-plugin-import: ^2.18.2 => 2.18.2 
    eslint-plugin-node: ^10.0.0 => 10.0.0 
    eslint-plugin-promise: ^4.2.1 => 4.2.1 
    eslint-plugin-react: ^7.16.0 => 7.16.0 
    eslint-plugin-standard: ^4.0.1 => 4.0.1 
    husky: ^3.1.0 => 3.1.0 
    js-cookie: ^2.2.1 => 2.2.1 
    jwt-js-decode: ^1.4.1 => 1.4.1 
    lint-staged: ^9.5.0 => 9.5.0 
    local-storage: ^2.0.0 => 2.0.0 
    lodash.throttle: ^4.1.1 => 4.1.1 
    next: ^9.5.1 => 9.5.1 
    next-compose-plugins: 2.2.0 => 2.2.0 
    next-cookies: ^2.0.3 => 2.0.3 
    next-env: ^1.1.1 => 1.1.1 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-query: ^2.5.10 => 2.5.10 
    snazzy: ^8.0.0 => 8.0.0 
    standardx: ^5.0.0 => 5.0.0 
    styled-components: ^4.4.1 => 4.4.1 
    styled-system: ^5.1.2 => 5.1.2 
    typescript: ^3.8.2 => 3.8.2 
    uuid: ^7.0.2 => 7.0.2 
  npmGlobalPackages:
    npm: 6.14.4

[dabit3]

Have you tried the newer @aws-amplify/ui-react library?

https://docs.amplify.aws/ui/q/framework/react

[mfferreira]

@dabit3 I have not. Is it a drop-in replacement?

Regardless, I think these new patch versions of aws-amplify-react shouldn't be breaking functionality, right?

[dabit3]

@mfferreira it's not completely drop in as some of the API has been changed, but it's close.

Yes, you are right these updated versions of aws-amplify-react should not have breaking changes.

I've already spoken with @jordanranz about this issue and he's investigating.

[mfferreira]

Thanks @dabit3 , appreciate it.

[jordanranz]

Hey @mfferreira, thanks for reporting this + feedback and repro.

To confirm my understand, are you stating that a previous patch version before 4.1.20 was functioning properly? If this is the correct understanding, do you know which patch version was correctly working for you?

The issue you reported may be related to a customer submitted PR: https://github.com/aws-amplify/amplify-js/pull/6276

[0xtf]

Hi @jordanranz. Working with @mfferreira on this.

4.1.19 was the last version that this functionality was working properly. Since then we've tried 4.1.20 and 4.1.21 and both of them have the same issue.

Thank you for looking into this.

[jordanranz]

Got it, I found the root cause. I'll submit a PR shortly

[jordanranz]

@0xtf @mfferreira,

The change is now on the @unstable version of the aws-amplify-react library. Please check to see if the verify contact screen appears properly in your app.

Thank you!

[dabit3]

Thanks @jordanranz !!

[mfferreira]

Thanks @jordanranz

We'll do some testing and follow up by EOD 👍

[mfferreira]

Hey, sorry for the delay.

Just tested [email protected] and looks good now. Account rercovery verifications is now prompted after login.

[dabit3]

Thanks @mfferreira @jordanranz , closing this issue now.