choose auth method for login

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

@@ -1,17 +1,13 @@
+import { ChooseAuthenticatorToLogin } from "@/components/choose-authenticator-to-login";
 import { DynamicTheme } from "@/components/dynamic-theme";
-import { getBrandingSettings } from "@/lib/zitadel";
-import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import {
+  getBrandingSettings,
+  getLoginSettings,
+  listAuthenticationMethodTypes,
+} from "@/lib/zitadel";
+import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 
-// 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 }>;
@@ -20,15 +16,41 @@ export default async function Page(props: {
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "idp" });
 
-  const { organization } = searchParams;
+  const { organization, userId } = searchParams;
 
   const branding = await getBrandingSettings(organization);
 
+  const loginSettings = await getLoginSettings(organization);
+
+  let authMethods: AuthenticationMethodType[] = [];
+  if (userId) {
+    const authMethodsResponse = await listAuthenticationMethodTypes(userId);
+    if (authMethodsResponse.authMethodTypes) {
+      authMethods = authMethodsResponse.authMethodTypes;
+    }
+  }
+
+  const params = new URLSearchParams({});
+  if (organization) {
+    params.set("organization", organization);
+  }
+  if (userId) {
+    params.set("userId", userId);
+  }
+
   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>
+
+        {userId && authMethods.length && (
+          <ChooseAuthenticatorToLogin
+            authMethods={sessionWithData.authMethods}
+            loginSettings={loginSettings}
+            params={params}
+          ></ChooseAuthenticatorToLogin>
+        )}
       </div>
     </DynamicTheme>
   );

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

@@ -0,0 +1,44 @@
+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 { Alert, AlertType } from "./alert";
+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("authenticator");
+
+  if (authMethods.length !== 0) {
+    return <Alert type={AlertType.ALERT}>{t("allSetup")}</Alert>;
+  } else {
+    return (
+      <>
+        {loginSettings?.passkeysType == PasskeysType.NOT_ALLOWED &&
+          !loginSettings.allowUsernamePassword && (
+            <Alert type={AlertType.ALERT}>{t("noMethodsAvailable")}</Alert>
+          )}
+
+        <div className="grid grid-cols-1 gap-5 w-full pt-4">
+          {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+            loginSettings?.allowUsernamePassword &&
+            PASSWORD(false, "/password/set?" + params)}
+          {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
+            loginSettings?.passkeysType == PasskeysType.ALLOWED &&
+            PASSKEYS(false, "/passkey/set?" + params)}
+        </div>
+      </>
+    );
+  }
+}

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

@@ -128,7 +128,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);