From 298cf4965c6ae1fd0cfe480573692097237816ff Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 29 Jul 2021 14:43:23 +0100
Subject: [PATCH] Sync profile picture when using SSO

---
 .../middleware/passport/third-party-common.js | 23 +++++++++++++++++--
 .../src/pages/builder/apps/index.svelte       |  6 ++++-
 .../src/pages/builder/portal/_layout.svelte   |  6 ++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/auth/src/middleware/passport/third-party-common.js b/packages/auth/src/middleware/passport/third-party-common.js
index 2ab2816391..01125dfebb 100644
--- a/packages/auth/src/middleware/passport/third-party-common.js
+++ b/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,
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 69b6e770f6..c1bdc31cd4 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/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()}>
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 4bc0b46167..20bdc9cb54 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/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()}>