idp components

.gitignore

@@ -17,3 +17,5 @@ packages/zitadel-server/src/app/proto
 packages/zitadel-client/src/app/proto
 .vscode
 .idea
+.vercel
+.env*.local

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

@@ -50,19 +50,49 @@ export async function SignInWithIDP(props: SignInWithIDPProps) {
         identityProviders.map((idp, i) => {
           switch (idp.type) {
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
-              return <SignInWithGithub key={`idp-${i}`}></SignInWithGithub>;
+              return (
+                <SignInWithGithub
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithGithub>
+              );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB_ES:
-              return <SignInWithGithub key={`idp-${i}`}></SignInWithGithub>;
+              return (
+                <SignInWithGithub
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithGithub>
+              );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_AZURE_AD:
-              return <SignInWithAzureAD key={`idp-${i}`}></SignInWithAzureAD>;
+              return (
+                <SignInWithAzureAD
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithAzureAD>
+              );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GOOGLE:
-              return <SignInWithGoogle key={`idp-${i}`}></SignInWithGoogle>;
+              return (
+                <SignInWithGoogle
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithGoogle>
+              );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
-              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
+              return (
+                <SignInWithGitlab
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithGitlab>
+              );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB_SELF_HOSTED:
-              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
+              return (
+                <SignInWithGitlab
+                  key={`idp-${i}`}
+                  name={idp.name}
+                ></SignInWithGitlab>
+              );
             default:
-              return <div></div>;
+              return <div>{idp.name}</div>;
           }
         })}
       {props.children}

packages/zitadel-next/turbo.json

@@ -1,12 +1,9 @@
 {
-  "extends": [
-    "//"
-  ],
+  "extends": ["//"],
   "pipeline": {
     "build": {
-      "outputs": [
-        "dist/**"
-      ]
+      "outputs": ["dist/**"],
+      "dependsOn": ["@zitadel/react#build"]
     }
   }
-}
+}

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

@@ -1,3 +1,4 @@
 export interface SignInWithIdentityProviderProps {
   children?: React.ReactNode;
+  name?: string;
 }

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

@@ -32,7 +32,9 @@ export function SignInWithAzureAD(props: SignInWithAzureADProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">Sign in with AzureAD</span>
+      <span className="ztdl-ml-4">
+        {props.name ? props.name : "Sign in with AzureAD"}
+      </span>
     </div>
   );
 }

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
 export interface SignInWithGithubProps
@@ -33,7 +32,9 @@ export function SignInWithGithub(props: SignInWithGithubProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">Sign in with Github</span>
+      <span className="ztdl-ml-4">
+        {props.name ? props.name : "Sign in with Github"}
+      </span>
     </div>
   );
 }

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

@@ -32,7 +32,9 @@ export function SignInWithGitlab(props: SignInWithGitlabProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">Sign in with Gitlab</span>
+      <span className="ztdl-ml-4">
+        {props.name ? props.name : "Sign in with Gitlab"}
+      </span>
     </div>
   );
 }

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
 export interface SignInWithGoogleProps
@@ -49,7 +48,9 @@ export function SignInWithGoogle(props: SignInWithGoogleProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">Sign in with Google</span>
+      <span className="ztdl-ml-4">
+        {props.name ? props.name : "Sign in with Google"}
+      </span>
     </div>
   );
 }

packages/zitadel-react/turbo.json

@@ -1,12 +1,8 @@
 {
-  "extends": [
-    "//"
-  ],
+  "extends": ["//"],
   "pipeline": {
     "build": {
-      "outputs": [
-        "dist/**"
-      ]
+      "outputs": ["dist/**"]
     }
   }
-}
+}