I built an angular application and I wanted to let users connect to it only via microsoft account using @azure/msal-angular and @azure/msal-browser packages.

I created a component to handle the connection called login

this is login.component.ts

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { AuthenticationResult } from '@azure/msal-browser';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  title = 'Authenticate with Microsoft';

  constructor(private msalService: MsalService){
  }

  isLoggedIn() : boolean {
    return this.msalService.instance.getActiveAccount() != null
  }

  login() {
    this.msalService.loginRedirect();
    // this.msalService.loginPopup().subscribe((response: AuthenticationResult) => {
    //   this.msalService.instance.setActiveAccount(response.account)
    // })
  }

  logout() {
    this.msalService.logout();
  }

  ngOnInit(): void {
    this.msalService.instance.handleRedirectPromise().then(
      res => {
        if (res != null && res.account != null) {
          this.msalService.instance.setActiveAccount(res.account)
        }
      }
    )
  }

}

login.component.html

<div class="login_component">
  <table>
    <tr>
      <td><button (click)="login();" *ngIf="!isLoggedIn()">SIGN IN</button></td>
      <td><button (click)="logout();" *ngIf="isLoggedIn()">SIGN OUT</button></td>
    </tr>
  </table>

  <div *ngIf="isLoggedIn()">
    <h3>The user is logged in</h3>
  </div>
  <div *ngIf=!isLoggedIn()>
    <h3>You are NOT log in !!!</h3>
  </div>
</div>

<style>
  .login_component {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>

app.module.ts

// IMPORT FOR ANGULAR CORE
import { LoginComponent } from './login/login.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// IMPORT FOR ANGULAR MATERIAL
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

// OTHER
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomePageComponent } from './home-page/home-page.component';


// START LOGIN WITH MICROSOFT
import { MsalModule, MSAL_INSTANCE, MsalService } from '@azure/msal-angular';
import { IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'something-here', // Application id
      authority: 'another-thing-here', // Directory (tenant) id
      redirectUri: 'http://localhost:4200' // Need to be changed in production
    }
  })
}
// END OF LOGIN WITH MICROSOFT

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    DealListComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MsalModule,
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <app-login></app-login>
</div>

<router-outlet></router-outlet>

and finally my app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';
import { LoginComponent } from './login/login.component';


// ROUTES
const appRoutes: Routes =[
  {path: '', component: LoginComponent},
  {path: 'home', component: HomePageComponent},
]

@NgModule({
  imports:
  [RouterModule.forRoot(appRoutes,{ enableTracing: true })


  ],
  exports: [RouterModule
  ]



})
export class AppRoutingModule { }

When I click on that button

<td><button (click)="login();" *ngIf="!isLoggedIn()">SIGN IN</button></td>

to login, nothing is happening. When I tried to do it with loginPopup() in the login function (login.component.ts), I would've had a popup which disappeared right after appearing. I thought it was a registration application problem with portal.azure.com so I deleted the previous app registration and created a new one and put the id's in the app.module but still nothing.

Any help will be appreciated.

Thank you so much !

CodePudding user response：

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '0d6bd648-96d2-451b-9b06-5e087ec9a11c', // Application (iSell ) id

      // I had to put it that way, not just the tenantID 
      authority: 'https://login.microsoftonline.com/tenantID', // Directory (tenant) id


      redirectUri: 'http://localhost:4200', // Need to be changed when in production
      // clientId: 'de55bfa3-1bc6-450a-b2b6-83b38186af92',
      // redirectUri: 'http://localhost:4200',
    }
  })
}