@aws-amplify/ui-react@2.2.1 buttons (in components), or e.g. signOut() from AuthContext stopped working

[coderbyheart]

Before opening, please confirm:

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

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
  System:
    OS: Linux 5.16 Arch Linux
    CPU: (20) x64 Intel(R) Core(TM) i9-10900 CPU @ 2.80GHz
    Memory: 24.41 GB / 31.09 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.3.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.4.0 - /usr/bin/npm
  Browsers:
    Firefox: 96.0.3
  npmPackages:
    @aws-amplify/ui-react: 2.2.1 => 2.2.1 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @aws-sdk/client-cloudformation: 3.49.0 => 3.49.0 
    @aws-sdk/client-cognito-identity-provider: 3.49.0 => 3.49.0 
    @aws-sdk/client-iot: 3.49.0 => 3.49.0 
    @aws-sdk/client-iot-data-plane: 3.49.0 => 3.49.0 
    @aws-sdk/client-ssm: 3.49.0 => 3.49.0 
    @nordicsemiconductor/asset-tracker-cloud-code-style: 11.0.17 => 11.0.17 
    @nordicsemiconductor/from-env: 1.0.0 => 1.0.0 
    @nordicsemiconductor/object-to-env: 4.1.0 => 4.1.0 
    @nordicsemiconductor/random-words: 6.0.0 => 6.0.0 
    @playwright/test: 1.18.1 => 1.18.1 
    @types/chance: 1.1.3 => 1.1.3 
    @types/feather-icons: 4.7.0 => 4.7.0 
    @types/intro.js: 3.0.2 => 3.0.2 
    @types/jest: 27.4.0 => 27.4.0 
    @types/react: 17.0.38 => 17.0.38 
    @types/react-dom: 17.0.11 => 17.0.11 
    @vitejs/plugin-react: 1.1.4 => 1.1.4 
    aws-amplify: 4.3.13 => 4.3.13 
    bootstrap: 5.1.3 => 5.1.3 
    chance: 1.1.8 => 1.1.8 
    eslint-config-react-app: 7.0.0 => 7.0.0 
    eslint-plugin-jsx-a11y: 6.5.1 => 6.5.1 
    eslint-plugin-no-restricted-imports: 0.0.0 => 0.0.0 
    feather-icons: 4.28.0 => 4.28.0 
    handlebars: 4.7.7 => 4.7.7 
    id128: 1.6.6 => 1.6.6 
    inter-ui: 3.19.3 => 3.19.3 
    intro.js: 4.3.0 => 4.3.0 
    jest: 27.4.7 => 27.4.7 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    react-leaflet: 3.2.5 => 3.2.5 
    react-router-dom: 6.2.1 => 6.2.1 
    ts-jest: 27.1.3 => 27.1.3 
    vite: 2.7.13 => 2.7.13 
  npmGlobalPackages:
    corepack: 0.10.0
    node-gyp: 8.4.1
    nopt: 5.0.0
    npm-check: 5.9.2
    npm: 8.4.0
    request: 2.88.2
    semver: 7.3.5
    yarn: 1.22.17

Describe the bug

Upgrading from @aws-amplify/ui-react 2.2.0 to 2.2.1 breaks UI interaction:

• the sign in button in the sign in component does nothing
• same problem in the create account component
• calling the signOut() function in React does nothing.

Running it with Amplify.Logger.LOG_LEVEL = 'DEBUG'; shows nothing in the console.

I have an app that has end-to-end tests, which now fail: NordicSemiconductor/asset-tracker-cloud-app-aws-js#9

Expected behavior

Clicking the sign in button should log the user in.
Calling signOut() should log the user out.

Reproduction steps

Start the app

git clone https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js.git
cd asset-tracker-cloud-app-aws-js
git checkout -t origin/renovate/aws-amplify-ui-react-2.x
npm ci

# export these environment variables, or your own values (unused values are not needed for the purpose of demonstration, but required by the app)
export PUBLIC_USER_POOL_CLIENT_ID=3s8c3hhgtc6ut8gapd45ljnvgk
export PUBLIC_USER_POOL_ID=eu-west-1_wB5nqBVkh
export PUBLIC_REGION=eu-west-1
export PUBLIC_FOTA_BUCKET_NAME=unused
export PUBLIC_GEOLOCATION_API_URL=unused
export PUBLIC_HISTORICALDATA_TABLE_INFO=unused
export PUBLIC_NCELLMEAS_STORAGE_TABLE_NAME=unused
export PUBLIC_NEIGHBOR_CELL_GEOLOCATION_API_URL=unused
export PUBLIC_USER_IOT_POLICY_ARN=unused
export PUBLIC_WEB_APP_BUCKET_NAME=unused
export PUBLIC_CLOUDFRONT_DISTRIBUTION_ID=unused
export PUBLIC_IDENTITY_POOL_ID=unused
export PUBLIC_WEB_APP_DOMAIN_NAME=unused
export PUBLIC_MQTT_ENDPOINT=unused

npm start

Open the browser and the printed URL, select the "Create Account" tab, and fill in some details.

Click "Create Account".

Nothing happens.

If you downgrade to @aws-amplify/ui-react@2.2.0 creating an account works.

npm i --save-exact @aws-amplify/ui-react@2.2.0
npm start

Code Snippet

See STR.

Log output

// Put your logs below this line
[vite] connecting...
client.ts:52 [vite] connected.
ConsoleLogger.ts:115 [DEBUG] 21:09.577 AuthClass - getting current authenticated user
ConsoleLogger.ts:115 [DEBUG] 21:09.654 AuthClass - get current authenticated userpool user
ConsoleLogger.ts:115 [DEBUG] 21:09.659 AuthClass - Failed to get user from user pool
ConsoleLogger.ts:125 [DEBUG] 21:09.659 AuthClass - The user is not authenticated by the error No current user

No log output when I click the "Create Account" button.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

{
    "Auth": {
        "identityPoolId": "xxx",
        "region": "eu-west-1",
        "userPoolId": "eu-west-1_wB5nqBVkh",
        "userPoolWebClientId": "3s8c3hhgtc6ut8gapd45ljnvgk",
        "mandatorySignIn": true
    }
}

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @coderbyheart 👋 thank you for raising this issue. I was able to reproduce the issue with the steps to reproduce. However, this doesn't seem to happen on Next, CRA, and/or webpack apps as I wasn't able to reproduce the behavior on a fresh start using those tools. I'm not too familiar with Vite but maybe that's part of the issue. I'm going to transfer this issue over to the UI repo for better support.

[wlee221]

Thanks for raising this issue! This is weird because the only two changes between 2.2.0 and 2.2.1 are

• pinning xstate version to 4.26.1 -- Pin xstate versions #1224
• Adding additional i18n translation -- Added additional error translation text for SMS MFA #1207

I suspect it's the former because the latter doesn't impact auth flows. We will take a look at our earliest capacity. Meanwhile, can you try https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides to force

{
  "overrides": {
    "xstate": "4.29.0" 
  }
}

and let us know if that resolves it?

[coderbyheart]

Yes, pinning xstate to 4.29.0 fixes the problem.

[wlee221]

Thank you for verifying, please hold onto that workaround while we come up with a holistic fix for bumping xstate (which we pinned due to TypeScript conflicts). I'll keep you posted.

[wlee221]

Update: we'll be pinning to 4.28.0 to unblock immediate runtime problems. 4.29.0 has major typescript changes that we'll need more time to adjust to. For now we'll stick with 4.28.0.

This is what you already have on your package-lock.json so this should resolve your application. We'll get a PR up and let you know when it gets released.

[wlee221]

@coderbyheart Just to be 100% 4.28.0 resolves the bug, can you try the same overrides strategy to check if 4.28.0 works on your same PR?

[coderbyheart]

@wlee221 I've added it to the PR already to verify. End-to-end tests pass now: see NordicSemiconductor/asset-tracker-cloud-app-aws-js@7f62818

[coderbyheart]

Sorry, I see now that it's 4.28 (twenty eight), I was using 4.29 (twenty nine). Will try.

[coderbyheart]

4.28.0 works as well: NordicSemiconductor/asset-tracker-cloud-app-aws-js@8089019

[wlee221]

Much appreciate your fast response. We'll merge #1230 and have it released ETA 02/03.

[LeJ84]

I have the same trouble in a CRA app when i update in 2.2.1. I tried the overrides workaround, it doesn't for me but i'm not sure that i did it well.

[wlee221]

@LeJ84, we just released this fix to 2.2.2. Can you try that veresion (make sure your lock file is updated), and let us know if the problem still persists?

[LeJ84]

Sorry for the time to answer, but i confirm that 2.2.2 fixes that problem ! Good job !

[wlee221]

Awesome!

[juliojimenez]

I tried the 2.2.1, 2.2.2, and 2.3.0 with and without the xstate override, but unfortunately the buttons were still dead (using withAuthenticator in CRA).

Was able to get back on track with 2.2.0

[srianbury]

I was having this issue as well and wanted to give ya'll one more data point.
(I'm using the default gatsby starter (gatsby: ^4.6.2))

The xstate override solution did not work for me.

{
  "overrides": {
    "xstate": "4.29.0" 
  }
}

Trying 2.2.2 and 2.3.0 did not work either. I was able to get it to work with 2.2.0

[wlee221]

Weird... As mentioned the only impactful change from 2.2.0 to 2.2.1 was pinning xstate version to 4.26.1 (Release notes here).

@juliojimenez and @srianbury, can you please provide us a repro repo that we can inspect? And just to confirm, you're on NPM 8+ and not on yarn or other package manager, right? overrides is NPM 8+ only.

[wlee221]

^ edited for typo, overrides is NPM 8+ only.

Also, any lockfile will be helpful! One for 2.2.0 and 2.2.1 so we can inspect the diff.

[srianbury]

@wlee221 Thanks for the info! I did not know that. I am using yarn. It looks like the yarn alternative is resolutions. I'll try it that way and also with npm afterward. Can you clarify which version of xstate I should pin?

[wlee221]

Thanks for the quick response 🙏 Can you try xstate@4.28.0? This is the version that latest ui-react uses.

[srianbury]

@wlee221
Using

"resolutions": {
    "xstate": "4.28.0"
},

With yarn fixed the issue in 2.2.1 for me

[wlee221]

Glad it worked! At the same time I'm very confused because that's exactly what #1230 in @aws-amplify/ui-react@2.2.2 did 🤔

Can you try nuking your lockfile and reinstall everything with ui-react@2.2.2?

[srianbury]

It might've had something to do with the lock file. When I switched from 2.2.1 to 2.2.2 I removed my node_modules folder but not the lock file. I will remove node_modules, the lockfile, and the xstate pin, set @aws-amplify/ui-react to 2.2.2, and install again and let you know if it works.

[srianbury]

The buttons are not working when I use 2.2.2

Here's the package.json for the 2.2.2 version (this did not work) 2.2.2 package.json
Here's the package.json for the 2.2.1 version with xstate pinned to 4.28.0 (this one works) 2.2.1 w/ xstate@4.28.0
And 2.2.0 as is for me as well.

[wlee221]

Ah I see why... gatsby itself depends on xstate@^4.26.0: lockfile. Because Gatsby and @aws-amplify/ui-react's xstate dependencies versions are incompliant, yarn will create duplicated entries for xstate. Duplicated packages will cause behaviors like these...

For now, please dedupe xstate with resolutions. I'll bring this up to the team and discuss how to handle this.

[wlee221]

Working on #1346 to declare xstate at ^4.29.0 so npm and yarn can dedupe them easily.

[bestickley]

For what it's worth. I also ran into this issue because I had @aws-amplify/ui-react installed and then I had another library installed via npm link that also depended on @aws-amplify/ui-react. What solved it for me was adding resolve: { dedupe: ["@aws-amplify/ui-react"] } to my vite.config.ts

[wlee221]

Hi @coderbyheart, sorry it took a while! We just updated our xstate dependency to be more compatible to avoid package duplications.

This will be released next Tuesday, and will let you know once that happens. This should remove the need to use overrides or resolutions.