Keycloak 22.0 authentication with Angular and Django Rest Framework (DRF)

Question

I am using Angular 18 as frontend of my application and DRF as backend. I want to use Keycloak 22.0 for authentication and auuthorization. I have configured angular as per keycloak-angular library and drf as keycloak-django library.

Keycloak-angular configuration:

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'your-realm',
        clientId: 'your-client-id'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

As we can see in angular we dont supply client_secret_key as being in client side. The problem is django-rest-framework requires client_secret_key in order to validate the token. If I configure keycloak for authentication and authorization which gives client-secret-key angular stops working and gives error as unauthorised client whereas if I dont use client-secret-key then I cannot use backend which gives error client not authenticated.

How can I configure angular, drf and keycloak correctly ?

I want the correct configuration for Angular and DRF with keycloak authentication.