B2c-auth NPM | npm.io

B2C Auth Library

This project was generated with Angular CLI version 13.1.2.

Code scaffolding

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.