Next.js Discord

Discord Forum

Passing fetch result from MFE to host with Multi-Zones

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
I am encountering a lot of trouble working with multi-zones.
After fetching on the MFE, I save the token using cookies and do a redirect to /dashboard which is located on the host app.

// fetch here...

const { access_token } = await response.json();

const cookie = serialize("token", access_token, {
httpOnly: true,
sameSite: "lax",
secure: process.env.NODE_ENV === "production",
path: "/",
});

res.setHeader("Set-Cookie", cookie);
res.redirect(302, "/dashboard");

I have the MFE on port 5000 and the host on 3001.
Here's the first scenario: when I access localhost:5000/auth/login directly and make the API call, the request is successful and the token is saved in cookies. Then, I go to localhost:3001/auth/login and refresh the page, and the cookie is there as well (only after refreshing).

The second scenario: if I attempt to try the real path where I would send the request from my host (local 3001) and have the multi-zones proxy working on running the MFE, the cookies will not be saved and the res.redirect won't work.
Sadly I have found very little information on how to pass data/tokens to the host app using multi-zones... And any other type of method does not work very well with nextjs (i've tried the nextjs-mf plugin and it didn't quite work, so i don't really wanna give it another shot).
Any ideas?

0 Replies