feat: Use V2 API's in Console (#9312)

# Which Problems Are Solved
Solves #8976

# Additional Changes
I have done some intensive refactorings and we are using the new
@zitadel/client package for GRPC access.

# Additional Context
- Closes #8976

---------

Co-authored-by: Max Peintner <peintnerm@gmail.com>

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

@@ -1,9 +1,8 @@
 import { PlatformLocation } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthConfig } from 'angular-oauth2-oidc';
-import { catchError, switchMap, tap, throwError } from 'rxjs';
+import { catchError, firstValueFrom, switchMap, tap } from 'rxjs';
 
 import { AdminServiceClient } from '../proto/generated/zitadel/AdminServiceClientPb';
 import { AuthServiceClient } from '../proto/generated/zitadel/AuthServiceClientPb';
@@ -12,13 +11,18 @@ import { fallbackLanguage, supportedLanguagesRegexp } from '../utils/language';
 import { AuthenticationService } from './authentication.service';
 import { EnvironmentService } from './environment.service';
 import { ExhaustedService } from './exhausted.service';
-import { AuthInterceptor } from './interceptors/auth.interceptor';
+import { AuthInterceptor, AuthInterceptorProvider, NewConnectWebAuthInterceptor } from './interceptors/auth.interceptor';
 import { ExhaustedGrpcInterceptor } from './interceptors/exhausted.grpc.interceptor';
 import { I18nInterceptor } from './interceptors/i18n.interceptor';
 import { OrgInterceptor } from './interceptors/org.interceptor';
 import { StorageService } from './storage.service';
-import { FeatureServiceClient } from '../proto/generated/zitadel/feature/v2beta/Feature_serviceServiceClientPb';
-import { GrpcAuthService } from './grpc-auth.service';
+import { UserServiceClient } from '../proto/generated/zitadel/user/v2/User_serviceServiceClientPb';
+//@ts-ignore
+import { createUserServiceClient } from '@zitadel/client/v2';
+//@ts-ignore
+import { createAuthServiceClient, createManagementServiceClient } from '@zitadel/client/v1';
+import { createGrpcWebTransport } from '@connectrpc/connect-web';
+import { FeatureServiceClient } from '../proto/generated/zitadel/feature/v2/Feature_serviceServiceClientPb';
 
 @Injectable({
   providedIn: 'root',
@@ -28,15 +32,20 @@ export class GrpcService {
   public mgmt!: ManagementServiceClient;
   public admin!: AdminServiceClient;
   public feature!: FeatureServiceClient;
+  public user!: UserServiceClient;
+  public userNew!: ReturnType<typeof createUserServiceClient>;
+  public mgmtNew!: ReturnType<typeof createManagementServiceClient>;
+  public authNew!: ReturnType<typeof createAuthServiceClient>;
 
   constructor(
-    private envService: EnvironmentService,
-    private platformLocation: PlatformLocation,
-    private authenticationService: AuthenticationService,
-    private storageService: StorageService,
-    private dialog: MatDialog,
-    private translate: TranslateService,
-    private exhaustedService: ExhaustedService,
+    private readonly envService: EnvironmentService,
+    private readonly platformLocation: PlatformLocation,
+    private readonly authenticationService: AuthenticationService,
+    private readonly storageService: StorageService,
+    private readonly translate: TranslateService,
+    private readonly exhaustedService: ExhaustedService,
+    private readonly authInterceptor: AuthInterceptor,
+    private readonly authInterceptorProvider: AuthInterceptorProvider,
   ) {}
 
   public loadAppEnvironment(): Promise<any> {
@@ -44,66 +53,79 @@ export class GrpcService {
 
     const browserLanguage = this.translate.getBrowserLang();
     const language = browserLanguage?.match(supportedLanguagesRegexp) ? browserLanguage : fallbackLanguage;
-    return this.translate
-      .use(language || this.translate.defaultLang)
-      .pipe(
-        switchMap(() => this.envService.env),
-        tap((env) => {
-          if (!env?.api || !env?.issuer) {
-            return;
-          }
-          const interceptors = {
-            unaryInterceptors: [
-              new ExhaustedGrpcInterceptor(this.exhaustedService, this.envService),
-              new OrgInterceptor(this.storageService),
-              new AuthInterceptor(this.authenticationService, this.storageService, this.dialog),
-              new I18nInterceptor(this.translate),
-            ],
-          };
+    const init = this.translate.use(language || this.translate.defaultLang).pipe(
+      switchMap(() => this.envService.env),
+      tap((env) => {
+        if (!env?.api || !env?.issuer) {
+          return;
+        }
+        const interceptors = {
+          unaryInterceptors: [
+            new ExhaustedGrpcInterceptor(this.exhaustedService, this.envService),
+            new OrgInterceptor(this.storageService),
+            this.authInterceptor,
+            new I18nInterceptor(this.translate),
+          ],
+        };
 
-          this.auth = new AuthServiceClient(
-            env.api,
-            null,
-            // @ts-ignore
-            interceptors,
-          );
-          this.mgmt = new ManagementServiceClient(
-            env.api,
-            null,
-            // @ts-ignore
-            interceptors,
-          );
-          this.admin = new AdminServiceClient(
-            env.api,
-            null,
-            // @ts-ignore
-            interceptors,
-          );
-          this.feature = new FeatureServiceClient(
-            env.api,
-            null,
-            // @ts-ignore
-            interceptors,
-          );
+        this.auth = new AuthServiceClient(
+          env.api,
+          null,
+          // @ts-ignore
+          interceptors,
+        );
+        this.mgmt = new ManagementServiceClient(
+          env.api,
+          null,
+          // @ts-ignore
+          interceptors,
+        );
+        this.admin = new AdminServiceClient(
+          env.api,
+          null,
+          // @ts-ignore
+          interceptors,
+        );
+        this.feature = new FeatureServiceClient(
+          env.api,
+          null,
+          // @ts-ignore
+          interceptors,
+        );
+        this.user = new UserServiceClient(
+          env.api,
+          null,
+          // @ts-ignore
+          interceptors,
+        );
 
-          const authConfig: AuthConfig = {
-            scope: 'openid profile email',
-            responseType: 'code',
-            oidc: true,
-            clientId: env.clientid,
-            issuer: env.issuer,
-            redirectUri: window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'auth/callback',
-            postLogoutRedirectUri: window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'signedout',
-            requireHttps: false,
-          };
+        const transport = createGrpcWebTransport({
+          baseUrl: env.api,
+          interceptors: [NewConnectWebAuthInterceptor(this.authInterceptorProvider)],
+        });
+        this.userNew = createUserServiceClient(transport);
+        this.mgmtNew = createManagementServiceClient(transport);
+        this.authNew = createAuthServiceClient(transport);
 
-          this.authenticationService.initConfig(authConfig);
-        }),
-        catchError((err) => {
-          console.error('Failed to load environment from assets', err);
-          return throwError(() => err);
-        }),
-      )
-      .toPromise();
+        const authConfig: AuthConfig = {
+          scope: 'openid profile email',
+          responseType: 'code',
+          oidc: true,
+          clientId: env.clientid,
+          issuer: env.issuer,
+          redirectUri: window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'auth/callback',
+          postLogoutRedirectUri: window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'signedout',
+          requireHttps: false,
+        };
+
+        this.authenticationService.initConfig(authConfig);
+      }),
+      catchError((err) => {
+        console.error('Failed to load environment from assets', err);
+        throw err;
+      }),
+    );
+
+    return firstValueFrom(init);
   }
 }