• Introduction
• Library angular-oauth2-oidc
• Implementation and Configuration of Identity Providers
• PWA Initialization
• Login, Registration, Token Refreshment, Logout
• Vanishing of the apiToken Cookie
• Further References

Introduction

Several ICM REST operations require an authenticated user.
Authentication also assures enterprise information security.
In the PWA a user can be verified with the help of an identity provider.
An identity provider (IdP) is a service that stores and manages digital identities.
The following identity providers are supported: The default ICM server, the SSO Auth0 and the Punchout identity provider.

Library angular-oauth2-oidc

There is a lot of functionality related to authentication, e.g., logging a user in and out, registering a new user, keeping the user identified even if the user opens further browser tabs, etc.

The PWA uses the library angular-oauth2-oidc to support the implementation of these functionalities.
It is used to fetch data from the icm token endpoint service and can be configured to provide access to other identity providers.

Implementation and Configuration of Identity Providers

To add or change the functionality of an identity provider, the following steps are necessary:

1. Create/change an <idp>.identity-provider.ts class that implements the interface IdentityProvider. In this interface all methods are declared which have to be implemented in your IdP class.

   In the following code you see a typical implementation of the init method of an IdP class.

   @Injectable({ providedIn: 'root' })
   export class ExampleIdentityProvider implements IdentityProvider {
     constructor(
       private router: Router,
       private apiTokenService: ApiTokenService,
       private accountFacade: AccountFacade
     ) {}
   
     init() {
       this.apiTokenService.restore$().subscribe(noop);
   
       this.apiTokenService.cookieVanishes$.subscribe(([type]) => {
         this.accountFacade.logoutUser({ revokeApiToken: false });
         if (type === 'user') {
           this.router.navigate(['/login'], {
             queryParams: { returnUrl: this.router.url, messageKey: 'session_timeout' },
           });
         }
       });
     }
   }

2. Register the <idp>.identity-provider.ts in the IdentityProviderModule. The APP_INITIALIZER injection token is used to configure and initialize the identity provider before app initialization.

3. Set the environment variables IdentityProviders and IdentityProvider accordingly.

PWA Initialization

A PWA user has to be identified by the ICM server by a unique authentication token, even if it is an anonymous user.
Once an unknown user creates a basket in the PWA, an anonymous authentication token is requested by the ICM Token REST endpoint.
This happens in the apiToken http interceptor method.
Subsequently, this token will be saved as apiToken cookie and added to all REST requests in the request header, e.g.:

authentication-token: encryption0@PBEWithMD5AndTripleDES:1D7T8HyFqQ0=|k3PQLgujzUq0tudtw+6HLjWnExiwrd4o9/jVU7ZH74kTfTy3RS7/sYadsg7ODRM2

In this way, it is possible to identify users even if they are opening a new browser tab or refreshing the PWA in the browser.

If a user opens the PWA and already has a valid apiToken cookie, no new token is requested by the ICM server but this token is used in the header of the REST requests.

Login, Registration, Token Refreshment, Logout

All these functionalities strongly depend on the implementation of the used identity provider.
This is described in the appropriate identity provider guides in more detail, see Further References below.

Vanishing of the apiToken Cookie

The PWA needs to react in case the apiToken cookie is not available anymore.
This could happen if a PWA is opened in many tabs and the user logs out, or when users remove the cookie themselves.
When the cookie vanishes, the PWA emits a new value for the cookieVanishes$ subject.
The identity provider implementation defines how the application should behave in such a case.
With the ICM identity provider, for example, the user is automatically logged out and routed to the /login page in that case.

Further References

• Guide - ICM Identity Provider
• Guide - Punchout Identity Provider
• Guide - Single Sign-On (SSO) Identity Provider