Secure and Deploy Micro Frontends with Angular

Micro frontends continue to gain interest and traction in front-end development. The architecture models the same concept as micro services - as a way to decompose monolithic front-end applications. And just like with micro services, micro frontends have complexities to manage.


This is a companion discussion topic for the original entry at https://developer.okta.com/blog/2022/05/19/angular-microfrontend-deploy

Hey Alisa,

First of all, THANK YOU THANK YOU THANK YOU for all of your contributions the web dev community! Your posts are always so articulate and well-explained!

I have one question based on this article that takes it a step further I think. In the “Secure your micro frontends” section, you mention the following on importance of adding authn / authz for each MFE: " Having its own instance of authenticated state means you should add sign-in and sign-out capability in the AppComponent of the mfe-profile application too. This will also allow you to test each micro-frontend application independently."

We’re trying to adhere to adhere to this advice, but before we do I’m wondering the best way to accomplish the sign-in and sign-out functionality from the Okta perspective. Would that involve adding each MFE as an application in Okta, or are there more efficient ways of going about doing that?

Thank you,
Michael Canova

1 Like

Hey there @michcancrowe !

Thank you for the incredibly kind words! :blush:

I checked internally to verify best practices for your question regarding adding sign-in and sign-out capability for each micro-frontend application. We recommend adding each MFE as an application in Okta, the methodology you mentioned in your question. This is probably the most straightforward way and wouldn’t involve adding too much extra code to support authentication for each MFE, and it’s what I did when testing things out.

There might be other alternatives, such as using the state parameter to set the redirect callback for each MFE, but I haven’t explored coding this method myself.

As with everything in software development, the best or most efficient ways may differ for each organization, project, and existing constraints. :smile: Setting up a separate application may not be that much effort for me in this post, but if you have a lot of MFEs, there’s more overhead, so I understand the inclination to investigate.

It sounds like something to consider for a follow-up post one day!

I’d love to hear how you end up approaching this. Let us know how it goes!

1 Like