Sync profile picture when using SSO

packages/auth/src/middleware/passport/third-party-common.js

@@ -6,6 +6,7 @@ const { authError } = require("./utils")
 const { newid } = require("../../hashing")
 const { createASession } = require("../../security/sessions")
 const { getGlobalUserByEmail } = require("../../utils")
+const { default: fetch } = require("node-fetch")
 
 /**
  * Common authentication logic for third parties. e.g. OAuth, OIDC.
@@ -65,7 +66,7 @@ exports.authenticateThirdParty = async function (
     }
   }
 
-  dbUser = syncUser(dbUser, thirdPartyUser)
+  dbUser = await syncUser(dbUser, thirdPartyUser)
 
   // create or sync the user
   const response = await db.post(dbUser)
@@ -86,10 +87,26 @@ exports.authenticateThirdParty = async function (
   return done(null, dbUser)
 }
 
+async function syncProfilePicture(user, thirdPartyUser) {
+  const pictureUrl = thirdPartyUser.profile._json.picture
+  if (pictureUrl) {
+    const response = await fetch(pictureUrl)
+
+    if (response.status === 200) {
+      const type = response.headers.get("content-type")
+      if (type.startsWith("image/")) {
+        user.pictureUrl = pictureUrl
+      }
+    }
+  }
+
+  return user
+}
+
 /**
  * @returns a user that has been sync'd with third party information
  */
-function syncUser(user, thirdPartyUser) {
+async function syncUser(user, thirdPartyUser) {
   // provider
   user.provider = thirdPartyUser.provider
   user.providerType = thirdPartyUser.providerType
@@ -112,6 +129,8 @@ function syncUser(user, thirdPartyUser) {
       }
     }
 
+    user = await syncProfilePicture(user, thirdPartyUser)
+
     // profile
     user.thirdPartyProfile = {
       ...profile._json,

packages/builder/src/pages/builder/apps/index.svelte

@@ -54,7 +54,11 @@
             </Layout>
             <ActionMenu align="right">
               <div slot="control" class="avatar">
-                <Avatar size="M" initials={$auth.initials} />
+                <Avatar
+                  size="M"
+                  initials={$auth.initials}
+                  url={$auth.user.pictureUrl}
+                />
                 <Icon size="XL" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -100,7 +100,11 @@
         <div />
         <ActionMenu align="right">
           <div slot="control" class="avatar">
-            <Avatar size="M" initials={$auth.initials} />
+            <Avatar
+              size="M"
+              initials={$auth.initials}
+              url={$auth.user.pictureUrl}
+            />
             <Icon size="XL" name="ChevronDown" />
           </div>
           <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>