TypeError: window.crypto.randomUUID is not a function

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.5.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.8

Public or Confidential Client?

Public

Description

After upgrading to the msal 3 major version, I am not able to run my built application. I get the same error which is already mentioned twice inside another issue, which is already closed:

Something strange is that is works with the development server, but if I build it (using Docker: node:18-alpine) and run it within an NGINX (using Docker: nginxinc/nginx-unprivileged:1.24-alpine), the error is shown in the console.

My modules looks like this

function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(GRAPH_ENDPOINT + 'me', ['user.read']);

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

function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { interactionType: InteractionType.Popup };
}

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

@NgModule({
  imports: [
    CommonModule,
    MsalModule,
  ],
  exports: [],
})
export class Ms365Module {
  static forRoot(options: {
    clientId: string;
    redirectUri: string;
  }): ModuleWithProviders<Ms365Module> {
    return {
      ngModule: Ms365Module,
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true,
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: () => {
            return new PublicClientApplication({
              auth: {
                clientId: options.clientId,
                authority: 'https://login.microsoftonline.com/common',
                redirectUri: options.redirectUri,
                postLogoutRedirectUri: options.redirectUri,
              },
              cache: {
                cacheLocation: BrowserCacheLocation.LocalStorage,
              },
              system: {
                allowNativeBroker: false,
                loggerOptions: {
                  loggerCallback,
                  piiLoggingEnabled: true,
                  logLevel: LogLevel.Verbose
                }
              }
            });
          },
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory,
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory
        },
        MsalService,
      ],
    };
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ... ,
    Ms365Module.forRoot({
      clientId: environment.ms365.appId,
      redirectUri: window.location.origin,
    }),
  ],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(
    private readonly msalService: MsalService,
    ) {}

  async ngDoBootstrap(appRef: ApplicationRef) {
    await firstValueFrom(this.msalService.handleRedirectObservable());
    appRef.bootstrap(AppComponent);
  }
}

Unfortunatelly this is not only blocking our company project from updating the msal packages to the 3.x versions, but also to update Angular to Angular 16 since there is no support for this anymore from MSAL Angular v2

Error Message

TypeError: window.crypto.randomUUID is not a function at Q (BrowserCrypto.mjs:60:26) at v.addEventCallback (EventHandler.mjs:24:5) at Ui.addEventCallback (StandardController.mjs:984:205) at Se.addEventCallback (PublicClientApplication.mjs:100:32) at new xe (azure-msal-angular.mjs:121:14) at xe.ɵfac [as factory] (azure-msal-angular.mjs:129:34) at mc.hydrate (core.mjs:9446:5) at mc.get (core.mjs:9314:87) at Mn (core.mjs:835:9) at Object.In (core.mjs:842:82)

Msal Logs

3 '[Fri, 01 Dec 2023 08:58:42 GMT] : [] : @azure/msal-browser@3.5.0 : Verbose - BrowserCrypto: modern crypto interface available' false

MSAL Configuration

{
              auth: {
                clientId: options.clientId,
                authority: 'https://login.microsoftonline.com/common',
                redirectUri: options.redirectUri,
                postLogoutRedirectUri: options.redirectUri,
              },
              cache: {
                cacheLocation: BrowserCacheLocation.LocalStorage,
              },
              system: {
                allowNativeBroker: false,
                loggerOptions: {
                  loggerCallback: console.log,
                  piiLoggingEnabled: true,
                  logLevel: LogLevel.Verbose
                }
              }
            }

Relevant Code Snippets

function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(GRAPH_ENDPOINT + 'me', ['user.read']);

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

function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { interactionType: InteractionType.Popup };
}

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

@NgModule({
  imports: [
    CommonModule,
    MsalModule,
  ],
  exports: [],
})
export class Ms365Module {
  static forRoot(options: {
    clientId: string;
    redirectUri: string;
  }): ModuleWithProviders<Ms365Module> {
    return {
      ngModule: Ms365Module,
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true,
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: () => {
            return new PublicClientApplication({
              auth: {
                clientId: options.clientId,
                authority: 'https://login.microsoftonline.com/common',
                redirectUri: options.redirectUri,
                postLogoutRedirectUri: options.redirectUri,
              },
              cache: {
                cacheLocation: BrowserCacheLocation.LocalStorage,
              },
              system: {
                allowNativeBroker: false,
                loggerOptions: {
                  loggerCallback,
                  piiLoggingEnabled: true,
                  logLevel: LogLevel.Verbose
                }
              }
            });
          },
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory,
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory
        },
        MsalService,
      ],
    };
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ... ,
    Ms365Module.forRoot({
      clientId: environment.ms365.appId,
      redirectUri: window.location.origin,
    }),
  ],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(
    private readonly msalService: MsalService,
    ) {}

  async ngDoBootstrap(appRef: ApplicationRef) {
    await firstValueFrom(this.msalService.handleRedirectObservable());
    appRef.bootstrap(AppComponent);
  }
}

Reproduction Steps

Setup an Angular project with the above modules
Run the build
Open the browser on any page

Expected Behavior

The build is not broken

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox, Safari

Regression

@azure/msal-angular: 2.5.12, @azure/msal-browser: 2.38.3

Source

External (Customer)

AzureAD / microsoft-authentication-library-for-js