fix(providers): refactor Azure AD provider to support v4 (#2818)

Author: ndom91

app/components/header.js

@@ -39,10 +39,7 @@ export default function Header() {
           {session && (
             <>
               {session.user.image && (
-                <span
-                  style={{ backgroundImage: `url(${session.user.image})` }}
-                  className={styles.avatar}
-                />
+                <img src={session.user.image} className={styles.avatar} />
               )}
               <span className={styles.signedInText}>
                 <small>Signed in as</small>

src/providers/azure-ad.js

@@ -6,15 +6,29 @@ export default function AzureAD(options) {
     id: "azure-ad",
     name: "Azure Active Directory",
     type: "oauth",
-    authorization: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize?response_mode=query`,
-    token: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
-    userinfo: "https://graph.microsoft.com/v1.0/me/",
-    profile(profile) {
+    wellKnown: `https://login.microsoftonline.com/${tenant}/v2.0/.well-known/openid-configuration`,
+    authorization: {
+      params: {
+        scope: "User.Read",
+      },
+    },
+    async profile(profile, tokens) {
+      // https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0#examples
+      const profilePicture = await fetch(
+        "https://graph.microsoft.com/v1.0/me/photo/$value",
+        {
+          headers: {
+            Authorization: `Bearer ${tokens.access_token}`,
+          },
+        }
+      )
+      const pictureBuffer = await profilePicture.arrayBuffer()
+      const pictureBase64 = Buffer.from(pictureBuffer).toString("base64")
       return {
-        id: profile.id,
-        name: profile.displayName,
-        email: profile.userPrincipalName,
-        image: null,
+        id: profile.sub,
+        name: profile.name,
+        email: profile.email,
+        image: `data:image/jpeg;base64, ${pictureBase64}`,
       }
     },
     options,