signin component

packages/zitadel-react/package.json

@@ -48,6 +48,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "@zitadel/server": "workspace:*"
   }
-}
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { ZitadelServer, settings, getActiveIdentityProvidersResponse } from "@zitadel/server";
+
+export interface SignInWithIDPProps {
+  children?: React.ReactNode;
+  server: ZitadelServer;
+  orgId?: string;
+}
+
+function getIDPs(
+    server: ZitadelServer,
+    orgId?: string,
+  ): Promise<GetActiveIdentityProvidersResponse | undefined> {
+    const settingsService = settings.getSettings(server);
+    return settingsService
+      .getActiveIdentityProviders(orgId ? {ctx: {orgId}}: {ctx: {instance: true}}, {})
+      .then((resp: getActiveIdentityProvidersResponse) => {
+        return resp.settings;
+      });
+
+
+export function SignInWithIDP(props: SignInWithIDPProps) {
+  return (
+    <div className="ztdl-flex ztdl-flex-row border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
+      <div></div>
+      {props.children}
+    </div>
+  );
+}
+
+SignInWithIDP.displayName = "SignInWithIDP";

packages/zitadel-react/src/index.tsx

@@ -14,3 +14,8 @@ export {
   ZitadelUIProvider,
   type ZitadelUIProps,
 } from "./components/ZitadelUIProvider";
+
+export {
+  SignInWithIDP,
+  type SignInWithIDPProps,
+} from "./components/SignInWithIDP";