add resend capblty for sms, email otp

apps/login/ui/Alert.tsx

@@ -38,7 +38,7 @@ export default function Alert({ children, type = AlertType.ALERT }: Props) {
       {type === AlertType.INFO && (
         <InformationCircleIcon className="flex-shrink-0 h-5 w-5 mr-2 ml-2" />
       )}
-      <span className="text-sm">{children}</span>
+      <span className="text-sm w-full ">{children}</span>
     </div>
   );
 }

apps/login/ui/LoginOTP.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
 import { Button, ButtonVariants } from "./Button";
-import Alert from "./Alert";
+import Alert, { AlertType } from "./Alert";
 import { Spinner } from "./Spinner";
 import { Checks } from "@zitadel/server";
 import { useForm } from "react-hook-form";
@@ -140,8 +140,10 @@ export default function LoginOTP({
     if (!res.ok) {
       const response = await res.json();
 
-      setError(response.message ?? "An internal error occurred");
+      setError(response.details.details ?? "An internal error occurred");
-      return Promise.reject(response.message ?? "An internal error occurred");
+      return Promise.reject(
+        response.details.details ?? "An internal error occurred"
+      );
     }
     return res.json();
   }
@@ -184,7 +186,34 @@ export default function LoginOTP({
 
   return (
     <form className="w-full">
-      <div className="">
+      {["email", "sms"].includes(method) && (
+        <Alert type={AlertType.INFO}>
+          <div className="flex flex-row">
+            <span className="flex-1 mr-auto text-left">
+              Did not get the Code?
+            </span>
+            <button
+              aria-label="Resend OTP Code"
+              disabled={loading}
+              className="ml-4 text-primary-light-500 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 hover:text-primary-light-400 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
+              onClick={() => {
+                setLoading(true);
+                updateSessionForOTPChallenge()
+                  .then((response) => {
+                    setLoading(false);
+                  })
+                  .catch((error) => {
+                    setError(error);
+                    setLoading(false);
+                  });
+              }}
+            >
+              Resend
+            </button>
+          </div>
+        </Alert>
+      )}
+      <div className="mt-4">
         <TextInput
           type="text"
           {...register("code", { required: "This field is required" })}

apps/login/utils/session.ts

@@ -214,39 +214,31 @@ export async function setSessionAndUpdateCookie(
         sessionCookie.authRequestId = authRequestId;
       }
 
-      return new Promise((resolve) => setTimeout(resolve, 1000)).then(() =>
+      return getSession(server, sessionCookie.id, sessionCookie.token).then(
-        // TODO: remove
+        (response) => {
-        getSession(server, sessionCookie.id, sessionCookie.token).then(
+          if (response?.session && response.session.factors?.user?.loginName) {
-          (response) => {
+            const { session } = response;
-            if (
+            const newCookie: SessionCookie = {
-              response?.session &&
+              id: sessionCookie.id,
-              response.session.factors?.user?.loginName
+              token: updatedSession.sessionToken,
-            ) {
+              creationDate: sessionCookie.creationDate,
-              const { session } = response;
+              expirationDate: sessionCookie.expirationDate,
-              const newCookie: SessionCookie = {
+              changeDate: `${session.changeDate?.getTime() ?? ""}`,
-                id: sessionCookie.id,
+              loginName: session.factors?.user?.loginName ?? "",
-                token: updatedSession.sessionToken,
+              organization: session.factors?.user?.organizationId ?? "",
-                creationDate: sessionCookie.creationDate,
+            };
-                expirationDate: sessionCookie.expirationDate,
-                changeDate: `${session.changeDate?.getTime() ?? ""}`,
-                loginName: session.factors?.user?.loginName ?? "",
-                organization: session.factors?.user?.organizationId ?? "",
-              };
 
-              if (sessionCookie.authRequestId) {
+            if (sessionCookie.authRequestId) {
-                newCookie.authRequestId = sessionCookie.authRequestId;
+              newCookie.authRequestId = sessionCookie.authRequestId;
-              }
-
-              return updateSessionCookie(sessionCookie.id, newCookie).then(
-                () => {
-                  return { challenges: updatedSession.challenges, ...session };
-                }
-              );
-            } else {
-              throw "could not get session or session does not have loginName";
             }
+
+            return updateSessionCookie(sessionCookie.id, newCookie).then(() => {
+              return { challenges: updatedSession.challenges, ...session };
+            });
+          } else {
+            throw "could not get session or session does not have loginName";
           }
-        )
+        }
       );
     } else {
       throw "Session not be set";