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