fix async await client, react components

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

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

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

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

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

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

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,