Amplify JS internal config JSON is not being reset properly

[ChartistDev]

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]

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]

Hey @cwomack thanks for replying. So I have different userPoolClientIds 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 UserPoolClientId. 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]

@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]

@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 UserPoolClientId?

[cwomack]

@ChartistDev, can you help us understand why you're needing, "different userPoolIds set in AWS based on different emails"? I want to make sure that we are giving proper guidance here based on the use case you're looking for because we might be able to accomplish this goal in other ways (within the same user pool).

[ChartistDev]

Hi @cwomack different accounts have different authentication methods: some use email/passwords, some use SSO(Single Sign On) if they use email password, we can manage with a single client but when they use SSO, we need to redirect login to SSO provider only but if the same client has all the SSO options added, SSO information of other accounts will be visible to all accounts So we maintain multiple accounts for a single client we will call the internal API with email as payload and it gives me a userPoolClientID and if that client ID has SSO enabled for other accounts also, it will return that information as well, which can lead to information leakage which is why we add different SSO providers to different clients, and link a client to an account.

[cwomack]

@ChartistDev, can you clarify what you mean by if the same client has all the SSO options added, SSO information of other accounts will be visible to all accounts? Is this a user pool client or possibly a business client? I'm still not understanding why there would be information returned for other accounts here.

[kartikay-bagla]

@cwomack Perhaps I can help with the explanation here.

We use different user pool clients to allow different business clients to log into the same cognito user pool.

Each business client has different a different sign-in provider. If we enable all providers within one user pool client, then any business client could potentially access the sign-in providers of other business clients. Which is why we create a separate user pool client for each business client.

Edit: I am working with @ChartistDev on the same project.

[cwomack]

@ChartistDev and @kartikay-bagla, appreciate the responses and additional context provided. After reviewing this internally, we're going to mark it as a feature request to have support for dynamic configurations (that currently cannot be done with the Amplify singleton).

[ChartistDev]

Thank you @cwomack

[ChartistDev]

@cwomack any update on this?

[cshfang]

Hi @ChartistDev. It's not ideal, but could you try to give explicitly setting the token provider's auth config a shot?

Given what you shared above, it might look something like the following:

// import the default cognito token provider instance
import { cognitoUserPoolsTokenProvider } from '@aws-amplify/auth/cognito';

// create the config as you were
const config = {
  ...Amplify?.getConfig(),
  Auth: {
    ...Amplify?.getConfig().Auth,
    Cognito: {
      ...Amplify?.getConfig().Auth.Cognito,
      userPoolClientId: myNewClientId
    }
  }
};

// explicitly update the instance's internal config
cognitoUserPoolsTokenProvider.setAuthConfig(config.Auth);

configureAmplify(config);