We have a working React micro front end system using OIDC and PKCE. We’re doing our authentication from the front end. Each route/page is a micro front end app in our case. With that said, each route that needs access to the OktaAuth or AuthState is creating their own oktaAuth object and passing this in to components/pages via the Okta Security component.
All of the micro front ends connect to the same Okta Client ID.
The question:
Does it make sense that we would instead create a shared utility component that creates just one OktaAuth object and every micro front end just uses this shared OktaAuth?
IMHO, I’d think you’d want the same instance of OktaAuth throughout the entire app.
Are you using Webpack’s ModuleFederation plugin? If so, configuring the Okta libraries as a shared, singleton resource should assist without you having to create a shared utility component.
I’m interested to hear about how you address this concern for your app if you don’t mind sharing. I’d like to have a better understanding of how different apps approach sharing authentication state within their MFEs.
Thank you for your quick reply. We are using single-spa with Import Maps. At the time of writing our app we were using Webpack version 4.x, so Module Federation wasn’t an option. (single-spa docs indicated Webpack 5.x was required). Possible future enhancement, but for now that’s where we are.
I’m hoping there’s a recommendation out there for doing the same singleton solution using Import Maps. Any other suggestions would be appreciated.
Thanks for sharing. Yes, you are correct in that Webpack 5 is required for Module Federation, and I completely understand needing to stay on Webpack 4 for now.
Unfortunately, I don’t have experience with Webpack 4 and MFEs, so I don’t have any other suggestions other than what you already asked about (creating a shared component and managing it yourself).
Hopefully, other forum readers will have suggestions too.
