add idps to invite flow

apps/login/src/app/(login)/authenticator/set/page.tsx

@@ -2,10 +2,12 @@ import { Alert } from "@/components/alert";
 import { BackButton } from "@/components/back-button";
 import { ChooseAuthenticatorToSetup } from "@/components/choose-authenticator-to-setup";
 import { DynamicTheme } from "@/components/dynamic-theme";
+import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import {
+  getActiveIdentityProviders,
   getBrandingSettings,
   getLoginSettings,
   getSession,
@@ -86,13 +88,12 @@ export default async function Page(props: {
     sessionWithData.factors?.user?.organizationId,
   );
 
-  /* - TODO: Implement after https://github.com/zitadel/zitadel/issues/8981  */
-
-  //   const identityProviders = await getActiveIdentityProviders(
-  //     sessionWithData.factors?.user?.organizationId,
-  //   ).then((resp) => {
-  //     return resp.identityProviders;
-  //   });
+  const identityProviders = await getActiveIdentityProviders(
+    sessionWithData.factors?.user?.organizationId,
+    true,
+  ).then((resp) => {
+    return resp.identityProviders;
+  });
 
   const params = new URLSearchParams({
     initial: "true", // defines that a code is not required and is therefore not shown in the UI
@@ -110,10 +111,6 @@ export default async function Page(props: {
     params.set("authRequestId", authRequestId);
   }
 
-  const host = process.env.VERCEL_URL
-    ? `https://${process.env.VERCEL_URL}`
-    : "http://localhost:3000";
-
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
@@ -136,21 +133,18 @@ export default async function Page(props: {
           ></ChooseAuthenticatorToSetup>
         )}
 
-        {/* - TODO: Implement after https://github.com/zitadel/zitadel/issues/8981  */}
-
-        {/* <p className="ztdl-p text-center">
+        <p className="ztdl-p text-center">
           or sign in with an Identity Provider
         </p>
 
         {loginSettings?.allowExternalIdp && identityProviders && (
           <SignInWithIdp
-            host={host}
             identityProviders={identityProviders}
             authRequestId={authRequestId}
             organization={sessionWithData.factors?.user?.organizationId}
             linkOnly={true} // tell the callback function to just link the IDP and not login, to get an error when user is already available
           ></SignInWithIdp>
-        )} */}
+        )}
 
         <div className="mt-8 flex w-full flex-row items-center">
           <BackButton />

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

@@ -93,6 +93,26 @@ async function linkingSuccess(
   );
 }
 
+async function linkingFailed(branding?: BrandingSettings) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
+
+  return (
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>{t("linkingError.title")}</h1>
+        <div className="w-full">
+          {
+            <Alert type={AlertType.ALERT}>
+              {t("linkingError.description")}
+            </Alert>
+          }
+        </div>
+      </div>
+    </DynamicTheme>
+  );
+}
+
 export default async function Page(props: {
   searchParams: Promise<Record<string | number | symbol, string | undefined>>;
   params: Promise<{ provider: string }>;
@@ -174,20 +194,7 @@ export default async function Page(props: {
         },
         foundUser.userId,
       ).catch((error) => {
-        return (
-          <DynamicTheme branding={branding}>
-            <div className="flex flex-col items-center space-y-4">
-              <h1>{t("linkingError.title")}</h1>
-              <div className="w-full">
-                {
-                  <Alert type={AlertType.ALERT}>
-                    {t("linkingError.description")}
-                  </Alert>
-                }
-              </div>
-            </div>
-          </DynamicTheme>
-        );
+        return linkingFailed(branding);
       });
 
       if (idpLink) {
@@ -201,7 +208,8 @@ export default async function Page(props: {
     }
   }
 
-  if (options?.isCreationAllowed && options.isAutoCreation) {
+  // if link === true, do not create user
+  if (options?.isCreationAllowed && options.isAutoCreation && !link) {
     let orgToRegisterOn: string | undefined = organization;
 
     let userData: AddHumanUserRequest =
@@ -256,6 +264,10 @@ export default async function Page(props: {
     }
   }
 
+  if (link) {
+    return linkingFailed(branding);
+  }
+
   // return login failed if no linking or creation is allowed and no user was found
   return loginFailed(branding, "No user found");
 }

apps/login/src/components/sign-in-with-idp.tsx

@@ -70,11 +70,7 @@ export function SignInWithIdp({
   const renderIDPButton = (idp: IdentityProvider) => {
     const { id, name, type } = idp;
     const onClick = () => startFlow(id, idpTypeToSlug(type));
-    /* - TODO: Implement after https://github.com/zitadel/zitadel/issues/8981  */
 
-    //   .filter((idp) =>
-    //     linkOnly ? idp.config?.options.isLinkingAllowed : true,
-    //   )
     const components: Partial<
       Record<
         IdentityProviderType,

apps/login/src/lib/zitadel.ts

@@ -633,11 +633,15 @@ export async function verifyU2FRegistration(
   return userService.verifyU2FRegistration(request, {});
 }
 
-export async function getActiveIdentityProviders(orgId?: string) {
-  return settingsService.getActiveIdentityProviders(
-    { ctx: makeReqCtx(orgId) },
-    {},
-  );
+export async function getActiveIdentityProviders(
+  orgId?: string,
+  linking_allowed?: boolean,
+) {
+  const props: any = { ctx: makeReqCtx(orgId) };
+  if (linking_allowed) {
+    props.linkingAllowed = linking_allowed;
+  }
+  return settingsService.getActiveIdentityProviders(props, {});
 }
 
 /**