Discord profile pictures expire and blank out after a while

[Bentroen]

Issue

User accounts connected with Discord have their profile picture URL obtained from their Discord user ID. However, for some unknown reason these URLs may become stale (likely if the user has changed their Discord profile picture and not since logged in to the website, so it could be updated again). If this happens, a 'broken' image will be displayed:

There are also instances in the database of the profile picture URL being stored as such:

https://cdn.discordapp.com/avatars/<user_id>/null.png

which means that user.avatar was returned as null in this bit of code:

NoteBlockWorld/server/src/auth/auth.service.ts

Lines 173 to 174 in f5c4a98

	const user = (req.user as DiscordUser).profile;
	const profilePictureUrl = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`;

As such, our current approach may not be reliable enough as a long-term solution (despite being similar to what tools like toolscord.com uses).

Possible solutions

1. Store a copy of the user's profile pic in our file store, and serve it directly from there.
   • Advantage: In the future, it is planned to let users upload their own profile pictures; as such, we'd no longer 'get away' with relying on the providers to provide (hehe) them for us. So this solution would be a planned implementation down the road anyway; we'd just ship the file upload part sooner as a fix to this issue, and it could later be reused for the fully-fledged implementation.
2. Create a random avatar to be used as a default profile picture, instead of grabbing from social profiles. e.g.,
   • a random background color with the user's initials, akin to Google
   • Twitter's eggs
   • GitHub's identicons
   • To be honest, an isometric note block in a random color, like the blog image, could already work fine.

To transition between storing profile pictures ourselves, it could be necessary to fetch them from the current URLs stored in the database. Or existing user profiles can be kept as such, with the user being given the option to replace it with an uploaded file.

Workaround

The solutions above are proper, long-term fixes. As a quick solution to the ugliness caused by the missing profile pics, it may be possible to fall back to a random avatar at page request time.

Trying to fetch the unavailable image results in a 404 that's logged to the console (see image below), so it may be possible to detect this and display a fallback image instead (one along the lines of solution #2 above).