LB4: Authorize provider context is having empty principals

Question

I'm new to loopback when I went through the documentation for authorization examples.

AuthorizationContext: contains current principal invoking an endpoint, request context, and expected roles and scopes. Followed the same steps as mentioned in the doc, but while debugging I have found that AuthorizationContext.prinicpals is empty. Here is the authorize provider

import {
  AuthorizationContext, AuthorizationDecision, AuthorizationMetadata, Authorizer
} from '@loopback/authorization';
import {Provider} from '@loopback/core';

export class MyAuthorizationProvider implements Provider<Authorizer> {
  constructor() {}

  /**
   * @returns authenticateFn
   */
  value(): Authorizer {
    return this.authorize.bind(this);
  }

  async authorize(
    authorizationCtx: AuthorizationContext,
    metadata: AuthorizationMetadata,
  ) {
    console.log(authorizationCtx);
    const clientRole = authorizationCtx.principals[0].role;
    const allowedRoles = metadata.allowedRoles;
    return allowedRoles?.includes(clientRole)
      ? AuthorizationDecision.ALLOW
      : AuthorizationDecision.DENY;
  }
}