User Profile Picture support 🎉

config/config.php

@@ -101,6 +101,7 @@
         // Name of the login and password attributes of the User Model.
         'login_attribute' => 'email',
         'password_attribute' => 'password',
+        'avatar_attribute' => 'avatar',
 
         'rate_limiting' => [
             'enabled' => true,

demo/app/Models/User.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\MorphOne;
@@ -38,6 +39,13 @@ public function avatar(): MorphOne
             ->where('model_key', 'avatar');
     }
 
+    public function avatarUrl(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->avatar?->thumbnail(500),
+        );
+    }
+
     public function getDefaultAttributesFor(string $attribute): array
     {
         return in_array($attribute, ['avatar'])

demo/app/Providers/DemoSharpServiceProvider.php

@@ -42,6 +42,7 @@ protected function configureSharp(SharpConfigBuilder $config): void
             ->setAuthCustomGuard('web')
             ->setLoginAttributes('email', 'password')
             ->setUserDisplayAttribute('name')
+            ->setUserAvatarAttribute('avatar_url')
             ->enable2faCustom(Demo2faNotificationHandler::class)
             ->enableLoginRateLimiting(maxAttempts: 3)
             ->suggestRememberMeOnLoginForm()

docs/guide/authentication.md

@@ -14,12 +14,14 @@ class SharpServiceProvider extends SharpAppServiceProvider
         $config
             ->setLoginAttributes('login', 'pwd')
             ->setUserDisplayAttribute('last_name')
+            ->setUserAvatarAttribute('avatar_url')
             // [...]
     }
 }
 ```
 
-The `setUserDisplayAttribute()` is useful to display the user's name in the Sharp UI. Default is `name`.
+- The `setUserDisplayAttribute()` is useful to display the user's name in the Sharp UI. Default is `name`.
+- The `setUserAvatarAttribute()` is useful to display the user's avatar in the Sharp UI. Default is `avatar`, when the attribute returns null, the default user icon is displayed instead.
 
 ## Login form
 

resources/js/Layouts/Layout.vue

@@ -206,7 +206,10 @@
                                         class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                                     >
                                         <span class="inline-flex items-center justify-center size-8 bg-secondary rounded-lg">
-                                            <CircleUser class="h-5 w-5" />
+                                            <template v-if="auth().user.avatar">
+                                                <img :src="auth().user.avatar" @error="auth().user.avatar = null" class="w-5 h-5 rounded-full" />
+                                            </template>
+                                            <CircleUser v-else class="h-5 w-5" />
                                         </span>
                                         <div class="grid flex-1 text-left text-sm leading-tight">
                                             <span class="truncate font-semibold"> {{ auth().user.name }}</span>

resources/js/types/generated.d.ts

@@ -852,6 +852,7 @@ export type ShowTextFieldData = {
 export type UserData = {
   name: string | null;
   email: string | null;
+  avatar: string | null;
 };
 export type UserMenuData = {
   items: Array<MenuItemData>;

src/Config/SharpConfigBuilder.php

@@ -49,6 +49,7 @@ class SharpConfigBuilder
             'login_page_url' => null,
             'display_attribute' => 'name',
             'login_attribute' => 'email',
+            'avatar_attribute' => 'avatar',
             'password_attribute' => 'password',
             'impersonate' => [
                 'enabled' => false,
@@ -327,6 +328,13 @@ public function setUserDisplayAttribute(string $displayAttribute): self
         return $this;
     }
 
+    public function setUserAvatarAttribute(string $avatar): self
+    {
+        $this->config['auth']['avatar_attribute'] = $avatar;
+
+        return $this;
+    }
+
     public function setAuthCustomGuard(?string $guardName): self
     {
         $this->config['auth']['guard'] = $guardName;

src/Data/UserData.php

@@ -12,13 +12,15 @@ final class UserData extends Data
     public function __construct(
         public ?string $name,
         public ?string $email,
+        public ?string $avatar,
     ) {}
 
     public static function from(Authenticatable $user): self
     {
         return new self(
             name: $user->{sharp()->config()->get('auth.display_attribute')} ?? null,
             email: $user->{sharp()->config()->get('auth.login_attribute')} ?? null,
+            avatar: $user->{sharp()->config()->get('auth.avatar_attribute')} ?? null,
         );
     }
 }