fix build, azure, gitlab styling

apps/login/app/(login)/register/idp/[provider]/success/page.tsx

@@ -1,10 +1,9 @@
 import { ProviderSlug } from "#/lib/demos";
 import { addHumanUser, server } from "#/lib/zitadel";
+import Alert, { AlertType } from "#/ui/Alert";
 import {
   AddHumanUserRequest,
-  AddHumanUserResponse,
   IDPInformation,
-  Provider,
   RetrieveIdentityProviderInformationResponse,
   user,
   IDPLink,
@@ -79,9 +78,7 @@ function createUser(
   info: IDPInformation
 ): Promise<string> {
   const userData = (PROVIDER_MAPPING as any)[provider](info);
-  console.log(userData);
   const userService = user.getUser(server);
-  console.log(userData.profile);
   return userService.addHumanUser(userData, {}).then((resp) => resp.userId);
 }
 
@@ -96,23 +93,42 @@ export default async function Page({
   const { provider } = params;
 
   if (provider && id && token) {
-    const information = await retrieveIDP(id, token);
-    let user;
-    if (information) {
-      user = await createUser(provider, information);
-    }
-
-    return (
-      <div className="flex flex-col items-center space-y-4">
-        <h1>Register successful</h1>
-        <p className="ztdl-p">Your account has successfully been created.</p>
-        {user && <div>{JSON.stringify(user)}</div>}
-      </div>
-    );
+    return retrieveIDP(id, token)
+      .then((information) => {
+        if (information) {
+          return createUser(provider, information).catch((error) => {
+            throw new Error(error.details);
+          });
+        } else {
+          throw new Error("Could not get user information.");
+        }
+      })
+      .then((userId) => {
+        return (
+          <div className="flex flex-col items-center space-y-4">
+            <h1>Register successful</h1>
+            <div>You have successfully been registered!</div>
+          </div>
+        );
+      })
+      .catch((error: Error) => {
+        return (
+          <div className="flex flex-col items-center space-y-4">
+            <h1>Register failed</h1>
+            <div className="w-full">
+              {
+                <Alert type={AlertType.ALERT}>
+                  {JSON.stringify(error.message)}
+                </Alert>
+              }
+            </div>
+          </div>
+        );
+      });
   } else {
     return (
       <div className="flex flex-col items-center space-y-4">
-        <h1>Register successful</h1>
+        <h1>Register</h1>
         <p className="ztdl-p">No id and token received!</p>
       </div>
     );

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

@@ -32,15 +32,18 @@ export default async function Page({
 
   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>
+      <p className="ztdl-p">
+        Select one of the following providers to register
+      </p>
 
-      {legal && identityProviders && (
-        <SignInWithIDP identityProviders={identityProviders}></SignInWithIDP>
+      {legal && identityProviders && process.env.ZITADEL_API_URL && (
+        <SignInWithIDP
+          instanceUrl={process.env.ZITADEL_API_URL}
+          identityProviders={identityProviders}
+        ></SignInWithIDP>
       )}
     </div>
   );

apps/login/package.json

@@ -37,7 +37,6 @@
     "@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",

apps/login/styles/globals.scss

@@ -13,7 +13,7 @@
   }
 
   .ztdl-p {
-    @apply text-sm;
+    @apply text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500;
   }
 }
 

apps/login/ui/AddressBar.tsx

@@ -11,7 +11,7 @@ export function AddressBar({ domain }: Props) {
   const pathname = usePathname();
 
   return (
-    <div className="flex items-center space-x-2 p-3.5 lg:px-5 lg:py-3">
+    <div className="flex items-center space-x-2 p-3.5 lg:px-5 lg:py-3 overflow-hidden">
       <div className="text-gray-600">
         <svg
           xmlns="http://www.w3.org/2000/svg"

apps/login/ui/Button.tsx

@@ -66,7 +66,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...props
     },
     ref
-  ): ReactNode => (
+  ) => (
     <button
       type="button"
       ref={ref}

apps/login/ui/IdentityProviders.tsx

@@ -1,10 +0,0 @@
-import { SignInWithGoogle, SignInWithGitlab } from "@zitadel/react";
-
-export default function IdentityProviders() {
-  return (
-    <div className="space-y-4 py-4">
-      <SignInWithGoogle />
-      <SignInWithGitlab />
-    </div>
-  );
-}

apps/login/ui/LayoutProviders.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ZitadelReactProvider } from "@zitadel/react";
-import { ThemeProvider, useTheme } from "next-themes";
+import { useTheme } from "next-themes";
 
 type Props = {
   children: React.ReactNode;
@@ -10,11 +10,6 @@ export function LayoutProviders({ children }: Props) {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme && resolvedTheme === "dark";
 
-  //   useEffect(() => {
-  //     console.log("layoutproviders useeffect");
-  //     setTheme(document);
-  //   });
-
   return (
     <div className={`${isDark ? "ui-dark" : "ui-light"} `}>
       <ZitadelReactProvider dark={isDark}>{children}</ZitadelReactProvider>

apps/login/ui/SignInWithIDP.tsx

@@ -15,26 +15,36 @@ import { ProviderSlug } from "#/lib/demos";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
+  instanceUrl: string;
   identityProviders: any[];
+  startIDPFlowPath?: (idpId: string) => string;
 }
 
-export function SignInWithIDP({ identityProviders }: SignInWithIDPProps) {
+const START_IDP_FLOW_PATH = (idpId: string) =>
+  `/v2alpha/users/idps/${idpId}/start`;
+
+export function SignInWithIDP({
+  instanceUrl,
+  identityProviders,
+  startIDPFlowPath = START_IDP_FLOW_PATH,
+}: SignInWithIDPProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const router = useRouter();
 
-  async function startFlow(idp: any, provider: ProviderSlug) {
-    console.log("start flow");
-    const host = "http://localhost:3000";
+  async function startFlow(idpId: string, provider: ProviderSlug) {
+    const host = process.env.VERCEL_URL ?? "http://localhost:3000";
     setLoading(true);
 
+    // const path = startIDPFlowPath(idpId);
+    // const res = await fetch(`${instanceUrl}${path}`, {
     const res = await fetch("/api/idp/start", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        idpId: idp.id,
+        idpId,
         successUrl: `${host}/register/idp/${provider}/success`,
         failureUrl: `${host}/register/idp/${provider}/failure`,
       }),
@@ -60,19 +70,19 @@ export function SignInWithIDP({ identityProviders }: SignInWithIDPProps) {
                 <SignInWithGithub
                   key={`idp-${i}`}
                   onClick={() =>
-                    startFlow(idp, ProviderSlug.GITHUB).then(({ authUrl }) => {
-                      console.log("done");
-                      router.push(authUrl);
-                    })
+                    startFlow(idp.id, ProviderSlug.GITHUB).then(
+                      ({ authUrl }) => {
+                        console.log("done");
+                        router.push(authUrl);
+                      }
+                    )
                   }
-                  // name={idp.name}
                 ></SignInWithGithub>
               );
             case 7: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB_ES:
               return (
                 <SignInWithGithub
                   key={`idp-${i}`}
-                  // name={idp.name}
                   // onClick={() =>
                   //   startFlow(idp, ProviderSlug.GITHUB).then(({ authUrl }) => {
                   //     console.log("done");
@@ -82,39 +92,25 @@ export function SignInWithIDP({ identityProviders }: SignInWithIDPProps) {
                 ></SignInWithGithub>
               );
             case 5: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_AZURE_AD:
-              return (
-                <SignInWithAzureAD
-                  key={`idp-${i}`}
-                  name={idp.name}
-                ></SignInWithAzureAD>
-              );
+              return <SignInWithAzureAD key={`idp-${i}`}></SignInWithAzureAD>;
             case 10: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GOOGLE:
               return (
                 <SignInWithGoogle
                   key={`idp-${i}`}
-                  // name={idp.name}
                   onClick={() =>
-                    startFlow(idp, ProviderSlug.GOOGLE).then(({ authUrl }) => {
-                      console.log("done");
-                      router.push(authUrl);
-                    })
+                    startFlow(idp.id, ProviderSlug.GOOGLE).then(
+                      ({ authUrl }) => {
+                        console.log("done");
+                        router.push(authUrl);
+                      }
+                    )
                   }
                 ></SignInWithGoogle>
               );
             case 8: // IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
-              return (
-                <SignInWithGitlab
-                  key={`idp-${i}`}
-                  name={idp.name}
-                ></SignInWithGitlab>
-              );
+              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
             case 9: //IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB_SELF_HOSTED:
-              return (
-                <SignInWithGitlab
-                  key={`idp-${i}`}
-                  name={idp.name}
-                ></SignInWithGitlab>
-              );
+              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
             default:
               return <div>{idp.name}</div>;
           }

packages/zitadel-client/src/index.ts

@@ -3,11 +3,3 @@ export { initializeApp, getApps } from "./app";
 export { getAuth } from "./auth";
 
 export type { ZitadelOptions } from "./app";
-export * from "./proto/client/zitadel/settings/v2alpha/legal_settings_pb";
-export * from "./proto/client/zitadel/settings/v2alpha/settings_service_pb";
-export * from "./proto/client/zitadel/settings/v2alpha/settings_pb";
-
-export * from "./proto/client/zitadel/idp_pb";
-export * from "./proto/client/zitadel/user_pb";
-
-export * from "./proto/client/zitadel/settings_pb";

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

@@ -14,29 +14,18 @@ export const SignInWithAzureAD = forwardRef<
       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">
+      <div className="ztdl-h-12 ztdl-p-[10px] ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={25}
-          height={24}
-          fill="none"
+          width="21"
+          height="21"
+          viewBox="0 0 21 21"
+          className="w-full h-full"
         >
-          <path
-            fill="#e24329"
-            d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
-          />
-          <path
-            fill="#fc6d26"
-            d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
-          />
-          <path
-            fill="#fca326"
-            d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584z"
-          />
-          <path
-            fill="#fc6d26"
-            d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632z"
-          />
+          <path fill="#f25022" d="M1 1H10V10H1z"></path>
+          <path fill="#00a4ef" d="M1 11H10V20H1z"></path>
+          <path fill="#7fba00" d="M11 1H20V10H11z"></path>
+          <path fill="#ffb900" d="M11 11H20V20H11z"></path>
         </svg>
       </div>
       {children ? (

pnpm-lock.yaml

@@ -41,9 +41,6 @@ importers:
       '@zitadel/client':
         specifier: workspace:*
         version: link:../../packages/zitadel-client
-      '@zitadel/next':
-        specifier: workspace:*
-        version: link:../../packages/zitadel-next
       '@zitadel/react':
         specifier: workspace:*
         version: link:../../packages/zitadel-react
@@ -5406,7 +5403,7 @@ packages:
       pretty-format: 29.5.0
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@types/node@18.11.9)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@18.11.9)(typescript@5.0.4)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6896,7 +6893,7 @@ packages:
     dependencies:
       lilconfig: 2.0.6
       postcss: 8.4.21
-      ts-node: 10.9.1(@types/node@18.11.9)(typescript@5.1.6)
+      ts-node: 10.9.1(@types/node@18.11.9)(typescript@5.0.4)
       yaml: 1.10.2
 
   /postcss-load-config@3.1.4(ts-node@10.9.1):
@@ -8236,7 +8233,6 @@ packages:
       typescript: 5.0.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: true
 
   /ts-node@10.9.1(@types/node@18.11.9)(typescript@5.1.6):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
@@ -8267,6 +8263,7 @@ packages:
       typescript: 5.1.6
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    dev: true
 
   /ts-poet@6.4.1:
     resolution: {integrity: sha512-AjZEs4h2w4sDfwpHMxQKHrTlNh2wRbM5NRXmLz0RiH+yPGtSQFbe9hBpNocU8vqVNgfh0BIOiXR80xDz3kKxUQ==}
@@ -8570,7 +8567,6 @@ packages:
     resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
     engines: {node: '>=12.20'}
     hasBin: true
-    dev: true
 
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}