Best Way to Structure Micro-Frontends

[william-will-angi]

We have several independent Nextjs responsible for different parts of our page all on the same domain. Let's say I have the following apps all hosted on the same domain:

• Next app 1: mydomain.com/route1
• Next app 2: mydomain.com/route2
• Next app 3: mydomain.com/route3

What is the recommended way for implementing NextAuth with a setup like this? I am trying to avoid a situation where all 3 of the next apps manage their own api/auth endpoints.

My gut tells me that we should use a new next app set up where its sole purpose is handling the next auth api routes. Then the remaining next apps would use configuration within the SessionProvider to point to the new next app's routes. That being said, it seems a little strange to be spinning up a nextjs app solely for the api.

Figured I'd reach out to see what others are doing. Is there a simpler solution that I'm not seeing?

[gegyhamdani]

Just thinking about this, is anyone who has successfully made this happen?

In my case, a host app was set up using next-auth.
Then, there is a remote app that contains a number of data, this data is obtained via fetch to an endpoint. However, when fetching I need the token in next-auth from the host app.