Single sign on with Single SPA

Question

I want to develop a web portal for the company I work for, that has a number of applications. Im using Single SPA framework, and its Layout Engine.

It looks like this:

      <single-spa-router>
        
        <login>
          <route path="login">
            <application name="@login"></application>
          </route>
        </login>

        <nav >
          <application name="@angular-navbar"></application>
        </nav>
        <main>
          <route path="App1">
            <application name="@angular-app"></application>
          </route>
          <route path="react">
            <application name="@react-app/react-app"></application>
          </route>
        </main>
      </single-spa-router>

I want to make an authentication form, which will require the user to pass username and password. This page should always open first, and then after the user has successfully logged in, the navbar and other applications are shown.

Is there a way to do this using Single SPA Layout Engine? Or what would be the best practice to follow?

I was searching for a project that has implemented this, but I couldn't find any. So if anybody has an idea, or knows how this should be done, it would be very appreciated.

Answer 1

This is just one possibility: After logging in, you pass whatever security information you obtain (JWT or other(s)) to the single-spa applications in the form of props.