From f69d922bc1fad4d412221dbacc0cd49b78784b4c Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Thu, 27 Jul 2023 15:54:34 +0200
Subject: [PATCH] fix async await client, react components

---
 apps/login/app/(login)/register/idp/page.tsx  |  30 ++++-
 apps/login/app/api/idp/start/route.ts         |  19 ++++
 apps/login/package.json                       |   3 +-
 apps/login/ui/SignInWithIDP.tsx               |  92 +++++++--------
 packages/zitadel-client/package.json          |   6 +-
 packages/zitadel-client/src/index.ts          |   8 ++
 packages/zitadel-client/tsup.config.ts        |  13 +++
 packages/zitadel-react/package.json           |   4 +-
 .../src/components/SignInWith.tsx             |  10 +-
 .../src/components/SignInWithAzureAD.tsx      |  37 +++---
 .../src/components/SignInWithGithub.tsx       |  35 +++---
 .../src/components/SignInWithGitlab.tsx       |  33 +++---
 .../src/components/SignInWithGoogle.tsx       |  18 +--
 packages/zitadel-react/src/index.tsx          |  15 +--
 pnpm-lock.yaml                                | 105 ++++++++++--------
 15 files changed, 257 insertions(+), 171 deletions(-)
 create mode 100644 apps/login/app/api/idp/start/route.ts
 create mode 100644 packages/zitadel-client/tsup.config.ts

diff --git a/apps/login/app/(login)/register/idp/page.tsx b/apps/login/app/(login)/register/idp/page.tsx
index 7313e33eced..e309f38b5e1 100644
--- a/apps/login/app/(login)/register/idp/page.tsx
+++ b/apps/login/app/(login)/register/idp/page.tsx
@@ -1,5 +1,27 @@
 import { getLegalAndSupportSettings, server } from "#/lib/zitadel";
 import { SignInWithIDP } from "#/ui/SignInWithIDP";
+import {
+  GetActiveIdentityProvidersResponse,
+  IdentityProvider,
+  ZitadelServer,
+  settings,
+} from "@zitadel/server";
+
+function getIdentityProviders(
+  server: ZitadelServer,
+  orgId?: string
+): Promise<IdentityProvider[] | undefined> {
+  const settingsService = settings.getSettings(server);
+  console.log("req");
+  return settingsService
+    .getActiveIdentityProviders(
+      orgId ? { ctx: { orgId } } : { ctx: { instance: true } },
+      {}
+    )
+    .then((resp: GetActiveIdentityProvidersResponse) => {
+      return resp.identityProviders;
+    });
+}
 
 export default async function Page({
   searchParams,
@@ -8,14 +30,18 @@ export default async function Page({
 }) {
   const legal = await getLegalAndSupportSettings(server);
 
-  console.log(server);
+  const identityProviders = await getIdentityProviders(server, "");
+
+  console.log(identityProviders);
 
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Register</h1>
       <p className="ztdl-p">Create your ZITADEL account.</p>
 
-      {legal && <SignInWithIDP server={server}></SignInWithIDP>}
+      {legal && identityProviders && (
+        <SignInWithIDP identityProviders={identityProviders}></SignInWithIDP>
+      )}
     </div>
   );
 }
diff --git a/apps/login/app/api/idp/start/route.ts b/apps/login/app/api/idp/start/route.ts
new file mode 100644
index 00000000000..84ef0547a25
--- /dev/null
+++ b/apps/login/app/api/idp/start/route.ts
@@ -0,0 +1,19 @@
+import { server, startIdentityProviderFlow } from "#/lib/zitadel";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  if (body) {
+    let { idpId, successUrl, failureUrl } = body;
+
+    return startIdentityProviderFlow(server, { idpId, successUrl, failureUrl })
+      .then((resp) => {
+        return NextResponse.json(resp);
+      })
+      .catch((error) => {
+        return NextResponse.json(error, { status: 500 });
+      });
+  } else {
+    return NextResponse.json({}, { status: 400 });
+  }
+}
diff --git a/apps/login/package.json b/apps/login/package.json
index cd355da39db..73dd6860921 100644
--- a/apps/login/package.json
+++ b/apps/login/package.json
@@ -36,13 +36,14 @@
     "@heroicons/react": "2.0.13",
     "@tailwindcss/forms": "0.5.3",
     "@vercel/analytics": "^1.0.0",
+    "@zitadel/client": "workspace:*",
     "@zitadel/next": "workspace:*",
     "@zitadel/react": "workspace:*",
     "@zitadel/server": "workspace:*",
     "clsx": "1.2.1",
     "date-fns": "2.29.3",
     "moment": "^2.29.4",
-    "next": "13.4.7",
+    "next": "13.4.12",
     "next-themes": "^0.2.1",
     "nice-grpc": "2.0.1",
     "react": "18.2.0",
diff --git a/apps/login/ui/SignInWithIDP.tsx b/apps/login/ui/SignInWithIDP.tsx
index cca46862456..11f8c36f330 100644
--- a/apps/login/ui/SignInWithIDP.tsx
+++ b/apps/login/ui/SignInWithIDP.tsx
@@ -1,57 +1,52 @@
-import { ReactNode } from "react";
+"use client";
+import { ReactNode, useState } from "react";
+
+// import { IdentityProviderType } from "@zitadel/server";
+// import { IdentityProvider } from "@zitadel/client";
 
-import {
-  ZitadelServer,
-  settings,
-  GetActiveIdentityProvidersResponse,
-  IdentityProvider,
-  IdentityProviderType,
-} from "@zitadel/server";
 import {
   SignInWithGitlab,
   SignInWithAzureAD,
   SignInWithGoogle,
   SignInWithGithub,
 } from "@zitadel/react";
-import { server, startIdentityProviderFlow } from "#/lib/zitadel";
+import { useRouter } from "next/navigation";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
-  server: ZitadelServer;
-  orgId?: string;
+  identityProviders: any[];
 }
 
-function getIdentityProviders(
-  server: ZitadelServer,
-  orgId?: string
-): Promise<IdentityProvider[] | undefined> {
-  const settingsService = settings.getSettings(server);
-  console.log("req");
-  return settingsService
-    .getActiveIdentityProviders(
-      orgId ? { ctx: { orgId } } : { ctx: { instance: true } },
-      {}
-    )
-    .then((resp: GetActiveIdentityProvidersResponse) => {
-      return resp.identityProviders;
+export function SignInWithIDP({ identityProviders }: SignInWithIDPProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  async function startFlow(idp: any) {
+    console.log("start flow");
+    const host = "http://localhost:3000";
+    setLoading(true);
+
+    const res = await fetch("/api/idp/start", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        idpId: idp.id,
+        successUrl: `${host}/api/idp/success`,
+        failureUrl: `${host}/api/idp/success`,
+      }),
     });
-}
 
-export async function SignInWithIDP(props: SignInWithIDPProps) {
-  console.log(props.server);
-  const identityProviders = await getIdentityProviders(
-    props.server,
-    props.orgId
-  );
+    const response = await res.json();
 
-  console.log(identityProviders);
-
-  function startFlow(idp: IdentityProvider) {
-    return startIdentityProviderFlow(server, {
-      idpId: idp.id,
-      successUrl: "",
-      failureUrl: "",
-    }).then(() => {});
+    setLoading(false);
+    if (!res.ok) {
+      setError(response.details);
+      return Promise.reject(response.details);
+    }
+    return response;
   }
 
   return (
@@ -59,43 +54,48 @@ export async function SignInWithIDP(props: SignInWithIDPProps) {
       {identityProviders &&
         identityProviders.map((idp, i) => {
           switch (idp.type) {
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
+            case 6: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
               return (
                 <SignInWithGithub
                   key={`idp-${i}`}
                   name={idp.name}
                 ></SignInWithGithub>
               );
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB_ES:
+            case 7: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB_ES:
               return (
                 <SignInWithGithub
                   key={`idp-${i}`}
                   name={idp.name}
                 ></SignInWithGithub>
               );
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_AZURE_AD:
+            case 5: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_AZURE_AD:
               return (
                 <SignInWithAzureAD
                   key={`idp-${i}`}
                   name={idp.name}
                 ></SignInWithAzureAD>
               );
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GOOGLE:
+            case 10: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GOOGLE:
               return (
                 <SignInWithGoogle
                   key={`idp-${i}`}
                   name={idp.name}
-                  onClick={() => startFlow(idp)}
+                  onClick={() =>
+                    startFlow(idp).then(({ authUrl }) => {
+                      console.log("done");
+                      router.push(authUrl);
+                    })
+                  }
                 ></SignInWithGoogle>
               );
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
+            case 8: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
               return (
                 <SignInWithGitlab
                   key={`idp-${i}`}
                   name={idp.name}
                 ></SignInWithGitlab>
               );
-            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB_SELF_HOSTED:
+            case 9: //IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB_SELF_HOSTED:
               return (
                 <SignInWithGitlab
                   key={`idp-${i}`}
diff --git a/packages/zitadel-client/package.json b/packages/zitadel-client/package.json
index 768c49a7884..43d997e21e6 100644
--- a/packages/zitadel-client/package.json
+++ b/packages/zitadel-client/package.json
@@ -11,12 +11,12 @@
   ],
   "scripts": {
     "generate": "buf generate https://github.com/zitadel/zitadel.git --path ./proto/zitadel",
-    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "build": "tsup --dts",
     "test": "pnpm test:unit",
     "test:watch": "pnpm test:unit:watch",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "dev": "tsup --watch --dts",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
@@ -41,4 +41,4 @@
     "nice-grpc-web": "^3.2.3",
     "protobufjs": "^7.2.3"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/zitadel-client/src/index.ts b/packages/zitadel-client/src/index.ts
index a116f088b01..2a240fb30c8 100644
--- a/packages/zitadel-client/src/index.ts
+++ b/packages/zitadel-client/src/index.ts
@@ -3,3 +3,11 @@ export { initializeApp, getApps } from "./app";
 export { getAuth } from "./auth";
 
 export type { ZitadelOptions } from "./app";
+export * from "./proto/client/zitadel/settings/v2alpha/legal_settings_pb";
+export * from "./proto/client/zitadel/settings/v2alpha/settings_service_pb";
+export * from "./proto/client/zitadel/settings/v2alpha/settings_pb";
+
+export * from "./proto/client/zitadel/idp_pb";
+export * from "./proto/client/zitadel/user_pb";
+
+export * from "./proto/client/zitadel/settings_pb";
diff --git a/packages/zitadel-client/tsup.config.ts b/packages/zitadel-client/tsup.config.ts
new file mode 100644
index 00000000000..2341f37cd49
--- /dev/null
+++ b/packages/zitadel-client/tsup.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  publicDir: true,
+  entry: ["src/index.ts", "src/**/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: true,
+  clean: true,
+  ...options,
+}));
diff --git a/packages/zitadel-react/package.json b/packages/zitadel-react/package.json
index 18f5df75cb7..e2abee12bdd 100644
--- a/packages/zitadel-react/package.json
+++ b/packages/zitadel-react/package.json
@@ -26,8 +26,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^17.0.13",
-    "@types/react-dom": "^17.0.8",
+    "@types/react": "^18.2.17",
+    "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@zitadel/tsconfig": "workspace:*",
     "autoprefixer": "10.4.13",
diff --git a/packages/zitadel-react/src/components/SignInWith.tsx b/packages/zitadel-react/src/components/SignInWith.tsx
index e35fd55208e..f99938a1a25 100644
--- a/packages/zitadel-react/src/components/SignInWith.tsx
+++ b/packages/zitadel-react/src/components/SignInWith.tsx
@@ -1,4 +1,8 @@
-export interface SignInWithIdentityProviderProps {
-  children?: React.ReactNode;
+import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+
+export type SignInWithIdentityProviderProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
   name?: string;
-}
+};
diff --git a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
index 23f03546bef..4a2161ac5d2 100644
--- a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
+++ b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
@@ -1,18 +1,25 @@
+"use client";
+
+import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export interface SignInWithAzureADProps
-  extends SignInWithIdentityProviderProps {}
-
-export function SignInWithAzureAD(props: SignInWithAzureADProps) {
-  return (
-    <div className="ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
+export const SignInWithAzureAD = forwardRef<
+  HTMLButtonElement,
+  SignInWithIdentityProviderProps
+>(
+  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
+    <button
+      type="button"
+      ref={ref}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      {...props}
+    >
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={25}
           height={24}
           fill="none"
-          {...props}
         >
           <path
             fill="#e24329"
@@ -32,11 +39,15 @@ export function SignInWithAzureAD(props: SignInWithAzureADProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">
-        {props.name ? props.name : "Sign in with AzureAD"}
-      </span>
-    </div>
-  );
-}
+      {children ? (
+        children
+      ) : (
+        <span className="ztdl-ml-4">
+          {name ? name : "Sign in with AzureAD"}
+        </span>
+      )}
+    </button>
+  )
+);
 
 SignInWithAzureAD.displayName = "SignInWithAzureAD";
diff --git a/packages/zitadel-react/src/components/SignInWithGithub.tsx b/packages/zitadel-react/src/components/SignInWithGithub.tsx
index b898240c0d1..e6c1c181270 100644
--- a/packages/zitadel-react/src/components/SignInWithGithub.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGithub.tsx
@@ -1,18 +1,25 @@
+"use client";
+
+import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export interface SignInWithGithubProps
-  extends SignInWithIdentityProviderProps {}
-
-export function SignInWithGithub(props: SignInWithGithubProps) {
-  return (
-    <div className="ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
+export const SignInWithGithub = forwardRef<
+  HTMLButtonElement,
+  SignInWithIdentityProviderProps
+>(
+  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
+    <button
+      type="button"
+      ref={ref}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      {...props}
+    >
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={25}
           height={24}
           fill="none"
-          {...props}
         >
           <path
             fill="#e24329"
@@ -32,11 +39,13 @@ export function SignInWithGithub(props: SignInWithGithubProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">
-        {props.name ? props.name : "Sign in with Github"}
-      </span>
-    </div>
-  );
-}
+      {children ? (
+        children
+      ) : (
+        <span className="ztdl-ml-4">{name ? name : "Sign in with Github"}</span>
+      )}
+    </button>
+  )
+);
 
 SignInWithGithub.displayName = "SignInWithGithub";
diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
index db617af45c7..b750ffeb855 100644
--- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
@@ -1,18 +1,23 @@
+import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export interface SignInWithGitlabProps
-  extends SignInWithIdentityProviderProps {}
-
-export function SignInWithGitlab(props: SignInWithGitlabProps) {
-  return (
-    <div className="ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
+export const SignInWithGitlab = forwardRef<
+  HTMLButtonElement,
+  SignInWithIdentityProviderProps
+>(
+  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
+    <button
+      type="button"
+      ref={ref}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      {...props}
+    >
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={25}
           height={24}
           fill="none"
-          {...props}
         >
           <path
             fill="#e24329"
@@ -32,11 +37,13 @@ export function SignInWithGitlab(props: SignInWithGitlabProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">
-        {props.name ? props.name : "Sign in with Gitlab"}
-      </span>
-    </div>
-  );
-}
+      {children ? (
+        children
+      ) : (
+        <span className="ztdl-ml-4">{name ? name : "Sign in with GitLab"}</span>
+      )}
+    </button>
+  )
+);
 
 SignInWithGitlab.displayName = "SignInWithGitlab";
diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
index 0af8840e363..54e2e48b71b 100644
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -1,23 +1,9 @@
-"use client";
-
-import {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  ReactNode,
-  forwardRef,
-} from "react";
+import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-type SignInWithGoogleProps = DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  name?: string;
-};
-
 export const SignInWithGoogle = forwardRef<
   HTMLButtonElement,
-  SignInWithGoogleProps
+  SignInWithIdentityProviderProps
 >(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
     <button
diff --git a/packages/zitadel-react/src/index.tsx b/packages/zitadel-react/src/index.tsx
index 01519318659..4ba8a3ea0f1 100644
--- a/packages/zitadel-react/src/index.tsx
+++ b/packages/zitadel-react/src/index.tsx
@@ -2,20 +2,11 @@ import "./styles.css";
 
 export { SignInWithGoogle } from "./components/SignInWithGoogle";
 
-export {
-  SignInWithGitlab,
-  type SignInWithGitlabProps,
-} from "./components/SignInWithGitlab";
+export { SignInWithGitlab } from "./components/SignInWithGitlab";
 
-export {
-  SignInWithAzureAD,
-  type SignInWithAzureADProps,
-} from "./components/SignInWithAzureAD";
+export { SignInWithAzureAD } from "./components/SignInWithAzureAD";
 
-export {
-  SignInWithGithub,
-  type SignInWithGithubProps,
-} from "./components/SignInWithGithub";
+export { SignInWithGithub } from "./components/SignInWithGithub";
 
 export {
   ZitadelReactProvider,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8fc6939176..82c14cd588d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@vercel/analytics':
         specifier: ^1.0.0
         version: 1.0.0(react@18.2.0)
+      '@zitadel/client':
+        specifier: workspace:*
+        version: link:../../packages/zitadel-client
       '@zitadel/next':
         specifier: workspace:*
         version: link:../../packages/zitadel-next
@@ -57,11 +60,11 @@ importers:
         specifier: ^2.29.4
         version: 2.29.4
       next:
-        specifier: 13.4.7
-        version: 13.4.7(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0)
+        specifier: 13.4.12
+        version: 13.4.12(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0)
       next-themes:
         specifier: ^0.2.1
-        version: 0.2.1(next@13.4.7)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.2.1(next@13.4.12)(react-dom@18.2.0)(react@18.2.0)
       nice-grpc:
         specifier: 2.0.1
         version: 2.0.1
@@ -325,11 +328,11 @@ importers:
         specifier: ^29.5.1
         version: 29.5.2
       '@types/react':
-        specifier: ^17.0.13
-        version: 17.0.52
+        specifier: ^18.2.17
+        version: 18.2.17
       '@types/react-dom':
-        specifier: ^17.0.8
-        version: 17.0.18
+        specifier: ^18.2.7
+        version: 18.2.7
       '@types/testing-library__jest-dom':
         specifier: ^5.14.6
         version: 5.14.6
@@ -1495,8 +1498,8 @@ packages:
     resolution: {integrity: sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==}
     dev: false
 
-  /@next/env@13.4.7:
-    resolution: {integrity: sha512-ZlbiFulnwiFsW9UV1ku1OvX/oyIPLtMk9p/nnvDSwI0s7vSoZdRtxXNsaO+ZXrLv/pMbXVGq4lL8TbY9iuGmVw==}
+  /@next/env@13.4.12:
+    resolution: {integrity: sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ==}
     dev: false
 
   /@next/eslint-plugin-next@13.4.12:
@@ -1514,8 +1517,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-arm64@13.4.7:
-    resolution: {integrity: sha512-VZTxPv1b59KGiv/pZHTO5Gbsdeoxcj2rU2cqJu03btMhHpn3vwzEK0gUSVC/XW96aeGO67X+cMahhwHzef24/w==}
+  /@next/swc-darwin-arm64@13.4.12:
+    resolution: {integrity: sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -1532,8 +1535,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@13.4.7:
-    resolution: {integrity: sha512-gO2bw+2Ymmga+QYujjvDz9955xvYGrWofmxTq7m70b9pDPvl7aDFABJOZ2a8SRCuSNB5mXU8eTOmVVwyp/nAew==}
+  /@next/swc-darwin-x64@13.4.12:
+    resolution: {integrity: sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -1550,8 +1553,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@13.4.7:
-    resolution: {integrity: sha512-6cqp3vf1eHxjIDhEOc7Mh/s8z1cwc/l5B6ZNkOofmZVyu1zsbEM5Hmx64s12Rd9AYgGoiCz4OJ4M/oRnkE16/Q==}
+  /@next/swc-linux-arm64-gnu@13.4.12:
+    resolution: {integrity: sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1568,8 +1571,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@13.4.7:
-    resolution: {integrity: sha512-T1kD2FWOEy5WPidOn1si0rYmWORNch4a/NR52Ghyp4q7KyxOCuiOfZzyhVC5tsLIBDH3+cNdB5DkD9afpNDaOw==}
+  /@next/swc-linux-arm64-musl@13.4.12:
+    resolution: {integrity: sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1586,8 +1589,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@13.4.7:
-    resolution: {integrity: sha512-zaEC+iEiAHNdhl6fuwl0H0shnTzQoAoJiDYBUze8QTntE/GNPfTYpYboxF5LRYIjBwETUatvE0T64W6SKDipvg==}
+  /@next/swc-linux-x64-gnu@13.4.12:
+    resolution: {integrity: sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1604,8 +1607,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@13.4.7:
-    resolution: {integrity: sha512-X6r12F8d8SKAtYJqLZBBMIwEqcTRvUdVm+xIq+l6pJqlgT2tNsLLf2i5Cl88xSsIytBICGsCNNHd+siD2fbWBA==}
+  /@next/swc-linux-x64-musl@13.4.12:
+    resolution: {integrity: sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1622,8 +1625,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@13.4.7:
-    resolution: {integrity: sha512-NPnmnV+vEIxnu6SUvjnuaWRglZzw4ox5n/MQTxeUhb5iwVWFedolPFebMNwgrWu4AELwvTdGtWjqof53AiWHcw==}
+  /@next/swc-win32-arm64-msvc@13.4.12:
+    resolution: {integrity: sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -1640,8 +1643,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc@13.4.7:
-    resolution: {integrity: sha512-6Hxijm6/a8XqLQpOOf/XuwWRhcuc/g4rBB2oxjgCMuV9Xlr2bLs5+lXyh8w9YbAUMYR3iC9mgOlXbHa79elmXw==}
+  /@next/swc-win32-ia32-msvc@13.4.12:
+    resolution: {integrity: sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -1658,8 +1661,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@13.4.7:
-    resolution: {integrity: sha512-sW9Yt36Db1nXJL+mTr2Wo0y+VkPWeYhygvcHj1FF0srVtV+VoDjxleKtny21QHaG05zdeZnw2fCtf2+dEqgwqA==}
+  /@next/swc-win32-x64-msvc@13.4.12:
+    resolution: {integrity: sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1816,7 +1819,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@testing-library/dom': 9.3.0
-      '@types/react-dom': 18.0.9
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
@@ -1956,16 +1959,16 @@ packages:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
 
-  /@types/react-dom@17.0.18:
-    resolution: {integrity: sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==}
+  /@types/react-dom@18.0.9:
+    resolution: {integrity: sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==}
     dependencies:
       '@types/react': 17.0.52
     dev: true
 
-  /@types/react-dom@18.0.9:
-    resolution: {integrity: sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==}
+  /@types/react-dom@18.2.7:
+    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
     dependencies:
-      '@types/react': 18.2.8
+      '@types/react': 18.2.17
     dev: true
 
   /@types/react@17.0.52:
@@ -1976,6 +1979,14 @@ packages:
       csstype: 3.1.1
     dev: true
 
+  /@types/react@18.2.17:
+    resolution: {integrity: sha512-u+e7OlgPPh+aryjOm5UJMX32OvB2E3QASOAqVMY6Ahs90djagxwv2ya0IctglNbNTexC12qCSMZG47KPfy1hAA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.1
+    dev: true
+
   /@types/react@18.2.8:
     resolution: {integrity: sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==}
     dependencies:
@@ -6094,14 +6105,14 @@ packages:
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  /next-themes@0.2.1(next@13.4.7)(react-dom@18.2.0)(react@18.2.0):
+  /next-themes@0.2.1(next@13.4.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
     peerDependencies:
       next: '*'
       react: '*'
       react-dom: '*'
     dependencies:
-      next: 13.4.7(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0)
+      next: 13.4.12(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -6149,8 +6160,8 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /next@13.4.7(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0):
-    resolution: {integrity: sha512-M8z3k9VmG51SRT6v5uDKdJXcAqLzP3C+vaKfLIAM0Mhx1um1G7MDnO63+m52qPdZfrTFzMZNzfsgvm3ghuVHIQ==}
+  /next@13.4.12(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)(sass@1.62.0):
+    resolution: {integrity: sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==}
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
@@ -6167,7 +6178,7 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.4.7
+      '@next/env': 13.4.12
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
       caniuse-lite: 1.0.30001473
@@ -6179,15 +6190,15 @@ packages:
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.7
-      '@next/swc-darwin-x64': 13.4.7
-      '@next/swc-linux-arm64-gnu': 13.4.7
-      '@next/swc-linux-arm64-musl': 13.4.7
-      '@next/swc-linux-x64-gnu': 13.4.7
-      '@next/swc-linux-x64-musl': 13.4.7
-      '@next/swc-win32-arm64-msvc': 13.4.7
-      '@next/swc-win32-ia32-msvc': 13.4.7
-      '@next/swc-win32-x64-msvc': 13.4.7
+      '@next/swc-darwin-arm64': 13.4.12
+      '@next/swc-darwin-x64': 13.4.12
+      '@next/swc-linux-arm64-gnu': 13.4.12
+      '@next/swc-linux-arm64-musl': 13.4.12
+      '@next/swc-linux-x64-gnu': 13.4.12
+      '@next/swc-linux-x64-musl': 13.4.12
+      '@next/swc-win32-arm64-msvc': 13.4.12
+      '@next/swc-win32-ia32-msvc': 13.4.12
+      '@next/swc-win32-x64-msvc': 13.4.12
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros