user avatar fallback

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

@@ -34,7 +34,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>

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

@@ -2,15 +2,12 @@ import { getSession, server } from "#/lib/zitadel";
 import Alert from "#/ui/Alert";
 import UserAvatar from "#/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
-import { useRouter } from "next/navigation";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const router = useRouter();
-
   const { loginName } = searchParams;
   const sessionFactors = await loadSession(loginName);
 
@@ -39,7 +36,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>

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

@@ -38,7 +38,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>

apps/login/ui/UserAvatar.tsx

@@ -3,7 +3,7 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
 type Props = {
-  loginName: string;
+  loginName?: string;
   displayName?: string;
   showDropdown: boolean;
 };
@@ -18,8 +18,8 @@ export default function UserAvatar({
       <div>
         <Avatar
           size="small"
-          name={displayName ?? loginName}
-          loginName={loginName}
+          name={displayName ?? loginName ?? "A"}
+          loginName={loginName ?? "A"}
         />
       </div>
       <span className="ml-4 text-14px">{loginName}</span>