Amplify JS internal config JSON is not being reset properly

ChartistDev commented 5 days ago

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

Authentication

Amplify Version

v6

Amplify Categories

auth, storage

Backend

None

Environment information

``` # Put output below this line System: OS: macOS 14.6.1 CPU: (10) arm64 Apple M1 Pro Memory: 136.44 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 14.18.1 - /opt/homebrew/opt/nvm/versions/node/v14.18.1/bin/node Browsers: Chrome: 129.0.6668.90 Edge: 129.0.2792.79 Safari: 17.6 npmPackages: @aws-amplify/ui-react: ^6.2.2 => 6.5.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-server: undefined () @emotion/react: ^11.11.1 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/material: ^5.13.7 => 5.15.3 @sentry/react: ^7.85.0 => 7.91.0 @sqltools/formatter: ^1.2.5 => 1.2.5 @testing-library/jest-dom: ^5.16.5 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^14.4.3 => 14.5.2 ag-grid-base-icons: 1.0.0 ag-grid-community: ^28.2.0 => 28.2.1 ag-grid-react: ^28.2.0 => 28.2.1 aws-amplify: ^6.6.0 => 6.6.2 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/data: undefined () aws-amplify/data/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () axios: ^1.7.5 => 1.7.5 bootstrap: ^5.2.1 => 5.3.2 eslint: ^8.24.0 => 8.56.0 eslint-config-prettier: ^8.5.0 => 8.10.0 eslint-plugin-react: ^7.31.8 => 7.33.2 highcharts: ^10.3.1 => 10.3.3 highcharts-react-official: ^3.1.0 => 3.2.1 highlight.js: ^11.7.0 => 11.9.0 install: ^0.13.0 => 0.13.0 js-cookie: ^3.0.1 => 3.0.5 lodash: ^4.17.21 => 4.17.21 luxon: ^3.3.0 => 3.4.4 npm: ^10.8.0 => 10.8.0 panzoom: ^9.4.3 => 9.4.3 posthog-js: ^1.57.2 => 1.96.1 posthog-js-react: 1.0.0 prettier: ^2.7.1 => 2.8.8 primereact: ^10.7.0 => 10.7.0 prop-types: ^15.8.1 => 15.8.1 react: ^18.2.0 => 18.2.0 react-calendly: ^4.3.1 => 4.3.1 react-dom: ^18.2.0 => 18.2.0 react-google-recaptcha-enterprise: ^1.0.3 => 1.0.3 react-inlinesvg: ^3.0.2 => 3.0.3 react-loading-skeleton: ^3.4.0 => 3.4.0 react-otp-input: ^2.4.0 => 2.4.0 react-router-dom: ^6.11.1 => 6.21.1 react-scripts: 5.0.1 => 5.0.1 react-select: ^5.6.1 => 5.8.0 react-toast-wnm: ^1.1.3 => 1.1.3 react-tooltip-lite: ^1.12.0 => 1.12.0 sanitize-html: ^2.13.0 => 2.13.0 sass: ^1.55.0 => 1.69.7 web-vitals: ^2.1.4 => 2.1.4 ```

Describe the bug

I am getting the userPoolClientId dynamically and I need to set it before signin and reset it in case of any error. I am resetting it with this command:

 Auth: {
        ...Amplify?.getConfig().Auth,
        Cognito: {
          ...Amplify?.getConfig().Auth.Cognito,
          userPoolClientId: undefined
        }
      },`
      I'm setting the clientId just before I call the signin() method using this command: 

const config = {
              ...Amplify?.getConfig(),
              Auth: {
                ...Amplify?.getConfig().Auth,
                Cognito: {
                  ...Amplify?.getConfig().Auth.Cognito,
                  userPoolClientId: myNewClientId
                }
              }
            };
            configureAmplify(config);

But when I'm trying again to login via valid credentials the internal config JSON is still having undefined The weird thing is the Cognito API call is sending the correct payload and I've even logged the current Amplify instance on console and its fine

Expected behavior

Amplify config JSON should reset when I'm sending the configure call.

Reproduction steps

I am attaching the screenshots here:

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

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

No response

cwomack commented 5 days ago

Hello, @ChartistDev and thanks for opening this issue. Just to be clear, Amplify.configure() should be called as early as possible in your application’s life-cycle. It's possible that if you call it multiple times it could lead to potential race conditions due to the way the Amplify singleton behaves.

That being said, I believe the best way to ensure that you're properly getting the credentials/config you're looking for in this scenario is to ensure that before calling signIn() or other API's... call Amplify.getConfig() another time after your final configureAmplify() call to validate that the userPoolClientId exists and is valid.

Can you clarify if you are modifying or reconfiguring and calling Auth API's in different React component cycles? Or can you possibly describe a little more about the use case you're looking for here tied to, "getting the userPoolClientId dynamically and I need to set it before signin and reset it in case of any error"?

ChartistDev commented 5 days ago

Hey @cwomack thanks for replying. So I have different userPoolIds set in AWS based on different emails.. Its got to do something about people from different organisations. Also Frontend React is not aware of what those Ids may be. So in the signin page , before the actual signin API, I call a different internal API with the email as my payload. This response gives me the relevant UserPoolId. Using that I need to reconfigure Amplify before I call the signin API. Also conversely if the signin fails (lets say due to incorrect passoword) I need to reset the Amplify config so that its ready to take the config the next time I want to signin with a valid email

ashika112 commented 3 days ago

@ChartistDev , For the following,

I have different userPoolIds set in AWS based on different emails.. Its got to do something about people from different organisations

I think best bet would be to keep a map somewhere and use it. As indicated by Chris, because Amplify config is a singleton, configuring that on the go could lead to race_conditions and other unforeseen issues. It is not recommended by us.

ChartistDev commented 1 day ago

@ashika112 Hi.. I didn't get u.. what is meant by keeping a map? Does that mean we can't reconfigure and have to use only one UserPoolId?

aws-amplify / amplify-js