How to communicate between applications

[joeldenning]

How to communicate between applications

[joeldenning]

How to share current user information to sub-applications after logging in from the main application?

Three options:

1. Use single-spa custom props, which were created for this purpose
2. Use a global variable window.loggedInUser. I've done this before and it's not bad as long as you don't end up modifying the global variables.
3. Create a module in the import map called auth that exports a variable called user. Applications then use this variable via import {user} from 'auth'. Make sure to exclude auth from your webpack build by adding auth as a webpack external

Are there any other better ways besides localStorage?

Yes, I think all of the options listed above are better than localStorage, since making auth data persist when you reload the page can lead to funky bugs. Auth data is better checked from a cookie and the API rather than a local storage value that can become stale.

If the application is internationalized, how do other applications listen after the main application switches languages?

Internationalization can be done in the same way described in the Angular docs. In those docs, it suggests creating a separate bundle for each locale, along with a distinct base url inside the browser for each locale. Since each locale has entirely separate js files, you'll need to do a full page reload when switching locales. A full page reload can be accomplished with <a href="/fr"></a> iirc

I am closing this issue since I've answered the questions. Feel free to reopen or comment further with any other discussion related to this.