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

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: https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/pull/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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 28 (15 by maintainers)

Commits related to this issue

fix: pin xstate to 4.29.0 See https://github.com/aws-amplify/amplify-ui/issues/1226\#issuecomment-1027156885 — committed to NordicSemiconductor/asset-tracker-cloud-app-aws-js by coderbyheart 2 years ago

Most upvoted comments

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

juliojimenez on Feb 9, 2022

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 on Feb 10, 2022

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.

srianbury on Feb 9, 2022

Glad it worked! At the same time I’m very confused because that’s exactly what https://github.com/aws-amplify/amplify-ui/pull/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?

wlee221 on Feb 9, 2022

@wlee221 Using

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

With yarn fixed the issue in 2.2.1 for me

srianbury on Feb 9, 2022

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 on Feb 9, 2022

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

wlee221 on Feb 1, 2022

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

coderbyheart on Feb 1, 2022