I want to build an SPA with ASP.NET Core (Blazor server side) which some IFrames redirecting to other applications. In this example I have f.e. the SPA, Grafana to show graphs and Node-Red, but there could be more in the future. To create a simple user flow I want the user to login only once in my SPA and then have access to Node-Red and Grafana. Also I want to implement multi-tenancy for all those applications.
Flow: User1 logs in SPA and see's the graphs in Grafana for his/her organization. User2 logs in but sees different graphs for the other organization.
I just started with using OAuth2/OpenID Connect. For that I am using currently Ory's Hydra. I managed to get the login process working with ASP.NET Core and Hydra OpenID Connect. I don't want to go too technical, as I post this here on security SE and I am not quite sure, if this is the right direction I am heading. But just so you know my current process: I created an IFrame with sandbox configs within my SPA, set the cookies to SameSite=None, updated the Grafana config to use the same client id as my SPA and hoped that Grafana would magically log in (spoiler: it doesn't)
I understand that this could be a security risk and I read a lot of articles explaining why IFrame and OAuth2 are not the best friends. So currently I am stuck.
So my question is: What is the best and securest way to implement a SPA with single sign up and single sign on and where should I start? I would love to use OpenID Connect as I always read on this very side: "Never roll your own security implementation!" and it's a standard a lot of applications have already built in, but I am open minded for better calls. And should I use IFrames at all? Or are there better options?
