How to have (at the same time) multiple redirectSignIn / redirectSignOut with amplify auth in Angular app?

Question

I am using @aws-amplify/[email protected] and @aws-amplify/[email protected]

My target is having both domain http://localhost:4200 (Angular dev server) and https://abc.cloudfront.net (my site hosted in CloudFront) in the redirectSignIn / redirectSignOut.

I could have each domain separately and both worked (in order to have the other, I must delete the amplify app and redo all the integration steps again: amplify delete, amplify init, amplify add auth, amplify push).

I've tried other possibilities which I could imagine but all of them didn't work:

• Add a second environment: did not work because the command amplify env add <env-name> does not ask to input redirectSignIn / redirectSignOut at all.

• Directly modify redirectSignIn / redirectSignOut in amplifyconfiguration.json according to the information here: https://docs.amplify.aws/angular/build-a-backend/auth/add-social-provider/#redirect-urls except in my used amplify javascript package version the json object looks a bit different but it seemed I could manage to input the URLs right. But only the one domain that was input during "amplify add auth" worked, the one that was added later through modifying amplifyconfiguration.json did not work. In this attempt, I also manually updated Cognito app client hosted UI allowed callback URLs accordingly because amplify push actually didn't perform any update in the cloud after the modifying of amplifyconfiguration.json.

• Input URLs of all the needed domains during amplify add auth. This could perform best of all the attempts. Sign-in worked for both domains. But the sign-out flow didn't start anymore. Visiting the <amplify-authenticator><ng-template> after signed in just brought up the sign-in form again, not the sign-out form.

Could anyone give me a hint what should I do to achieve the target? I don't know if the info plays some role here: I use login with Facebook and Google in my app.