Keycloak with SingeSpa microservices

Securing applications
1

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

    return (
    <>
        <KeycloakProvider
            keycloak={KeycloakConfig}
            initConfig={InitConfig}
            LoadingComponent={LoadingComponent}
            onEvent={(event, error) => handleOnEvent(event, error)}
        >
            <BrowserRouter basename="/">
                <Switch>
                    <Route        path="/error" exact component={ErrorPage}/>
                    <PrivateRoute path="/home" exact component={HomePage}/>
                    <PrivateRoute path="/"      exact component={HomePage}/>
                    <PrivateRoute path=""       exact component={HomePage}/>
                </Switch>
            </BrowserRouter>
        </KeycloakProvider>
    </>
);

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

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

registerApplication({
    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.