Merge pull request #341 from zitadel/idp-error-handling

fix(login): provide alternative auth methods when IDP failure page is shown

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

@@ -1,17 +1,17 @@
+import { Alert, AlertType } from "@/components/alert";
+import { ChooseAuthenticatorToLogin } from "@/components/choose-authenticator-to-login";
 import { DynamicTheme } from "@/components/dynamic-theme";
-import { getBrandingSettings } from "@/lib/zitadel";
+import { UserAvatar } from "@/components/user-avatar";
-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";
 
-// 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 +20,62 @@ 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[] = [];
+  let user: User | undefined = undefined;
+  let human: HumanUser | undefined = undefined;
+
+  if (userId) {
+    const userResponse = await getUserByID(userId);
+    if (userResponse) {
+      user = userResponse.user;
+      if (user?.type.case === "human") {
+        human = user.type.value as HumanUser;
+      }
+    }
+
+    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>
+        <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/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

@@ -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);