How to use the Bosch Web Core library for user login

For user login using Authorization Code Grant Flow with PKCE without involving the backend, we recommend using Bosch Connected Industry Web Core Auth for your Angular application. It provides a "MacmaAuthModule" handling OAuth2 for you including multitenancy and consuming access control lists.

BCI Web Core is currently only available for Bosch-internal projects

This is an example for using BCI Web Core Auth:

@NgModule({
    imports: [
        // we import the module into our main module's imports
        MacmaAuthModule.forRoot({
            authOptionsProvider: {
                provide: AUTH_OPTIONS,
                useFactory: authOptionsFactory,
                deps: [CoreConfigurationService],
            },
        }),
    ]
]);

javascript

With the authOptionsFactory to provide configuration based on the auth server URL and client ID provided by the backend’s config endpoint.

export function authOptionsFactory(coreConfigurationService: CoreConfigurationService): IAuthModuleConfig {
    const config$ = from(coreConfigurationService.configPromise).pipe(
        first(),
        catchError((e) => {
            console.log('Core config failed', e);
            return of(e);
        }),
        shareReplay(1)
    );

    return {
        ...DefaultMacmaAuthModuleConfig,
        debugAuthentication: false,
        autoLogin: true,
        requestUserInfo: true,
        useRefreshToken: true,

        // Whether to use scoped storage for concurrent login flows of
        // the same application. Relevant when multiple application
        // instances run from same origin (e.g. widgets) but may impact
        // performance.
        useStorageScope: true/false,

        // No auth header for assets so that they are cached by browser.
        addAuthHeader: req => !req.url.includes('./assets'),
        accessControlEndpoint: config$.pipe(
            map(config => config.endpoint)
        ),
        clientId: config$.pipe(
            map(config => config.clientId),
        ),
        defaultRealm: config$.pipe(
            map(config => config.defaultRealm),
        ),
    } as IMacmaAuthModuleConfig;
}

javascript

Login.html, login.css and oidc-callback-handling.js from BCI Web Core Auth can be used by configuring in your angular.json at projects.<your-project>.architect.build.options.assets:

{
    "glob": "**/*",
    "input": "./node_modules/@bci-web-core/auth/dist/assets",
    "output": "/assets"
},

javascript

This will make those assets available at /assets/auth, e.g. /assets/auth/login.html. Please make sure to change styling and legal contents (footer) as required. The library expects a login.html sending an oidc-code-message event and a renew.html sending a oidc-silent-renew-message event each containing the url as the event details. Please don’t use those pages blindly, you need to consider your legal requirements, e.g. a footer.

Finally, upon encountering a 401 UNAUTHORIZED indicating that a user is no longer logged in, check whether the application state is as if the user was still logged in and take measures to update the state:

if (!!this.authenticationService.getUsername()) {
    // user seems to be logged in but token is not valid any more because it was from a previous SSO session
    // logout required to make login callback state handling work
    this.oidcSecurityService.logoffLocal();
    (this.authenticationService as MacmaAuthenticationService).login();
}

javascript