google forwardref button

apps/login/app/(login)/register/idp/page.tsx

@@ -1,6 +1,5 @@
 import { getLegalAndSupportSettings, server } from "#/lib/zitadel";
-
+import { SignInWithIDP } from "#/ui/SignInWithIDP";
-import { SignInWithIDP } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -9,6 +8,8 @@ export default async function Page({
 }) {
   const legal = await getLegalAndSupportSettings(server);
 
+  console.log(server);
+
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Register</h1>

apps/login/lib/zitadel.ts

@@ -25,6 +25,8 @@ import {
   LoginSettings,
   GetLoginSettingsResponse,
   ListAuthenticationMethodTypesResponse,
+  StartIdentityProviderFlowRequest,
+  StartIdentityProviderFlowResponse,
 } from "@zitadel/server";
 
 export const zitadelConfig: ZitadelServerOptions = {
@@ -195,6 +197,19 @@ export async function addHumanUser(
     });
 }
 
+export async function startIdentityProviderFlow(
+  server: ZitadelServer,
+  { idpId, successUrl, failureUrl }: StartIdentityProviderFlowRequest
+): Promise<StartIdentityProviderFlowResponse> {
+  const userService = user.getUser(server);
+
+  return userService.startIdentityProviderFlow({
+    idpId,
+    successUrl,
+    failureUrl,
+  });
+}
+
 export async function verifyEmail(
   server: ZitadelServer,
   userId: string,

apps/login/ui/Button.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import React, {
   ButtonHTMLAttributes,
   DetailedHTMLProps,
+  ReactNode,
   forwardRef,
 } from "react";
 
@@ -65,8 +66,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...props
     },
     ref
-  ) => {
+  ): ReactNode => (
-    return (
     <button
       type="button"
       ref={ref}
@@ -75,6 +75,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     >
       {children}
     </button>
-    );
+  )
-  }
 );

apps/login/ui/SignInWithIDP.tsx

@@ -1,4 +1,3 @@
-"use server";
 import { ReactNode } from "react";
 
 import {
@@ -8,12 +7,13 @@ import {
   IdentityProvider,
   IdentityProviderType,
 } from "@zitadel/server";
-// import {
+import {
-//   SignInWithGitlab,
+  SignInWithGitlab,
-//   SignInWithAzureAD,
+  SignInWithAzureAD,
-//   SignInWithGoogle,
+  SignInWithGoogle,
-//   SignInWithGithub,
+  SignInWithGithub,
-// } from "@zitadel/react";
+} from "@zitadel/react";
+import { server, startIdentityProviderFlow } from "#/lib/zitadel";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -37,18 +37,26 @@ function getIdentityProviders(
     });
 }
 
-export function SignInWithIDP(props: SignInWithIDPProps) {
+export async function SignInWithIDP(props: SignInWithIDPProps) {
   console.log(props.server);
-  // const identityProviders = await getIdentityProviders(
+  const identityProviders = await getIdentityProviders(
-  //   props.server,
+    props.server,
-  //   props.orgId
+    props.orgId
-  // );
+  );
 
-  // console.log(identityProviders);
+  console.log(identityProviders);
+
+  function startFlow(idp: IdentityProvider) {
+    return startIdentityProviderFlow(server, {
+      idpId: idp.id,
+      successUrl: "",
+      failureUrl: "",
+    }).then(() => {});
+  }
 
   return (
-    <div className="ztdl-next-flex ztdl-next-flex-col ztdl-next-w-full ztdl-next-space-y-2 ztdl-next-text-sm">
+    <div className="flex flex-col w-full space-y-2 text-sm">
-      {/* {identityProviders &&
+      {identityProviders &&
         identityProviders.map((idp, i) => {
           switch (idp.type) {
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
@@ -77,6 +85,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
                 <SignInWithGoogle
                   key={`idp-${i}`}
                   name={idp.name}
+                  onClick={() => startFlow(idp)}
                 ></SignInWithGoogle>
               );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
@@ -96,8 +105,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
             default:
               return <div>{idp.name}</div>;
           }
-        })} */}
+        })}
-      {props.children}
     </div>
   );
 }

packages/zitadel-next/package.json

@@ -32,7 +32,8 @@
     "typescript": "^4.9.3",
     "tailwindcss": "3.2.4",
     "postcss": "8.4.21",
-    "zitadel-tailwind-config": "workspace:*"
+    "zitadel-tailwind-config": "workspace:*",
+    "@zitadel/server": "workspace:*"
   },
   "peerDependencies": {
     "@zitadel/react": "workspace:*",

packages/zitadel-next/src/index.tsx

@@ -1,10 +1,5 @@
 import "./styles.css";
 
-export {
-  SignInWithIDP,
-  type SignInWithIDPProps,
-} from "./components/SignInWithIDP";
-
 export {
   ZitadelNextProvider,
   type ZitadelNextProps,

packages/zitadel-react/src/components/SignInWithGoogle.tsx

@@ -1,21 +1,37 @@
+"use client";
+
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  ReactNode,
+  forwardRef,
+} from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export interface SignInWithGoogleProps
+type SignInWithGoogleProps = DetailedHTMLProps<
-  extends SignInWithIdentityProviderProps {}
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  name?: string;
+};
 
-export function SignInWithGoogle(props: SignInWithGoogleProps) {
+export const SignInWithGoogle = forwardRef<
-  return (
+  HTMLButtonElement,
-    <div 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">
+  SignInWithGoogleProps
+>(
+  ({ 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 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlSpace="preserve"
           id="Capa_1"
-          //   style={{
-          //     enableBackground: "new 0 0 150 150",
-          //   }}
           viewBox="0 0 150 150"
-          {...props}
         >
           <style>
             {
@@ -48,11 +64,13 @@ export function SignInWithGoogle(props: SignInWithGoogleProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">
+      {children ? (
-        {props.name ? props.name : "Sign in with Google"}
+        children
-      </span>
+      ) : (
-    </div>
+        <span className="ztdl-ml-4">{name ? name : "Sign in with Google"}</span>
-  );
+      )}
-}
+    </button>
+  )
+);
 
 SignInWithGoogle.displayName = "SignInWithGoogle";

packages/zitadel-react/src/index.tsx

@@ -1,9 +1,6 @@
 import "./styles.css";
 
-export {
+export { SignInWithGoogle } from "./components/SignInWithGoogle";
-  SignInWithGoogle,
-  type SignInWithGoogleProps,
-} from "./components/SignInWithGoogle";
 
 export {
   SignInWithGitlab,

packages/zitadel-server/src/index.ts

@@ -57,6 +57,8 @@ export {
   ListAuthenticationMethodTypesResponse,
   ListAuthenticationMethodTypesRequest,
   AuthenticationMethodType,
+  StartIdentityProviderFlowRequest,
+  StartIdentityProviderFlowResponse,
 } from "./proto/server/zitadel/user/v2alpha/user_service";
 export {
   SetHumanPasswordResponse,

pnpm-lock.yaml

@@ -259,9 +259,6 @@ importers:
       '@zitadel/react':
         specifier: workspace:*
         version: link:../zitadel-react
-      '@zitadel/server':
-        specifier: workspace:*
-        version: link:../zitadel-server
       next:
         specifier: ^13.4.10
         version: 13.4.10(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)
@@ -275,6 +272,9 @@ importers:
       '@types/react':
         specifier: ^17.0.13
         version: 17.0.52
+      '@zitadel/server':
+        specifier: workspace:*
+        version: link:../zitadel-server
       '@zitadel/tsconfig':
         specifier: workspace:*
         version: link:../zitadel-tsconfig