u

src/automats/authAutomat.js

@@ -40,6 +40,15 @@ export function setAuthEventDispatcher(dispatch) {
     emit = dispatch;
 }
 
+function normalizePicture(picture) {
+    if (!picture || typeof picture !== 'string') return null;
+    if (picture.startsWith('http://') || picture.startsWith('https://') || picture.startsWith('data:')) {
+        return picture;
+    }
+    const mime = picture.startsWith('/9j/') ? 'image/jpeg' : 'image/png';
+    return `data:${mime};base64,${picture}`;
+}
+
 /**
  * Merges API user data while retaining the current company selection when the
  * response does not contain one.
@@ -52,7 +61,11 @@ function mergeUser(current, incoming) {
     if (!incoming) return current;
     const selectedCompanyId =
         incoming.selectedCompanyId ?? current?.selectedCompanyId ?? null;
-    return { ...current, ...incoming, selectedCompanyId };
+    const merged = { ...current, ...incoming, selectedCompanyId };
+    if (merged.picture) {
+        merged.picture = normalizePicture(merged.picture);
+    }
+    return merged;
 }
 
 let authAutomat;
@@ -104,8 +117,9 @@ const actions = {
             if (!session?.user) {
                 throw new Error('Login ok but session cookie not accepted (/api/auth/me still unauthorized)');
             }
+            const user = mergeUser(authAutomat.state.user, session.user);
             authAutomat.setState({
-                user: session.user,
+                user,
                 googleClientId: session.googleClientId ?? authAutomat.state.googleClientId,
                 status: 'authed',
             });

src/components/UserMenu.jsx

@@ -81,6 +81,16 @@ class UserMenu extends PureComponent {
     const { user, anchorEl, settingsOpen, numbersOpen } = this.state;
     const open = Boolean(anchorEl);
 
+    const pictureSrc = (() => {
+      const pic = user?.picture;
+      if (!pic || typeof pic !== 'string') return undefined;
+      if (pic.startsWith('http://') || pic.startsWith('https://') || pic.startsWith('data:')) {
+        return pic;
+      }
+      const mime = pic.startsWith('/9j/') ? 'image/jpeg' : 'image/png';
+      return `data:${mime};base64,${pic}`;
+    })();
+
     return (
       <>
         <Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
@@ -89,7 +99,7 @@ class UserMenu extends PureComponent {
             onMouseDown={(e) => e.preventDefault()}
             sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
           >
-            <Avatar src={user?.picture} alt={user?.email} sx={{ width: 32, height: 32 }}>
+            <Avatar src={pictureSrc} alt={user?.email} sx={{ width: 32, height: 32 }}>
               {user?.email?.[0]?.toUpperCase()}
             </Avatar>
           </IconButton>