Keycloak with SingeSpa microservices

I was successful at integrating the KeycloakProvider into a simple React Application using such:

    return (
            onEvent={(event, error) => handleOnEvent(event, error)}
            <BrowserRouter basename="/">
                    <Route        path="/error" exact component={ErrorPage}/>
                    <PrivateRoute path="/home" exact component={HomePage}/>
                    <PrivateRoute path="/"      exact component={HomePage}/>
                    <PrivateRoute path=""       exact component={HomePage}/>

However now we want to externalize authentication as part of a single-spa.js application, see, and I am beyond my knowledge to get this working. I copied an existing microservice and loaded it as a “authentication”… such as…

  name: '@mysystem/authentication',
  app: () => System.import("@mysystem/authentication"),
  activeWhen: ['/']

    name: "@mysystem/navigation",
    app: () => System.import("@mysystem/navigation"),
    activeWhen: ['/navigation']

in the root.component.js file of the “Authentication” application… I have the KeycloakProvider as configured above. When I attempt to load the application, http://localhost:9000, I see the LoadingComponent component appear, however the application never gets redirected to the keycloak server for me to login.

I am clueless on how to set this up to properly redirect if a keycloak token does not exist in this architecture. The root-config application seems to be proxying to the authentication application so this may be affecting the KeycloadProvider code.

Any suggestions would be appreciated.