"Customizing the MsAdalAngular6Module setup on the fly - a step-by-step

Question

"Customizing the MsAdalAngular6Module setup on the fly - a step-by-step

In order to manage authentication in an Angular single page app, I am utilizing the microsoft adal wrapper available at https://github.com/manishrasrani/ms-adal-angular6.

Following the documentation, I configure all necessary options during compile time using the provided guidelines, which functions as intended.

@NgModule({
imports: [
    MsAdalAngular6Module.forRoot({
      tenant: '<YOUR TENANT>',<-------------------------------- ADD
      clientId: '<YOUR CLIENT / APP ID>',<--------------------- ADD
      redirectUri: window.location.origin,
      endpoints: { <------------------------------------------- ADD
        "https://localhost/Api/": "xxx-bae6-4760-b434-xxx",
        ---
        ---
      },
      navigateToLoginRequestUrl: false,
      cacheLocation: '<localStorage / sessionStorage>', <------ ADD
    }),
    ---
    ---
  ],
  ---
  ---
})

However, due to having an automated deployment pipeline with multiple environments (dev, test, prod, etc.) that require unique settings, I aim to apply these configurations at runtime. In other words, I prefer not to recompile for each environment I deploy to.

I have followed a helpful guide on loading settings from a json file at runtime: , which has been effective. The challenge now is how to incorporate values loaded this way into the MsAdalAngular6Module dynamically?

javascript angular typescript adal microsoft-adal-angular6

Answer 1

Answer №1

I encountered a similar issue and managed to resolve it by creating my own service that only includes the necessary component of the library, specifically the MsAdalAngular6Service. This way, I eliminated the need to import the entire MsAdalAngular6Module. The drawback is that I no longer have access to their AuthenticationGuard feature. However, this can be easily mitigated with a simple if-else statement based on their code.

The service I created looks like this:

import { Injectable } from '@angular/core';
import { MsAdalAngular6Service } from "microsoft-adal-angular6";
import { ConfigurationService } from "../configuration.service";

@Injectable( {
    providedIn: 'root'
} )
export class MsAdalAdapterService {

    private _adalSvc: MsAdalAngular6Service;

    constructor( private configService: ConfigurationService ) {
        this._adalSvc = new MsAdalAngular6Service( configService.adalConfig );
    }

    get adalSvc(): MsAdalAngular6Service {
        return this._adalSvc;
    }
}

Perhaps this solution will prove helpful to someone facing a similar challenge.

Answer 2

I encountered a similar issue and managed to resolve it by creating my own service that only includes the necessary component of the library, specifically the MsAdalAngular6Service. This way, I eliminated the need to import the entire MsAdalAngular6Module. The drawback is that I no longer have access to their AuthenticationGuard feature. However, this can be easily mitigated with a simple if-else statement based on their code.

The service I created looks like this:

import { Injectable } from '@angular/core';
import { MsAdalAngular6Service } from "microsoft-adal-angular6";
import { ConfigurationService } from "../configuration.service";

@Injectable( {
    providedIn: 'root'
} )
export class MsAdalAdapterService {

    private _adalSvc: MsAdalAngular6Service;

    constructor( private configService: ConfigurationService ) {
        this._adalSvc = new MsAdalAngular6Service( configService.adalConfig );
    }

    get adalSvc(): MsAdalAngular6Service {
        return this._adalSvc;
    }
}

Perhaps this solution will prove helpful to someone facing a similar challenge.

"Customizing the MsAdalAngular6Module setup on the fly - a step-by-step

Answer №1

Similar questions

User authentication on AngularJs is only initiated on the second interaction

Simpler and more sustainable methods for embedding HTML elements using a configuration file

Encountering an unanticipated reference error while attempting to paste the data

redux store is not synchronized with the state retrieved from redux logger using store().getState()

Tips for avoiding duplicate checkboxes in AngularJS when labels are the same

Accessing clipboard contents upon button click using TypeScript

Is it feasible to manipulate MySQL data with a React Native application?

Tips on retrieving 'captureDate' from data points and dispatching it as a notification

extract element from a string with the help of jquery

Is there a way to display the button only when the user is able to enter an email in the input field?

Tips on attaining the desired CSS impact

Calculating time differences using moment.js

The value returned by EntityRecognizer.resolveTime is considered as 'undefined'

Promise refused due to non-error caution

Setting up types for variables in Angular 2 componentsHere is an

Utilizing jQuery to toggle containers based on link clicks

Guide to transforming Excel formulas into JavaScript

Exploring hierarchical information within a JSON response from a Wiki API

Collaborating and monitoring data between controllers

Acquire multiple instances of NestJs dependencies using dependency injection within a single class