userId as alternative to support email

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

@@ -7,7 +7,10 @@ import {
   getBrandingSettings,
   getLoginSettings,
   getPasswordComplexitySettings,
+  getUserByID,
 } from "@/lib/zitadel";
+import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import { HumanUser, User } from "@zitadel/proto/zitadel/user/v2/user_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 
 export default async function Page({
@@ -19,54 +22,74 @@ export default async function Page({
   const t = await getTranslations({ locale, namespace: "password" });
   const tError = await getTranslations({ locale, namespace: "error" });
 
-  const { loginName, organization, authRequestId, code } = searchParams;
+  const { userId, loginName, organization, authRequestId, code } = searchParams;
 
   // also allow no session to be found (ignoreUnkownUsername)
-  const sessionFactors = await loadMostRecentSession({
+  let session: Session | undefined;
+  if (loginName) {
+    session = await loadMostRecentSession({
       loginName,
       organization,
     });
+  }
 
   const branding = await getBrandingSettings(organization);
 
   const passwordComplexity = await getPasswordComplexitySettings(
-    sessionFactors?.factors?.user?.organizationId,
+    session?.factors?.user?.organizationId,
   );
 
   const loginSettings = await getLoginSettings(organization);
 
+  let user: User | undefined;
+  let displayName: string | undefined;
+  if (userId) {
+    const userResponse = await getUserByID(userId);
+    user = userResponse.user;
+
+    if (user?.type.case === "human") {
+      displayName = (user.type.value as HumanUser).profile?.displayName;
+    }
+  }
+
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{sessionFactors?.factors?.user?.displayName ?? t("set.title")}</h1>
+        <h1>{session?.factors?.user?.displayName ?? t("set.title")}</h1>
         <p className="ztdl-p mb-6 block">{t("set.description")}</p>
 
         {/* show error only if usernames should be shown to be unknown */}
-        {(!sessionFactors || !loginName) &&
-          !loginSettings?.ignoreUnknownUsernames && (
+        {loginName && !session && !loginSettings?.ignoreUnknownUsernames && (
           <div className="py-4">
             <Alert>{tError("unknownContext")}</Alert>
           </div>
         )}
 
-        {sessionFactors && (
+        {session ? (
           <UserAvatar
-            loginName={loginName ?? sessionFactors.factors?.user?.loginName}
-            displayName={sessionFactors.factors?.user?.displayName}
+            loginName={loginName ?? session.factors?.user?.loginName}
+            displayName={session.factors?.user?.displayName}
             showDropdown
             searchParams={searchParams}
           ></UserAvatar>
-        )}
+        ) : user ? (
+          <UserAvatar
+            loginName={user?.preferredLoginName}
+            displayName={displayName}
+            showDropdown
+            searchParams={searchParams}
+          ></UserAvatar>
+        ) : null}
 
         <Alert type={AlertType.INFO}>{t("set.codeSent")}</Alert>
 
         {passwordComplexity &&
-        loginName &&
-        sessionFactors?.factors?.user?.id ? (
+        (loginName ?? user?.preferredLoginName) &&
+        (userId ?? session?.factors?.user?.id) ? (
           <SetPasswordForm
             code={code}
-            userId={sessionFactors.factors.user.id}
-            loginName={loginName}
+            userId={userId ?? (session?.factors?.user?.id as string)}
+            loginName={loginName ?? (user?.preferredLoginName as string)}
             authRequestId={authRequestId}
             organization={organization}
             passwordComplexitySettings={passwordComplexity}

apps/login/src/components/login-otp.tsx

@@ -139,9 +139,10 @@ export function LoginOTP({
       organization,
       checks,
       authRequestId,
-    }).catch((error) => {
-      setError(error.message ?? "Could not verify OTP code");
+    }).catch(() => {
+      setError("Could not verify OTP code");
       setLoading(false);
+      return;
     });
 
     setLoading(false);
@@ -151,6 +152,7 @@ export function LoginOTP({
 
   function setCodeAndContinue(values: Inputs, organization?: string) {
     return submitCode(values, organization).then((response) => {
+      if (response) {
         if (authRequestId && response && response.sessionId) {
           const params = new URLSearchParams({
             sessionId: response.sessionId,
@@ -185,6 +187,7 @@ export function LoginOTP({
 
           return router.push(`/signedin?` + params);
         }
+      }
     });
   }
 

apps/login/src/components/set-password-form.tsx

@@ -11,7 +11,6 @@ import { create } from "@zitadel/client";
 import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
 import { Alert } from "./alert";
@@ -58,8 +57,6 @@ export function SetPasswordForm({
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
 
-  const router = useRouter();
-
   async function submitRegister(values: Inputs) {
     setLoading(true);
     const changeResponse = await changePassword({