choose factor when multiple, register u2f, verify u2f

apps/login/app/(login)/mfa/page.tsx

@@ -1,14 +1,68 @@
-import { getBrandingSettings, server } from "#/lib/zitadel";
+import {
+  getBrandingSettings,
+  getSession,
+  listAuthenticationMethodTypes,
+  server,
+} from "#/lib/zitadel";
+import Alert from "#/ui/Alert";
+import ChooseSecondFactor from "#/ui/ChooseSecondFactor";
 import DynamicTheme from "#/ui/DynamicTheme";
+import UserAvatar from "#/ui/UserAvatar";
+import {
+  getMostRecentCookieWithLoginname,
+  getSessionCookieById,
+} from "#/utils/cookies";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName, authRequestId, sessionId, organization, code, submit } =
+  const { loginName, checkAfter, authRequestId, organization, sessionId } =
     searchParams;
 
+  const sessionFactors = sessionId
+    ? await loadSessionById(sessionId, organization)
+    : await loadSessionByLoginname(loginName, organization);
+
+  async function loadSessionByLoginname(
+    loginName?: string,
+    organization?: string
+  ) {
+    const recent = await getMostRecentCookieWithLoginname(
+      loginName,
+      organization
+    );
+    return getSession(server, recent.id, recent.token).then((response) => {
+      if (response?.session && response.session.factors?.user?.id) {
+        return listAuthenticationMethodTypes(
+          response.session.factors.user.id
+        ).then((methods) => {
+          return {
+            factors: response.session?.factors,
+            authMethods: methods.authMethodTypes ?? [],
+          };
+        });
+      }
+    });
+  }
+
+  async function loadSessionById(sessionId: string, organization?: string) {
+    const recent = await getSessionCookieById(sessionId, organization);
+    return getSession(server, recent.id, recent.token).then((response) => {
+      if (response?.session && response.session.factors?.user?.id) {
+        return listAuthenticationMethodTypes(
+          response.session.factors.user.id
+        ).then((methods) => {
+          return {
+            factors: response.session?.factors,
+            authMethods: methods.authMethodTypes ?? [],
+          };
+        });
+      }
+    });
+  }
+
   const branding = await getBrandingSettings(server, organization);
 
   return (
@@ -18,7 +72,29 @@ export default async function Page({
 
         <p className="ztdl-p">Choose one of the following second factors.</p>
 
-        <div></div>
+        {sessionFactors && (
+          <UserAvatar
+            loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+            displayName={sessionFactors.factors?.user?.displayName}
+            showDropdown
+          ></UserAvatar>
+        )}
+
+        {!(loginName || sessionId) && (
+          <Alert>Provide your active session as loginName param</Alert>
+        )}
+
+        {sessionFactors ? (
+          <ChooseSecondFactor
+            loginName={loginName}
+            sessionId={sessionId}
+            authRequestId={authRequestId}
+            organization={organization}
+            userMethods={sessionFactors.authMethods ?? []}
+          ></ChooseSecondFactor>
+        ) : (
+          <Alert>No second factors available to setup.</Alert>
+        )}
       </div>
     </DynamicTheme>
   );