This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

b2c-auth

B2C Auth Library

This project was generated with Angular CLI version 13.1.2.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build locally

Run npm run build-locally to build the project. The build artifacts will be stored in the dist/ directory.

Generate the npm library locally

Run npm run pack-library to build the project. The tgz file will be stored in the dist/b2c-auth directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Usage

1. Run npm install b2c-auth command.

2. Add B2cAuthModule into imports array from main project module file.

3. Create an auth.config.ts file:

export interface B2CPolicies {
  names: {
    signUpSignIn: string;
    forgotPassword: string;
  };
  authorities: {
    signUpSignIn: {
      authority: string;
    };
    forgotPassword: {
      authority: string;
    };
  };
  authorityDomain: string;
}

export interface B2CApiConfig {
  scopes: string[];
  uri: string;
}

export const b2cPolicies: B2CPolicies = {
  names: {
    signUpSignIn: environment.B2C.SIGN_IN_POLICY_NAME,
    forgotPassword: environment.B2C.RESET_PASSWORD_POLICY_NAME,
  },
  authorities: {
    signUpSignIn: {
      authority: environment.B2C.SIGN_IN_AUTHORITY,
    },
    forgotPassword: {
      authority: environment.B2C.RESET_PASSWORD_AUTHORITY,
    },
  },
  authorityDomain: environment.B2C.AUTHORITY_DOMAIN,
};

export const apiScope: string = environment.B2C.SCOPE;

export const apiConfig: B2CApiConfig[] = Object.values(environment.API_URLS).map((uri: string) => ({
  scopes: [apiScope],
  uri: `${uri}/**`,
}));

const isIE: boolean =
  window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.B2C.CLIENT_ID,
      authority: b2cPolicies.authorities.signUpSignIn.authority,
      redirectUri: document.baseURI,
      knownAuthorities: [b2cPolicies.authorityDomain],
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap: Map<string, Array<string>> = new Map<string, Array<string>>();

  apiConfig.forEach((config: B2CApiConfig) => {
    protectedResourceMap.set(config.uri, config.scopes);
  });

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: [apiScope],
    },
  };
}

4. In main module file on the providers array add the following lines and imports the required dependencies from auth.config.ts file and @azure/msal-angular library:

...
  {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: authConfig.MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: authConfig.MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: authConfig.MSALInterceptorConfigFactory,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
...

5. Create a Window Service:

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {
  location: Location = window.location;
}

6. In root component extends the B2CAuthComponent component and pass the following services to it: MsalGuardConfiguration, MsalBroadcastService, MsalService and WindowService.

7. Create an login method, for example:

 loginToB2C(): void {
    this.msalBroadcastService.inProgress$
      ?.pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
      )
      .subscribe(() => {
        this.isLoggedIn = this.checkAccount();
        this.subscribeToSuccessResetPassword('token_name', authConfig);
      });
  }

This method check if the user is logged using the checkAccount method from the library and call subscribeToSuccessResetPassword to check if the reset password is succeeded.

8. In ngOnInit state call the following methods in this order: loginToB2C, subscribeToLoginFailure, subscribeToAcquiredToken, subscribeToInvalidAuth.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

License

Copyright (c) 2022 Drägerwerk AG & Co.KGaA, all rights reserved.