Okta Access-token is returned undefined to Angular application deployed on AWS Cloudfront

I have integrated with okta recently and I am using @okta/okta-angular for angular.

In local everything is working fine. I am able to log in and the okta is redirecting correctly and the user is being authenticated.

but the same code is not working in the environment (https site) I have added URL to TRUSTED ORIGIN and also to logout and login URI in okta account.

In the ENVIRONMENT:

when I click on login it is redirecting me to okta. When Login is successful it is redirecting back to my application but when I console the access token and user authentication it is showing as undefined and false. (which is working fine in local)

 const accessToken =  await this.oktaAuth.getAccessToken();
   console.log('accessToken-----',accessToken);
    this.isAuthenticated =  await this.oktaAuth.isAuthenticated();
    console.log('this.isAuthenticated----',this.isAuthenticated);
    if (!!accessToken) {
      this.oktaAuth.getUser().then((claims:UserClaims) => {
        this.providerMARecord.emit(claims);
      });
    }

from Okta Access-token is returned undefined to Angular application deployed on AWS Cloudfront