MSAL 2 - Angular 12 sample does not work

[Neutrino-Sunset]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.16.1

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.2

Description

The Angular 12 sample here does not work.

Error Message

Attempting to login using the Redirect method reports That Microsoft account doesn’t exist. Enter a different account or get a new one.

Msal Logs

I don't know how to do that.

MSAL Configuration

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
import { FailedComponent } from './failed/failed.component';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6', // Prod enviroment. Uncomment to use. 
      clientId: '3fba556e-5d4a-48e3-8e1a-fd57c12cb82e', // PPE testing environment
      // authority: 'https://login.microsoftonline.com/common', // Prod environment. Uncomment to use.
      authority: 'https://login.windows-ppe.net/common', // PPE testing environment.
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  // protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']); // Prod environment. Uncomment to use.
  protectedResourceMap.set('https://graph.microsoft-ppe.com/v1.0/me', ['user.read']);

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

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read']
    },
    loginFailedRoute: '/login-failed'
  };
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
    FailedComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatMenuModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

Relevant Code Snippets

It's your own sample code that doesn't work, I'm not sure what code you want me to provide.

Reproduction Steps

1. Download the sample.
2. npm i
3. npm start
4. Go to http:localhost:4200
5. Click Login > Redirect
6. Attempt to login using a Microsoft account

Expected Behavior

You should be logged in and able to access your profile.

Identity Provider

Other

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[tnorling]

@Neutrino-Sunset Please use your own clientId and authority. The default values in our samples are used for internal testing.

[ghost]

@Neutrino-Sunset This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

[niravparikh05]

Sample provided in quickstarts for Angular SPA fails due to below, apparently it is looking for client_secret and no where in microsoft docs it is mentioned on where to provide the same.

Reference configuration from microsoft tutorials as well (client secret not provided) https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/1-Authentication/2-sign-in-b2c/SPA/src/app/auth-config.ts

core.js:5980 ERROR ServerError: invalid_client: 7000218 - [2021-08-25 18:31:23Z]: AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'. Trace ID: f0a9b48e-f070-464e-a645-9315cbab8601 Correlation ID: f79a1841-35c0-4ede-b43f-b0dde37f8145 Timestamp: 2021-08-25 18:31:23Z - Correlation ID: f79a1841-35c0-4ede-b43f-b0dde37f8145 - Trace ID: f0a9b48e-f070-464e-a645-9315cbab8601 at ServerError.AuthError [as constructor] (AuthError.ts:40) at new ServerError (ServerError.ts:14) at ResponseHandler.validateTokenResponse (ResponseHandler.ts:99) at AuthorizationCodeClient. (AuthorizationCodeClient.ts:80) at step (vendor.js:111987) at Object.next (vendor.js:111917) at fulfilled (vendor.js:111871) at ZoneDelegate.invoke (zone.js:386) at Object.onInvoke (core.js:28301) at ZoneDelegate.invoke (zone.js:385)

[tnorling]

@niravparikh05 You need to register your replyUrl as type "SPA": https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/1-Authentication/2-sign-in-b2c/README.md#register-the-app-msal-angular-spa

[niravparikh05]

Thanks a lot for your response. Much appreciated.

I had both web and spa selected and hence the issue.