Issues of using Paragon component <Hyperlink> in MFE

Hello!

Background
I ran into a problem with moving to pages using hyperlinks in MFE Authn. If you enter the wrong password multiple times, a link to the password reset page will appear that says reset your password (link /reset). Indeed the transition is in progress <‘MFE Authn domain’>/reset. This is where the problem appears.
The community EdX uses two deployment paths: using a different subdomain for each MFE (for example https://authn.edx.org/) and using one domain for each MFE, but adding the first path element with the name of this MFE (for example https://app-mfe.company.com/authn/).

  • In the first case, the transition is performed correctly, when you navigate from the https://authn.edx.org/login page to the https://authn.edx.org/reset page.
  • In the second case, there is a transition from the https://app-mfe.company.com/authn/login page to the https://app-mfe.company.com/reset page. As a result, an error occurs, since the correct path is https://app-mfe.company.com/authn/reset. This is because <Hyperlink destination="/reset" isInline> works as an absolute path and the transition to the reset page relativity to the domain (due to the presence of “/” before “reset”).

Proposal
I checked that the transition to the password reset page is correct in both cases as follows <Hyperlink destination=**"reset"** isInline>. But this is the way out for one specific case. There are many such cases across the platform. Such a solution is not optimal, since it is impossible to find and change all such cases across the entire platform.
Maybe someone has a suggestion on how to solve this problem.

Hi @Dmytro_Alipov!

First off, thank you for identifying the issue and for coming up with a fix!

I think the relative link you suggest is the way to go, here. :+1: Would it be possible for you to open a pull request to introduce the fix?

I wouldn’t worry about fixing these cases across the platform, though: we can do it as we encounter them.

I opened a PR on Upstream for this fix. Perhaps someone will be useful.

Personally I disagree that relative paths are the right approach here. The way Next.js does it is you have a basePath setting for each MFE, and if it’s set to some path like /authn, then the <Link> component will automatically prefix URLs with the basePath.

Why shouldn’t our BASE_URL or BASE_PATH setting work the same way? Then there wouldn’t be this footgun waiting for developers.

2 Likes

P.S. I have no idea why, but I just received the email notification for the original post in this thread today, even though it’s from last month?