✨ Use profile image from oauth provider (#1330)

apps/web/declarations/next-auth.d.ts

@@ -11,13 +11,11 @@ declare module "next-auth" {
   interface Session {
     user: {
       id: string;
-      name?: string | null;
-      email?: string | null;
       timeZone?: string | null;
       timeFormat?: TimeFormat | null;
       locale?: string | null;
       weekStart?: number | null;
-    };
+    } & DefaultSession["user"];
   }
 
   interface User extends DefaultUser {

apps/web/src/app/[locale]/(admin)/sidebar.tsx

@@ -18,9 +18,9 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
+import { CurrentUserAvatar } from "@/components/current-user-avatar";
 import { ProBadge } from "@/components/pro-badge";
 import { Trans } from "@/components/trans";
-import { CurrentUserAvatar } from "@/components/user";
 import { IfGuest, useUser } from "@/components/user-provider";
 import { IfFreeUser } from "@/contexts/plan";
 import { IconComponent } from "@/types";

apps/web/src/components/current-user-avatar.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@rallly/ui/avatar";
+
+import { useUser } from "@/components/user-provider";
+
+export const CurrentUserAvatar = ({ className }: { className?: string }) => {
+  const { user } = useUser();
+  return (
+    <Avatar className={className}>
+      <AvatarImage src={user.image ?? undefined} />
+      <AvatarFallback>{user.name[0]}</AvatarFallback>
+    </Avatar>
+  );
+};

apps/web/src/components/settings/profile-settings.tsx

@@ -9,8 +9,8 @@ import {
 import { Input } from "@rallly/ui/input";
 import { useForm } from "react-hook-form";
 
+import { CurrentUserAvatar } from "@/components/current-user-avatar";
 import { Trans } from "@/components/trans";
-import { UserAvatar } from "@/components/user";
 import { useUser } from "@/components/user-provider";
 
 export const ProfileSettings = () => {
@@ -26,9 +26,7 @@ export const ProfileSettings = () => {
     },
   });
 
-  const { control, watch, handleSubmit, formState, reset } = form;
-
-  const watchName = watch("name");
+  const { control, handleSubmit, formState, reset } = form;
 
   return (
     <div className="grid gap-y-4">
@@ -41,7 +39,7 @@ export const ProfileSettings = () => {
         >
           <div className="flex flex-col gap-y-4">
             <div>
-              <UserAvatar name={watchName} size="lg" />
+              <CurrentUserAvatar className="size-14" />
             </div>
             <FormField
               control={control}

apps/web/src/components/user-dropdown.tsx

@@ -26,10 +26,10 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 
+import { CurrentUserAvatar } from "@/components/current-user-avatar";
 import { LoginLink } from "@/components/login-link";
 import { RegisterLink } from "@/components/register-link";
 import { Trans } from "@/components/trans";
-import { CurrentUserAvatar } from "@/components/user";
 import { IfCloudHosted, IfSelfHosted } from "@/contexts/environment";
 import { Plan, usePlan } from "@/contexts/plan";
 import { isFeedbackEnabled } from "@/utils/constants";
@@ -57,7 +57,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         className={cn("group min-w-0", className)}
       >
         <Button variant="ghost">
-          <CurrentUserAvatar size="xs" className="shrink-0 " />
+          <CurrentUserAvatar className="size-6" />
           <span className="truncate">{user.name}</span>
           <Icon>
             <ChevronDownIcon />

apps/web/src/components/user-provider.tsx

@@ -21,6 +21,7 @@ const userSchema = z.object({
   timeZone: z.string().nullish(),
   timeFormat: z.enum(["hours12", "hours24"]).nullish(),
   weekStart: z.number().min(0).max(6).nullish(),
+  image: z.string().nullish(),
 });
 
 export const UserContext = React.createContext<{
@@ -76,9 +77,10 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
           id: user.id as string,
           name: user.name ?? t("guest"),
           email: user.email || null,
-          isGuest: !user.email,
+          isGuest,
           tier,
           timeZone: user.timeZone ?? null,
+          image: user.image ?? null,
         },
         refresh: session.update,
         ownsObject: ({ userId }) => {

apps/web/src/components/user.tsx

@@ -3,24 +3,8 @@ import { cn } from "@rallly/ui";
 import { Icon } from "@rallly/ui/icon";
 import { User2Icon } from "lucide-react";
 
-import { useUser } from "@/components/user-provider";
 import { getRandomAvatarColor } from "@/utils/color-hash";
 
-export const CurrentUserAvatar = ({
-  size = "md",
-  className,
-}: Omit<UserAvatarProps, "name">) => {
-  const { user } = useUser();
-
-  return (
-    <UserAvatar
-      className={className}
-      name={user.isGuest ? undefined : user.name}
-      size={size}
-    />
-  );
-};
-
 interface UserAvatarProps {
   name?: string;
   size?: "xs" | "sm" | "md" | "lg";

apps/web/src/utils/auth.ts

@@ -54,6 +54,7 @@ const providers: Provider[] = [
               locale: true,
               timeFormat: true,
               timeZone: true,
+              image: true,
             },
           });
 
@@ -265,6 +266,7 @@ const getAuthOptions = (...args: GetServerSessionParams) =>
                   timeZone: session.timeZone,
                   weekStart: session.weekStart,
                   name: session.name,
+                  image: session.image,
                 },
               });
             } catch (e) {
@@ -278,6 +280,7 @@ const getAuthOptions = (...args: GetServerSessionParams) =>
           token.timeFormat = user.timeFormat;
           token.timeZone = user.timeZone;
           token.weekStart = user.weekStart;
+          token.picture = user.image;
         }
         return token;
       },
@@ -288,6 +291,7 @@ const getAuthOptions = (...args: GetServerSessionParams) =>
         session.user.timeZone = token.timeZone;
         session.user.locale = token.locale;
         session.user.weekStart = token.weekStart;
+        session.user.image = token.picture;
         return session;
       },
     },