search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.41k stars 2.11k forks source link

Amplify does not work well if I have configured multiple user pools with conditions #13406

Closed rashidwiizb closed 2 months ago

rashidwiizb commented 3 months ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

```sh System: OS: macOS 14.4.1 CPU: (8) arm64 Apple M2 Memory: 75.05 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.0.0 - /opt/homebrew/bin/node Yarn: 4.2.2 - /opt/homebrew/bin/yarn npm: 10.5.1 - /opt/homebrew/bin/npm Watchman: 2024.04.22.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 124.0.6367.208 Safari: 17.4.1 npmPackages: @craco/craco: ^6.4.5 => 6.4.5 @headlessui/react: ^1.7.4 => 1.7.19 @radix-ui/react-dialog: ^1.0.5 => 1.0.5 @radix-ui/react-slot: ^1.0.2 => 1.0.2 @radix-ui/react-switch: ^1.0.3 => 1.0.3 @reduxjs/toolkit: ^1.8.6 => 1.9.7 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @tailwindcss/line-clamp: ^0.4.2 => 0.4.4 @testing-library/jest-dom: ^5.16.5 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 aos: ^3.0.0-beta.6 => 3.0.0-beta.6 autoprefixer: ^10.4.12 => 10.4.19 aws-amplify: ^6.3.1 => 6.3.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.1.3 => 1.7.1 class-variance-authority: ^0.7.0 => 0.7.0 clsx: ^2.1.0 => 2.1.1 (2.0.0, 1.2.1) epub-cfi-resolver: ^1.0.2 => 1.0.2 jwt-decode: ^3.1.2 => 3.1.2 lucide-react: ^0.309.0 => 0.309.0 material-ui: ^0.20.2 => 0.20.2 moment: ^2.29.4 => 2.30.1 moment-duration-format: ^2.3.2 => 2.3.2 phone: ^3.1.30 => 3.1.43 postcss: ^8.4.18 => 8.4.38 (7.0.39) react: ^18.2.0 => 18.3.1 react-audio-player: ^0.17.0 => 0.17.0 react-confetti-explosion: ^2.1.2 => 2.1.2 react-dom: ^18.2.0 => 18.3.1 react-epub-viewer: ^0.2.0 => 0.2.0 react-epubjs: ^0.0.18 => 0.0.18 react-full-screen: ^1.1.1 => 1.1.1 react-icons: ^4.7.1 => 4.12.0 react-media-player: ^0.7.9 => 0.7.9 react-paginate: ^8.2.0 => 8.2.0 react-phone-input-2: ^2.15.1 => 2.15.1 react-player: ^2.14.1 => 2.16.0 react-reader: ^2.0.4 => 2.0.10 react-redux: ^8.0.4 => 8.1.3 react-responsive-carousel: ^3.2.23 => 3.2.23 react-router-dom: ^6.4.2 => 6.23.1 react-scripts: 5.0.1 => 5.0.1 react-slick: ^0.29.0 => 0.29.0 react-spring: ^9.5.5 => 9.7.3 (8.0.27) react-spring-3d-carousel: ^1.2.1 => 1.3.4 react-star-rating-component: ^1.4.1 => 1.4.1 react-toastify: ^9.1.1 => 9.1.3 react-zoom-pan-pinch: ^3.3.0 => 3.4.4 readium-js: ^0.0.0 => 0.0.0 recharts: ^2.4.3 => 2.12.7 redux-persist: ^6.0.0 => 6.0.0 redux-persist/integration/react: undefined () redux-saga: ^1.2.1 => 1.3.0 redux-saga/effects: undefined () sass: ^1.56.0 => 1.77.2 slick-carousel: ^1.8.1 => 1.8.1 styled-components: ^5.3.6 => 5.3.11 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () tailwind-merge: ^2.2.0 => 2.3.0 tailwindcss: ^3.4.1 => 3.4.3 validator: ^13.7.0 => 13.12.0 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: npm: 10.5.1 serverless: 3.38.0 yarn: 1.22.22 ```

Describe the bug

I am configuring AWS Amplify with different user pools and client IDs according to the role I pass to the amplify_Config function. This works correctly, and Amplify is configured with the appropriate pool ID and client ID based on the role.

When I first select the "Student" role, it configures for the student, and then the sign-in happens successfully, and the user is logged in. However, after the current user logs out, if I choose another role and call amplify_Config in useEffect again, it reconfigures correctly. Then, when I call sign-in, Amplify tries to sign in with the previously configured user pool and client ID, resulting in an error.

But when I reload the page after selecting the role and configuring Amplify, it works fine. Is there a way to achieve this without reloading the page?

Expected behavior

without reload the screen I want to sign in the user with latest configure client and user pool

Reproduction steps

use multiple user pool and client and configure it according with changing conditions then try to signing

Code Snippet

my amplify_Config

export const amplify_Config = async (role) => {
return new Promise((resolve, reject) => {
let poolId = '';
let clientId = '';
role = role.charAt(0).toUpperCase() + role.slice(1);

    if (role === "Student") {
        poolId = config.AWS_CONFIG.STUDENT_POOL_ID;
        clientId = config.AWS_CONFIG.STUDENT_CLIENT;
    } else if (role === "Teacher") {
        poolId = config.AWS_CONFIG.TEACHER_POOL_ID;
        clientId = config.AWS_CONFIG.TEACHER_CLIENT;
    } else if (role === "Parent") {
        poolId = config.AWS_CONFIG.PARENT_POOL_ID;
        clientId = config.AWS_CONFIG.PARENT_CLIENT;
    }

    // console.log("amp config", { role }, { poolId }, { clientId });
    Amplify.configure({
        Auth: {
            Cognito: {
                userPoolId: poolId,
                userPoolClientId: clientId,
                loginWith: {
                    oauth: {
                        domain: '',
                        responseType: 'code',
                        scopes: config.AWS_CONFIG.SCOPE,
                        redirectSignIn: [''],
                        redirectSignOut: [''],
                    }
                },
            },
        },
    });
    resolve();
});
}

the useeffect and reload in signIn page after selecting role

const reload = () => {
var refresh = localStorage.getItem('reload');
setTimeout(function () {
if (refresh === null) {
window.location.reload();
window.localStorage.setItem('reload', "1");
}
});

setTimeout(function () {
localStorage.removeItem('reload')
}, 1000);
}
}
useEffect(() => {
const config = async() =>{
return await amplify_Config(role);
}
if(role){
dispatch(selecteRole(role));
config();
reload() // page reloading
},[role])

Log output

No response

aws-exports.js

No response

Manual configuration

No response

Additional configuration

hgvgh

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 3 months ago

Hello, @rashidwiizb 👋 and sorry to hear you're running into this issue. Can you clarify if you're seeing this in both dev mode and production? I wonder if there's a race condition happening due to the useEffect() hook firing 2x in dev mode, and possibly being impacted by the timeouts being set.

Can you also share any relevant code snippets for your sign-in flow as well? Thanks!

cwomack commented 2 months ago

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!