Callback component redirecting to home before executing subscriptions

In our Angular app, we use auth0 loginWithRedirect which calls the following callback component in our application. Here, we need to get the appState and the user claims to do some actions so that the app is ready to serve the right content.

selector: ‘app-callback’,
templateUrl: ‘./callback.component.html’,
styleUrls: [‘./callback.component.scss’],

export class CallbackComponent implements OnInit {
private user: Profile;
buttonType: any;
isFirstLogin: boolean;

private readonly auth: AuthService,
private router: Router
) {}

ngOnInit(): void {

console.log("callback ngOnInit");

this.auth.appState$.subscribe((appState) => {
this.callbackData.buttonType = appState.buttonType;
this.auth.user$.subscribe((result) => {
this.callbackData.profile = result;

    this.auth.idTokenClaims$.subscribe(async (claims) => {
      let idToken = claims.__raw;
      this.callbackData.profile.idToken = idToken;
      this.callbackData.profile.user_type = appState.user_type;
      this.callbackData.inviteId = appState.invitationId

      ).then( result => {
        let identityId = result;
        this.callbackData.profile.expert_id = identityId;




While it works sometimes but there are times the app doesn’t execute the subscriptions and moves to the home page and the console.log(appState) doesn’t get executed. I have also tried to subscribing to this.auth.user$ first with no luck.

I have tried moving this logic into a Route Resolver but that also had a similar issue as I had to return an observable from the resolver and the home page starts to load before the route is fully resolved.

I have searched through the forum but couldn’t figure out any ways to get this working.

Please share your ideas as I have spent a lot of time on this.