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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.