fix(idp): show alternative auth methods on failed idp

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

@@ -1,19 +1,19 @@
+import { Alert, AlertType } from "@/components/alert";
+import { ChooseAuthenticatorToLogin } from "@/components/choose-authenticator-to-login";
 import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getServiceUrlFromHeaders } from "@/lib/service";
-import { getBrandingSettings } from "@/lib/zitadel";
-import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import {
+  getBrandingSettings,
+  getLoginSettings,
+  getUserByID,
+  listAuthenticationMethodTypes,
+} from "@/lib/zitadel";
+import { HumanUser, User } from "@zitadel/proto/zitadel/user/v2/user_pb";
+import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 
-// This configuration shows the given name in the respective IDP button as fallback
-const PROVIDER_NAME_MAPPING: {
-  [provider: string]: string;
-} = {
-  [IdentityProviderType.GOOGLE]: "Google",
-  [IdentityProviderType.GITHUB]: "GitHub",
-  [IdentityProviderType.AZURE_AD]: "Microsoft",
-};
-
 export default async function Page(props: {
   searchParams: Promise<Record<string | number | symbol, string | undefined>>;
   params: Promise<{ provider: string }>;
@@ -22,7 +22,7 @@ export default async function Page(props: {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "idp" });
 
-  const { organization } = searchParams;
+  const { organization, userId } = searchParams;
 
   const _headers = await headers();
   const { serviceUrl, serviceRegion } = getServiceUrlFromHeaders(_headers);
@@ -33,11 +33,74 @@ export default async function Page(props: {
     organization,
   });
 
+  const loginSettings = await getLoginSettings({
+    serviceUrl,
+    serviceRegion,
+    organization,
+  });
+
+  let authMethods: AuthenticationMethodType[] = [];
+  let user: User | undefined = undefined;
+  let human: HumanUser | undefined = undefined;
+
+  const params = new URLSearchParams({});
+  if (organization) {
+    params.set("organization", organization);
+  }
+  if (userId) {
+    params.set("userId", userId);
+  }
+
+  if (userId) {
+    const userResponse = await getUserByID({
+      serviceUrl,
+      serviceRegion,
+      userId,
+    });
+    if (userResponse) {
+      user = userResponse.user;
+      if (user?.type.case === "human") {
+        human = user.type.value as HumanUser;
+      }
+
+      if (user?.preferredLoginName) {
+        params.set("loginName", user.preferredLoginName);
+      }
+    }
+
+    const authMethodsResponse = await listAuthenticationMethodTypes({
+      serviceUrl,
+      serviceRegion,
+      userId,
+    });
+    if (authMethodsResponse.authMethodTypes) {
+      authMethods = authMethodsResponse.authMethodTypes;
+    }
+  }
+
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{t("loginError.title")}</h1>
-        <p className="ztdl-p">{t("loginError.description")}</p>
+        <Alert type={AlertType.ALERT}>{t("loginError.description")}</Alert>
+
+        {userId && authMethods.length && (
+          <>
+            {user && human && (
+              <UserAvatar
+                loginName={user.preferredLoginName}
+                displayName={human?.profile?.displayName}
+                showDropdown={false}
+              />
+            )}
+
+            <ChooseAuthenticatorToLogin
+              authMethods={authMethods}
+              loginSettings={loginSettings}
+              params={params}
+            ></ChooseAuthenticatorToLogin>
+          </>
+        )}
       </div>
     </DynamicTheme>
   );

apps/login/src/app/headers/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+export const revalidate = false;
+export const fetchCache = "default-no-store";
+
+export async function GET(request: NextRequest) {
+  const headers = request.headers;
+
+  // Convert headers to a plain object
+  const headersObject: Record<string, string> = {};
+  headers.forEach((value, key) => {
+    headersObject[key] = value;
+  });
+
+  return NextResponse.json(headersObject);
+}

apps/login/src/components/choose-authenticator-to-login.tsx

@@ -0,0 +1,38 @@
+import {
+  LoginSettings,
+  PasskeysType,
+} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { useTranslations } from "next-intl";
+import { PASSKEYS, PASSWORD } from "./auth-methods";
+
+type Props = {
+  authMethods: AuthenticationMethodType[];
+  params: URLSearchParams;
+  loginSettings: LoginSettings | undefined;
+};
+
+export function ChooseAuthenticatorToLogin({
+  authMethods,
+  params,
+  loginSettings,
+}: Props) {
+  const t = useTranslations("idp");
+
+  return (
+    <>
+      {authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+        loginSettings?.allowUsernamePassword && (
+          <div className="ztdl-p">Choose an alternative method to login </div>
+        )}
+      <div className="grid grid-cols-1 gap-5 w-full pt-4">
+        {authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+          loginSettings?.allowUsernamePassword &&
+          PASSWORD(false, "/password?" + params)}
+        {authMethods.includes(AuthenticationMethodType.PASSKEY) &&
+          loginSettings?.passkeysType == PasskeysType.ALLOWED &&
+          PASSKEYS(false, "/passkey?" + params)}
+      </div>
+    </>
+  );
+}

apps/login/src/lib/server/loginname.ts

@@ -159,7 +159,7 @@ export async function sendLoginname(command: SendLoginnameCommand) {
       const identityProviderType = idpTypeToIdentityProviderType(idpType);
       const provider = idpTypeToSlug(identityProviderType);
 
-      const params = new URLSearchParams();
+      const params = new URLSearchParams({ userId });
 
       if (command.authRequestId) {
         params.set("authRequestId", command.authRequestId);