How to send token authentication to backend using okta and standalone Angular and SpringBoot 3 login widget

Below is my code on how to send authentication to Spring boot side but I get an error that cannot be sent, can someone help me?

auth-interceptor.service.ts

@Injectable({
providedIn: ‘root’
})
export class AuthInterceptorService implements HttpInterceptor {

constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) { }
intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
console.log(‘Access Token:1111’);
return from(this.handleAccess(request, next));
// from() là một hàm từ thư viện RxJS trong Angular được sử dụng để tạo ra một observable từ một promise, một iterable,…
}
private async handleAccess(request:HttpRequest, next:HttpHandler): Promise<HttpEvent> {
//thêm mã thông báo cho các api được bảo mật
const securityEndpoint =[‘http://localhost:8080/api/orders’];
console.log(‘Access Token:1111’);
alert(‘Access Token:1111’);
if(securityEndpoint.some(url=>request.urlWithParams.includes(url))){//kiểm tra xem url có chứa trong securityEndpoint không
const accessToken = this.oktaAuth.getAccessToken();
console.log(‘Access Token:’, accessToken);
//clone the reuqest(vì yêu cầu ko thể thay đổi trực tiếp được)
request = request.clone({
setHeaders: {
Authorization: 'Bearer '+accessToken
}

  });
}

return await lastValueFrom(next.handle(request));
//lastValueFrom() chuyển đổi observable thành promise
}
}

config.ts

i
const oktaConfig= new OktaAuth(oicd_config.oidc);

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
provideHttpClient(),
{ provide: OKTA_CONFIG, useValue: { oktaAuth: oktaConfig } },
importProvidersFrom(OktaAuthModule.forRoot({ oktaAuth: oktaConfig })),
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true },

],
};

Update:
securityConfiguration.class

package com.example.demo.config;

import com.okta.spring.boot.oauth.Okta;

@ Configuration
@ EnableWebSecurity
public class SecurityConfiguration {
@ Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.authorizeHttpRequests((requests) → requests
.requestMatchers(“/api/orders/**”).authenticated()
.anyRequest().permitAll());
http.oauth2ResourceServer(oauth2 → oauth2.jwt(Customizer.withDefaults()));

	return http.build();
}

}

Screenshot 2024-05-07 180631

Hello @shirukento1,

You might check some of the solutions over in this thread: Getting 401 error while calling spring-boot api from angular app - #17 by mraible

Essentially, I’d make sure that the callback route is correctly configured, and if you are passing through OktaAuthGuard you can check for errors there: GitHub - okta/okta-angular: Angular SDK for Okta's OIDC flow - this could be something you need to use to access a protected route using the ID Token, so if you aren’t using this it may be a good idea. In the case of the above post it was removed to resolve the situation, which indicates it’s not a protected route using that function and possibly that the ID Token check is coming from somewhere else.