Error: User Picture Missing

First of all thank you for the great template!

What is the issue about?

If a user has not set their profile picture yet, it is impossible to set a new profile picture. The issue comes from the according server action, which tries to delete the old profile picture.

⨯ Error: User Picture Missing
    at removeUserOldImageFromCDN (./src/app/dashboard/settings/actions.ts:45:33)
digest: "1024150689"
  27 |   const currentImageUrl = user?.picture;
  28 |
> 29 |   if (!currentImageUrl) throw new Error("User Picture Missing");
     |                               ^
  30 |
  31 |   try {
  32 |     if (isOurCdnUrl(currentImageUrl)) {

How to reproduce the issue

Create a new account through the email magic link
Navigate to Dashboard -> Settings
Set a new profile picture and click on Upload
Now save the settings by clicking on Update

Possible solutions

Either we implement a client-sided check if the current user even has a profile picture set, for example we update the onSubmit-function with an additional condition like this (src\app\dashboard\settings\settings-form.tsx (62:86) @ removeUserOldImageFromCDN):

const updatePromise =
        isImageChanged && currentUser.picture
          ? removeUserOldImageFromCDN(currentUser.id, data.picture).then(() =>
              updateUser(currentUser.id, data)
            )
          : updateUser(currentUser.id, data);

where the && currentUser.picture is our new condition.

Alternatively we can accept in our server action that there is no issue when the user does not have a picture set yet. In that case, we could just replace the throw with an early return, example (src\app\dashboard\settings\actions.ts (29:31) @ removeUserOldImageFromCDN):

if (!currentImageUrl) return;

moinulmoin / chadnext