fix async await client, react components

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>
   );
 }

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 });
+  }
+}

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",

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}`}