Multiple Cognito Userpools in a Microfrontend application

[mariasemionova]

Is this related to a new or existing framework?

Next.js

Is this related to a new or existing API?

Authentication

Is this related to another service?

Cognito

Describe the feature you'd like to request

It would be nice to have a way to use a single "aws-amplify/auth" configuration across multiple microfrontend apps

App description: I have a monorepo (Turborepo managed with pnpm) where all authentication logic is centralized in the main app. The other apps function as subpaths of the main app, facilitated by Next.js rewrites. Main app and all the subapps are using NextJS 14 with App Router. All the Userpool creation logic is managed by backend with AWS API Gateway & Lambda functions. Frontend is communicating with Backend through the API.

The problem: When I navigate to a subapp, it seems that the "aws-amplify/auth" context is lost.

I'm trying to run Amplify.configure(amplify_outputs) with the same configuration in all subapps as early as possible (root layout). I was hoping this would allow it to recognize session data from Cognito cookies, which are accessible to the subapps.

However, when I call "fetchAuthSession()" from "aws-amplify/auth", it returns no data, indicating that the user is unauthenticated.

Describe the solution you'd like

It would be nice to have ability to configure Amplify Auth within different parts of the Microfrontend apps, with ability to switch between multiple Cognito Userpools.

Describe alternatives you've considered

I tried to move my amplify and redux related configs to the shared location, but it doesn't help to fix the problem completely.

I am using multiple Cognito User pools, I am still facing an issue: I am unable to change User pool ID and User pool Client ID, after initial Amplify.configure() call. Seems like it is possible to configure it only once, and after it ignores all my attempts to update it with other values. When I check Cognito cookies, I still see that they are linked to initial clientID despite, I tried to call Amplify.configure(updatedConfig).

This is also making the automatic token refresh working only for users from the initially configured User pool, not from the other ones.

Additional context

No response

Is this something that you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request
• [ ] ⚠️ This feature might incur a breaking change

[HuiSF]

Hi @mariasemionova Thanks for opening this issue. For your use cases, you will need to ensure your micro front-end apps are sharing the same instances of the "Amplify singleton" to ensure the config you updated can be applied, this means all apps should use the same Amplify modules under the hood in a scope. Here's a previous investigation and its solution: https://github.com/aws-amplify/amplify-js/issues/12986#issuecomment-2183674965 you may refer to.

[cwomack]

@mariasemionova, wanted to ping you to see if you've had a chance to review @HuiSF's comment above. Let us know if you still have questions or need support from here.

[caioquirino]

Hi @cwomack although the solution you have proposed would work for the frontend, in the backend side, the sub-applications are not injecting the Cognito resources necessary to use AppSync's authorization. I tried a similar thing as you have suggested, but when it comes to the Back-end, the modelling doesn't work.

[cwomack]

@caioquirino, want to get some clarity on the use case here. Are you trying to dynamically swap the configuration for the backend on the Next.js server side?

[caioquirino]

My use case is a bit different, but I think the issue is the same or similar. I am using Amplify Next.js with backend. So I want to reuse an existing cognito full-stack. Both in the front-end and in the back-end. If I hard-code the config in the front-end, still the back-end is incorrect (pointing to the provided one). And when I try to override the back-end one, the model files misses the auth configuration (which means I can only use guest/unauthenticated)

[ashika112]

And when I try to override the back-end one, the model files misses the auth configuration

How are you achieving that?

[cwomack]

@caioquirino, would you mind opening up a new issue so that we can capture more details about your architecture, configurations, etc.?

@mariasemionova we'll close this issue for now since we haven't heard back from you, but feel free to reply and we can reopen if you're still experiencing blockers here!

Thank you!