fix: load metadata using user service (#9429)

# Which Problems Are Solved
- #9382 "When I log in and get to my user profile page, I get an empty
error message at the top:"

# How the Problems Are Solved
load metadata using user service

# Additional Changes
- The roles observable returns an empty array instead of never emiting
- Small refactorings in app.component.ts because at first I thought the
errors stems from there.
- Added withLatestFromSynchronousFix RXJS operator because
withLatestFrom has confusing behavior when used in synchronous contexts.
Why this operator is needed is described here:
https://github.com/ReactiveX/rxjs/issues/7068

# Additional Context
- Closes #9382

console/src/app/services/grpc-auth.service.ts

@@ -1,21 +1,7 @@
 import { Injectable } from '@angular/core';
 import { SortDirection } from '@angular/material/sort';
 import { OAuthService } from 'angular-oauth2-oidc';
-import {
-  BehaviorSubject,
-  combineLatestWith,
-  defer,
-  distinctUntilKeyChanged,
-  EMPTY,
-  forkJoin,
-  mergeWith,
-  NEVER,
-  Observable,
-  of,
-  shareReplay,
-  Subject,
-  TimeoutError,
-} from 'rxjs';
+import { BehaviorSubject, combineLatestWith, EMPTY, mergeWith, NEVER, Observable, of, shareReplay, Subject } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, finalize, map, startWith, switchMap, tap, timeout } from 'rxjs/operators';
 
 import {
@@ -186,7 +172,6 @@ export class GrpcAuthService {
           .then((resp) => resp.resultList)
           .catch(() => <string[]>[]),
       ),
-      filter((roles) => !!roles.length),
       distinctUntilChanged((a, b) => {
         return JSON.stringify(a.sort()) === JSON.stringify(b.sort());
       }),
@@ -302,7 +287,6 @@ export class GrpcAuthService {
     }
 
     return this.zitadelPermissions.pipe(
-      filter((permissions) => !!permissions.length),
       map((permissions) => this.hasRoles(permissions, roles, requiresAll)),
       distinctUntilChanged(),
     );

console/src/app/services/new-auth.service.ts

@@ -1,12 +1,9 @@
 import { Injectable } from '@angular/core';
 import { GrpcService } from './grpc.service';
-import { create } from '@bufbuild/protobuf';
 import {
-  AddMyAuthFactorOTPSMSRequestSchema,
   AddMyAuthFactorOTPSMSResponse,
-  GetMyUserRequestSchema,
   GetMyUserResponse,
-  VerifyMyPhoneRequestSchema,
+  ListMyMetadataResponse,
   VerifyMyPhoneResponse,
 } from '@zitadel/proto/zitadel/auth_pb';
 
@@ -17,14 +14,18 @@ export class NewAuthService {
   constructor(private readonly grpcService: GrpcService) {}
 
   public getMyUser(): Promise<GetMyUserResponse> {
-    return this.grpcService.authNew.getMyUser(create(GetMyUserRequestSchema));
+    return this.grpcService.authNew.getMyUser({});
   }
 
   public verifyMyPhone(code: string): Promise<VerifyMyPhoneResponse> {
-    return this.grpcService.authNew.verifyMyPhone(create(VerifyMyPhoneRequestSchema, { code }));
+    return this.grpcService.authNew.verifyMyPhone({});
   }
 
   public addMyAuthFactorOTPSMS(): Promise<AddMyAuthFactorOTPSMSResponse> {
-    return this.grpcService.authNew.addMyAuthFactorOTPSMS(create(AddMyAuthFactorOTPSMSRequestSchema));
+    return this.grpcService.authNew.addMyAuthFactorOTPSMS({});
+  }
+
+  public listMyMetadata(): Promise<ListMyMetadataResponse> {
+    return this.grpcService.authNew.listMyMetadata({});
   }
 }