@memberjunction/ng-user-avatar

Angular service for managing user avatar synchronization from authentication providers and avatar display operations in MemberJunction applications.

Installation

npm install @memberjunction/ng-user-avatar

Overview

The User Avatar service provides a simple API for syncing user profile images from authentication providers (Microsoft Graph, Google, Auth0, etc.) into MemberJunction’s UserEntity. It fetches the image, converts it to a Base64 data URI, and saves it to the user record. The service is auth-provider-agnostic — callers supply the image URL and any required auth headers.

flowchart LR
    subgraph Providers["Auth Providers"]
        A["Microsoft Graph"]
        B["Google"]
        C["Auth0"]
    end
    subgraph Service["UserAvatarService"]
        D["syncFromImageUrl()"]
        D --> E["Fetch Image Blob"]
        E --> F["Convert to Base64"]
        F --> G["Save to UserEntity"]
    end
    subgraph Display["Display Helpers"]
        H["getAvatarDisplayUrl()"]
        I["getAvatarIconClass()"]
    end

    Providers --> D
    Service --> Display

    style Providers fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Service fill:#7c5295,stroke:#563a6b,color:#fff
    style Display fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Service Injection

The service is provided at root level and can be injected anywhere:

import { UserAvatarService } from '@memberjunction/ng-user-avatar';

@Component({ /* ... */ })
export class ProfileComponent {
  constructor(private avatarService: UserAvatarService) {}

  async syncAvatar(user: UserEntity, imageUrl: string) {
    const success = await this.avatarService.syncFromImageUrl(
      user,
      imageUrl,
      { 'Authorization': 'Bearer ' + accessToken }  // optional auth headers
    );

    if (success) {
      console.log('Avatar synced successfully');
    }
  }
}

Getting Display URL

// Returns the stored Base64 data URI or a default placeholder
const displayUrl = this.avatarService.getAvatarDisplayUrl(user);

// Get the icon class for fallback display
const iconClass = this.avatarService.getAvatarIconClass(user);

API Reference

UserAvatarService

Method	Returns	Description
`syncFromImageUrl(user, imageUrl, authHeaders?)`	`Promise<boolean>`	Fetch image from URL, convert to Base64, save to user entity
`fileToBase64(file)`	`Promise<string>`	Convert a File to Base64 data URI
`isValidUrl(url)`	`boolean`	Check if a string is a valid URL
`isValidBase64DataUri(uri)`	`boolean`	Check if a string is a valid Base64 data URI
`getAvatarDisplayUrl(user)`	`string`	Get avatar URL for display (Base64 or placeholder)
`getAvatarIconClass(user)`	`string`	Get fallback icon class for avatar display

How It Works

Caller provides a UserEntity, image URL, and optional auth headers
Service fetches the image as a Blob via Angular’s HttpClient
Blob is converted to a Base64 data URI using FileReader
User entity’s UserImageURL is set to the data URI
User entity’s UserImageIconClass is cleared (image takes priority)
Entity is saved to the database

Dependencies

@memberjunction/core — Core framework
@memberjunction/core-entities — UserEntity
@angular/common/http — HttpClient for image fetching