account selection with params

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

@@ -97,6 +97,7 @@ export default async function Page({
     return retrieveIDPIntent(id, token)
       .then((resp) => {
         const { idpInformation, userId } = resp;
+
         if (idpInformation) {
           // handle login
           if (userId) {
@@ -166,10 +167,14 @@ export default async function Page({
       });
   } else {
     return (
-      <div className="flex flex-col items-center space-y-4">
-        <h1>Register</h1>
-        <p className="ztdl-p">No id and token received!</p>
-      </div>
+      <DynamicTheme branding={branding}>
+        <div className="flex flex-col items-center space-y-4">
+          <div className="flex flex-col items-center space-y-4">
+            <h1>Register</h1>
+            <p className="ztdl-p">No id and token received!</p>
+          </div>
+        </div>
+      </DynamicTheme>
     );
   }
 }

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

@@ -77,6 +77,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
 

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

@@ -80,6 +80,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
 

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

@@ -1,6 +1,14 @@
-import { getBrandingSettings, getLoginSettings, server } from "#/lib/zitadel";
+import {
+  getBrandingSettings,
+  getLoginSettings,
+  getSession,
+  server,
+} from "#/lib/zitadel";
+import Alert from "#/ui/Alert";
 import DynamicTheme from "#/ui/DynamicTheme";
 import LoginOTP from "#/ui/LoginOTP";
+import UserAvatar from "#/ui/UserAvatar";
+import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -14,8 +22,21 @@ export default async function Page({
 
   const { method } = params;
 
+  const { session, token } = await loadSession(loginName, organization);
+
   const branding = await getBrandingSettings(server, organization);
 
+  async function loadSession(loginName?: string, organization?: string) {
+    const recent = await getMostRecentCookieWithLoginname(
+      loginName,
+      organization
+    );
+
+    return getSession(server, recent.id, recent.token).then((response) => {
+      return { session: response?.session, token: recent.token };
+    });
+  }
+
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
@@ -30,6 +51,24 @@ export default async function Page({
           <p className="ztdl-p">Enter the code you got via your email.</p>
         )}
 
+        {!session && (
+          <div className="py-4">
+            <Alert>
+              Could not get the context of the user. Make sure to enter the
+              username first or provide a loginName as searchParam.
+            </Alert>
+          </div>
+        )}
+
+        {session && (
+          <UserAvatar
+            loginName={loginName ?? session.factors?.user?.loginName}
+            displayName={session.factors?.user?.displayName}
+            showDropdown
+            searchParams={searchParams}
+          ></UserAvatar>
+        )}
+
         {method && (
           <LoginOTP
             loginName={loginName}

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

@@ -121,6 +121,7 @@ export default async function Page({
             loginName={loginName ?? session.factors?.user?.loginName}
             displayName={session.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
 

apps/login/app/(login)/passkey/add/page.tsx

@@ -45,6 +45,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
         <p className="ztdl-p mb-6 block">{description}</p>

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

@@ -60,6 +60,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
         <p className="ztdl-p mb-6 block">{description}</p>

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

@@ -55,6 +55,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
 

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

@@ -43,6 +43,7 @@ export default async function Page({ searchParams }: { searchParams: any }) {
           loginName={loginName ?? sessionFactors?.factors?.user?.loginName}
           displayName={sessionFactors?.factors?.user?.displayName}
           showDropdown
+          searchParams={searchParams}
         ></UserAvatar>
       </div>
     </DynamicTheme>

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

@@ -62,6 +62,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
         <p className="ztdl-p mb-6 block">

apps/login/app/(login)/u2f/set/page.tsx

@@ -42,6 +42,7 @@ export default async function Page({
             loginName={loginName ?? sessionFactors.factors?.user?.loginName}
             displayName={sessionFactors.factors?.user?.displayName}
             showDropdown
+            searchParams={searchParams}
           ></UserAvatar>
         )}
         <p className="ztdl-p mb-6 block">{description}</p>

apps/login/ui/UserAvatar.tsx

@@ -6,13 +6,33 @@ type Props = {
   loginName?: string;
   displayName?: string;
   showDropdown: boolean;
+  searchParams?: Record<string | number | symbol, string | undefined>;
 };
 
 export default function UserAvatar({
   loginName,
   displayName,
   showDropdown,
+  searchParams,
 }: Props) {
+  const params = new URLSearchParams({});
+
+  if (searchParams?.sessionId) {
+    params.set("sessionId", searchParams.sessionId);
+  }
+
+  if (searchParams?.organization) {
+    params.set("organization", searchParams.organization);
+  }
+
+  if (searchParams?.authRequestId) {
+    params.set("authRequestId", searchParams.authRequestId);
+  }
+
+  if (searchParams?.loginName) {
+    params.set("loginName", searchParams.loginName);
+  }
+
   return (
     <div className="flex h-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
       <div>
@@ -26,7 +46,7 @@ export default function UserAvatar({
       <span className="flex-grow"></span>
       {showDropdown && (
         <Link
-          href="/accounts"
+          href={"/accounts?" + params}
           className="ml-4 flex items-center justify-center p-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full mr-1 transition-all"
         >
           <ChevronDownIcon className="h-4 w-4" />