otp url template, reset with authrequest

apps/login/src/app/(login)/otp/[method]/page.tsx

@@ -5,6 +5,7 @@ import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
 import { getLocale, getTranslations } from "next-intl/server";
+import { headers } from "next/headers";
 
 export default async function Page(props: {
   searchParams: Promise<Record<string | number | symbol, string | undefined>>;
@@ -30,6 +31,8 @@ export default async function Page(props: {
 
   const loginSettings = await getLoginSettings(organization);
 
+  const host = (await headers()).get("host");
+
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
@@ -67,6 +70,8 @@ export default async function Page(props: {
             organization={organization}
             method={method}
             loginSettings={loginSettings}
+            host={host}
+            code={code}
           ></LoginOTP>
         )}
       </div>

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

@@ -25,6 +25,7 @@ type Props = {
   method: string;
   code?: string;
   loginSettings?: LoginSettings;
+  host: string | null;
 };
 
 type Inputs = {
@@ -39,6 +40,7 @@ export function LoginOTP({
   method,
   code,
   loginSettings,
+  host,
 }: Props) {
   const t = useTranslations("otp");
 
@@ -76,7 +78,18 @@ export function LoginOTP({
 
     if (method === "email") {
       challenges = create(RequestChallengesSchema, {
-        otpEmail: { deliveryType: { case: "sendCode", value: {} } },
+        otpEmail: {
+          deliveryType: {
+            case: "sendCode",
+            value: host
+              ? {
+                  urlTemplate:
+                    `${host.includes("localhost") ? "http://" : "https://"}${host}/otp/method=${method}?code={{.Code}}&userId={{.UserID}}&sessionId={{.SessionID}}&organization={{.OrgID}}` +
+                    (authRequestId ? `&authRequestId=${authRequestId}` : ""),
+                }
+              : {},
+          },
+        },
       });
     }
 

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

@@ -86,6 +86,7 @@ export function PasswordForm({
     const response = await resetPassword({
       loginName,
       organization,
+      authRequestId,
     })
       .catch(() => {
         setError("Could not reset password");

apps/login/src/components/session-item.tsx

@@ -102,7 +102,7 @@ export function SessionItem({
         />
       </div>
 
-      <div className="flex flex-col overflow-hidden">
+      <div className="flex flex-col items-start overflow-hidden">
         <span className="">{session.factors?.user?.displayName}</span>
         <span className="text-xs opacity-80 text-ellipsis">
           {session.factors?.user?.loginName}

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

@@ -27,6 +27,7 @@ import { getSessionCookieByLoginName } from "../cookies";
 type ResetPasswordCommand = {
   loginName: string;
   organization?: string;
+  authRequestId?: string;
 };
 
 export async function resetPassword(command: ResetPasswordCommand) {
@@ -46,7 +47,7 @@ export async function resetPassword(command: ResetPasswordCommand) {
   }
   const userId = users.result[0].userId;
 
-  return passwordReset(userId, host);
+  return passwordReset(userId, host, command.authRequestId);
 }
 
 export type UpdateSessionCommand = {

apps/login/src/lib/zitadel.ts

@@ -504,7 +504,11 @@ export function createUser(
  * @param userId the id of the user where the email should be set
  * @returns the newly set email
  */
-export async function passwordReset(userId: string, host: string | null) {
+export async function passwordReset(
+  userId: string,
+  host: string | null,
+  authRequestId?: string,
+) {
   let medium = create(SendPasswordResetLinkSchema, {
     notificationType: NotificationType.Email,
   });
@@ -512,7 +516,9 @@ export async function passwordReset(userId: string, host: string | null) {
   if (host) {
     medium = {
       ...medium,
-      urlTemplate: `${host.includes("localhost") ? "http://" : "https://"}${host}/password/set?code={{.Code}}&userId={{.UserID}}&organization={{.OrgID}}`,
+      urlTemplate:
+        `${host.includes("localhost") ? "http://" : "https://"}${host}/password/set?code={{.Code}}&userId={{.UserID}}&organization={{.OrgID}}` +
+        (authRequestId ? `&authRequestId=${authRequestId}` : ""),
     };
   }