Angular with msal send invalid token to backend

Question

I have an angular 10 application and msal security library.

I use msal-browser 2.7.0

I used this example https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular10-browser-sample/src/app/app.module.ts

Part of app.module.ts

import { MsalInterceptorConfig } from './lib/msal/msal.interceptor.config';
import { MsalBroadcastService, MsalGuard, MsalInterceptor, MsalService, MSAL_INSTANCE } from './lib/msal';
import { MSAL_GUARD_CONFIG, MSAL_INTERCEPTOR_CONFIG } from './lib/msal/constants';
import { MsalGuardConfiguration } from './lib/msal/msal.guard.config';


function MSALInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({

        auth: {

          clientId: 'd1851226-abe8-4da6-8332-af8700e0d999',
          redirectUri: 'https://localhost:4200/find',
          authority: 'https://login.microsoftonline.com/4fc25658-87c2-42bf-913c-cb9ae315a768',
          postLogoutRedirectUri: window.location.origin
        }
    });

}

function MSALInterceptorConfigFactory(): MsalInterceptorConfig {
    const protectedResourceMap = new Map<string, Array<string>>();
    protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
    protectedResourceMap.set('http://localhost:8080/v2/**', ['openid' ]);
    protectedResourceMap.set('http://localhost:8081/v2/**', ['openid' ]);

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

}

@NgModule({

    declarations: [
        AppComponent,
        FormValidationHintComponent
    ],

    imports: [

        AppRoutingModule,
        BrowserModule,
        FontAwesomeModule,
        HttpClientModule,
        DataTablesModule,
        ModalModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        ToastrModule.forRoot({
        preventDuplicates: true
        }),

        TranslateModule.forRoot({

        loader: {
            provide: TranslateLoader,
            useClass: WebpackTranslateLoader
        },
        defaultLanguage: 'en'
        })
    ],

    providers: [

    DatePipe,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AppHttpInterceptor,
        multi: true
    },

    {
            provide: APP_INITIALIZER,
            useFactory: initializeApp,
            multi: true,
            deps: [HttpBackend, ConfigurationService]
    },

    {

        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
    },

    {
        provide: MSAL_INSTANCE,
        useFactory: MSALInstanceFactory
    },

    {
        provide: MSAL_GUARD_CONFIG,

        useValue: {
        //interactionType: InteractionType.Redirect,
        interactionType: InteractionType.Popup
        } as MsalGuardConfiguration
    },

    {
        provide: MSAL_INTERCEPTOR_CONFIG,
        useFactory: MSALInterceptorConfigFactory
    },

    MsalService,
    MsalGuard,
    MsalBroadcastService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {}

Access token it's send to the backend, but when it's respond invalid token. I tested it on jwt.io, it said invalid signature.

If i use id token, backend response correctly.

My backend end part

@Configuration
@EnableWebSecurity(debug = true)
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    private JwtAuthenticationConverter jwtAuthenticationConverter() {
        JwtGrantedAuthoritiesConverter jwtGrantedAuthoritiesConverter = new JwtGrantedAuthoritiesConverter();
        jwtGrantedAuthoritiesConverter.setAuthoritiesClaimName("roles");
        jwtGrantedAuthoritiesConverter.setAuthorityPrefix("ROLE_");
        JwtAuthenticationConverter jwtAuthenticationConverter = new JwtAuthenticationConverter();
        jwtAuthenticationConverter.setJwtGrantedAuthoritiesConverter(jwtGrantedAuthoritiesConverter);
        return jwtAuthenticationConverter;
}

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues())
            .and() // (1)
            .authorizeRequests().antMatchers("/api/**").hasRole("level1")
            .anyRequest().authenticated() // (2)
            .and()
            .oauth2ResourceServer().jwt() // (3)
            .jwtAuthenticationConverter(jwtAuthenticationConverter());

    }

}

In my application.properties, I have

spring.security.oauth2.resourceserver.jwt.jwk-set-uri=https://login.microsoftonline.com/4fc25658-87c2-42bf-913c-cb9ae315a768/discovery/v2.0/token