Fix avatar infinite redirect (#5299)

* If due to some reason avatar URL is same as route, avoid infinite redirection by serving default

* Fix avatar reverting issue

Co-authored-by: Peer Richelsen <[email protected]>
Co-authored-by: alannnc <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/pages/api/user/avatar.ts

@@ -1,6 +1,7 @@
 import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import prisma from "@calcom/prisma";
 
@@ -11,6 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const username = req.query.username as string;
   const teamname = req.query.teamname as string;
   let identity;
+  let linksToThisRoute = false;
   if (username) {
     const user = await prisma.user.findUnique({
       where: {
@@ -26,6 +28,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       email: user?.email,
       avatar: user?.avatar,
     };
+    linksToThisRoute =
+      identity.avatar === `${CAL_URL}/${username}/avatar.png` ||
+      identity.avatar === `${WEBAPP_URL}/${username}/avatar.png`;
   } else if (teamname) {
     const team = await prisma.team.findUnique({
       where: {
@@ -40,14 +45,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       shouldDefaultBeNameBased: true,
       avatar: team?.logo,
     };
+    linksToThisRoute =
+      identity.avatar === `${CAL_URL}/team/${teamname}/avatar.png` ||
+      identity.avatar === `${WEBAPP_URL}/team/${teamname}/avatar.png`;
   }
 
   const emailMd5 = crypto
     .createHash("md5")
     .update((identity?.email as string) || "[email protected]")
     .digest("hex");
   const img = identity?.avatar;
-  if (!img) {
+  // If image isn't set or links to this route itself, use default avatar
+  if (!img || linksToThisRoute) {
     let defaultSrc = defaultAvatarSrc({ md5: emailMd5 });
     if (identity?.shouldDefaultBeNameBased) {
       defaultSrc = getPlaceholderAvatar(null, identity.name);

packages/trpc/server/createContext.ts

@@ -88,7 +88,8 @@ async function getUserFromSession({
     return null;
   }
   // This helps to prevent reaching the 4MB payload limit by avoiding base64 and instead passing the avatar url
-  if (user.avatar) user.avatar = `${CAL_URL}/${user.username}/avatar.png`;
+  // TODO: Setting avatar value to /avatar.png(which is a dynamic route) would actually reset the avatar because /avatar.png is supposed to return the value of user.avatar
+  // if (user.avatar) user.avatar = `${CAL_URL}/${user.username}/avatar.png`;
   const avatar = user.avatar || defaultAvatarSrc({ email });
 
   const locale = user.locale || getLocaleFromHeaders(req);