Profile Data Structure

This page provides a complete reference for the player profile data structure returned by the Moitribe SDK after authentication.

SignedInProfile Type

The SignedInProfile interface defines the structure of player profile data:

interface SignedInProfile {
  id: string;
  name: string;
  title: string;
  level: string;
  profileicon: string;
  profilehiresimg: string;
  bannerimgland: string;
  bannerimgport: string;
  friends: string[];
}

Field Reference

id

Type: string
Description: Unique identifier for the player
Format: Alphanumeric string assigned by Moitribe
Example: 'player_12345abc'
Updateable: ❌ No (assigned at account creation)
Nullable: ❌ No (always present)

const playerId = profile.id;
console.log('Player ID:', playerId);

Usage:

Use as a unique key for player records
Required for social features and invitations
Use for player-specific data storage

info

The player ID is permanent and never changes, even if the player updates their name or other profile information.

name

Type: string
Description: Player's display name shown in-game
Format: String up to 20 characters
Example: 'Alex', 'PlayerOne', 'ChampionGamer'
Updateable: ✅ Yes (via updateProfile())
Nullable: ❌ No (always present)

const playerName = profile.name;
document.getElementById('welcome-text').textContent = `Welcome, ${playerName}!`;

Usage:

Display in UI elements (scoreboards, chat, etc.)
Show on player cards and profiles
Use in multiplayer lobbies

Validation:

Minimum length: 3 characters (recommended)
Maximum length: 20 characters (recommended)
May contain letters, numbers, spaces, and some special characters

warning

Player names are not guaranteed to be unique. Always use the id field for unique player identification.

title

Type: string
Description: Player's earned title or rank
Format: String describing player status
Example: 'Novice', 'Champion', 'Legend', 'Elite Player'
Updateable: ❌ No (managed by game progression system)
Nullable: ⚠️ May be empty string

const playerTitle = profile.title;
if (playerTitle) {
  document.getElementById('player-title').textContent = playerTitle;
}

Usage:

Display alongside player name for prestige
Use in leaderboards and rankings
Show player progression status

tip

Titles are typically managed through your game's progression system on the Moitribe dashboard. They update automatically based on player achievements and level.

level

Type: string
Description: Player's current experience level
Format: Numeric string
Example: '1', '25', '100'
Updateable: ❌ No (managed by game progression system)
Nullable: ❌ No (defaults to '1')

const level = parseInt(profile.level);
console.log('Player is level', level);

// Use in game logic
if (level >= 10) {
  unlockPremiumFeature();
}

Usage:

Display player progression
Gate features behind level requirements
Calculate rewards and bonuses
Show experience progress

Converting to Number:

// Always parse as integer
const numericLevel = parseInt(profile.level) || 1;

// Safe comparison
const isHighLevel = parseInt(profile.level) >= 50;

info

Level is stored as a string to support flexible level systems. Always parse to a number when using in calculations or comparisons.

profileicon

Type: string
Description: URL to player's profile icon (small avatar)
Format: Absolute URL to image file
Example: 'https://cdn.moitribe.com/avatars/player123.jpg'
Updateable: ⚠️ Indirectly via picture parameter in updateProfile()
Nullable: ⚠️ May be empty string

const avatarUrl = profile.profileicon;
if (avatarUrl) {
  document.getElementById('avatar').src = avatarUrl;
} else {
  document.getElementById('avatar').src = 'default-avatar.png';
}

Usage:

Display in small UI elements (32x32 to 64x64 pixels)
Show in multiplayer lobbies
Use in chat interfaces
Display on leaderboards

Best Practices:

// Provide fallback for missing icons
function getAvatarUrl(profile, defaultUrl = 'default-avatar.png') {
  return profile.profileicon || defaultUrl;
}

// Handle image load errors
const img = document.getElementById('avatar');
img.src = profile.profileicon;
img.onerror = () => {
  img.src = 'default-avatar.png';
};

profilehiresimg

Type: string
Description: URL to high-resolution profile image
Format: Absolute URL to image file
Example: 'https://cdn.moitribe.com/profiles/player123_hires.jpg'
Updateable: ✅ Yes (via picture parameter in updateProfile())
Nullable: ⚠️ May be empty string

const hiResUrl = profile.profilehiresimg;
if (hiResUrl) {
  document.getElementById('profile-pic').src = hiResUrl;
} else {
  // Fallback to regular icon
  document.getElementById('profile-pic').src = profile.profileicon;
}

Usage:

Display in profile pages (256x256 pixels or larger)
Show in full-screen player cards
Use for high-quality avatar displays

Image Selection Logic:

function getProfileImage(profile, size = 'default') {
  if (size === 'large' && profile.profilehiresimg) {
    return profile.profilehiresimg;
  }
  
  return profile.profileicon || 'default-avatar.png';
}

tip

Use profilehiresimg for detailed profile views and profileicon for smaller UI elements to optimize loading performance.

bannerimgland

Type: string
Description: URL to landscape-oriented banner image (16:9 ratio)
Format: Absolute URL to image file
Example: 'https://cdn.moitribe.com/banners/player123_landscape.jpg'
Updateable: ❌ No (managed through Moitribe dashboard)
Nullable: ⚠️ May be empty string

const landscapeBanner = profile.bannerimgland;
if (landscapeBanner) {
  document.getElementById('profile-banner').style.backgroundImage = 
    `url(${landscapeBanner})`;
}

Usage:

Background for profile pages (desktop/landscape layout)
Banner in wide-screen displays
Profile card backgrounds

Dimensions:

Recommended: 1920x1080 pixels (16:9 ratio)
Minimum: 1280x720 pixels

bannerimgport

Type: string
Description: URL to portrait-oriented banner image (9:16 ratio)
Format: Absolute URL to image file
Example: 'https://cdn.moitribe.com/banners/player123_portrait.jpg'
Updateable: ❌ No (managed through Moitribe dashboard)
Nullable: ⚠️ May be empty string

const portraitBanner = profile.bannerimgport;
if (portraitBanner) {
  document.getElementById('mobile-banner').style.backgroundImage = 
    `url(${portraitBanner})`;
}

Usage:

Background for profile pages (mobile/portrait layout)
Banner in mobile devices
Vertical profile displays

Dimensions:

Recommended: 1080x1920 pixels (9:16 ratio)
Minimum: 720x1280 pixels

Responsive Banner Selection:

function getProfileBanner(profile) {
  const isPortrait = window.innerHeight > window.innerWidth;
  
  if (isPortrait && profile.bannerimgport) {
    return profile.bannerimgport;
  }
  
  return profile.bannerimgland || profile.bannerimgport || 'default-banner.jpg';
}

friends

Type: string[]
Description: Array of friend player IDs
Format: Array of player ID strings
Example: ['player_123', 'player_456', 'player_789']
Updateable: ❌ No (managed through social features)
Nullable: ⚠️ May be empty array

const friendCount = profile.friends.length;
console.log(`Player has ${friendCount} friends`);

// Check if specific player is a friend
const isFriend = profile.friends.includes(otherPlayerId);

Usage:

Display friend count
Show friend lists
Enable friend-only features
Filter social leaderboards

Working with Friends:

// Get friend count
function getFriendCount(profile) {
  return profile.friends?.length || 0;
}

// Check if player has friends
function hasFriends(profile) {
  return profile.friends && profile.friends.length > 0;
}

// Check specific friendship
function isFriend(profile, playerId) {
  return profile.friends?.includes(playerId) || false;
}

// Get friend IDs for queries
function getFriendIds(profile) {
  return profile.friends || [];
}

info

The friends array contains only player IDs. To get friend profile information, you'll need to query the Moitribe API with these IDs.

Complete Example

Here's a complete example showing how to work with all profile fields:

import type { SignedInProfile } from '@veniso/moitribe-js';

class ProfileDisplay {
  private profile: SignedInProfile;
  
  constructor(profile: SignedInProfile) {
    this.profile = profile;
  }
  
  displayBasicInfo(): void {
    console.log('=== Player Profile ===');
    console.log('ID:', this.profile.id);
    console.log('Name:', this.profile.name);
    console.log('Title:', this.profile.title || 'No title');
    console.log('Level:', this.profile.level);
    console.log('Friends:', this.profile.friends.length);
  }
  
  renderProfileCard(): string {
    const level = parseInt(this.profile.level) || 1;
    const friendCount = this.profile.friends?.length || 0;
    const avatar = this.profile.profileicon || 'default-avatar.png';
    const title = this.profile.title || 'Player';
    
    return `
      <div class="profile-card">
        <img src="${avatar}" alt="${this.profile.name}" class="avatar">
        <h2>${this.profile.name}</h2>
        <p class="title">${title}</p>
        <div class="stats">
          <span>Level ${level}</span>
          <span>${friendCount} Friends</span>
        </div>
      </div>
    `;
  }
  
  getDisplayImage(size: 'small' | 'large' = 'small'): string {
    if (size === 'large' && this.profile.profilehiresimg) {
      return this.profile.profilehiresimg;
    }
    return this.profile.profileicon || 'default-avatar.png';
  }
  
  getBanner(orientation: 'landscape' | 'portrait' = 'landscape'): string {
    if (orientation === 'portrait' && this.profile.bannerimgport) {
      return this.profile.bannerimgport;
    }
    return this.profile.bannerimgland || 'default-banner.jpg';
  }
  
  isHighLevelPlayer(): boolean {
    return parseInt(this.profile.level) >= 50;
  }
  
  hasFriend(playerId: string): boolean {
    return this.profile.friends?.includes(playerId) || false;
  }
}

// Usage
MoitribeSDK('my-game-id', 'init', {
  loginCallback: (result: { success: boolean; playerdata?: SignedInProfile }) => {
    if (result.success && result.playerdata) {
      const profileDisplay = new ProfileDisplay(result.playerdata);
      profileDisplay.displayBasicInfo();
      
      const cardHTML = profileDisplay.renderProfileCard();
      document.getElementById('profile-container').innerHTML = cardHTML;
    }
  }
});

Type Safety Tips

TypeScript

Use proper type guards when working with nullable fields:

function displayProfile(profile: SignedInProfile): void {
  // Safe access with optional chaining
  const friendCount = profile.friends?.length ?? 0;
  
  // Type guard for images
  if (profile.profileicon) {
    loadImage(profile.profileicon);
  }
  
  // Parse numeric values safely
  const level: number = parseInt(profile.level) || 1;
}

JavaScript

Use defensive coding for nullable fields:

function displayProfile(profile) {
  // Check array exists before accessing length
  const friendCount = (profile.friends && profile.friends.length) || 0;
  
  // Provide fallbacks for images
  const avatar = profile.profileicon || 'default-avatar.png';
  
  // Safe numeric parsing
  const level = parseInt(profile.level) || 1;
}

Next Steps

Get Profile - Learn how to access profile data
Update Profile - Modify player information
Profile Management Overview - Understanding profile lifecycle

SignedInProfile Type​

Field Reference​

id​

name​

title​

level​

profileicon​

profilehiresimg​

bannerimgland​

bannerimgport​

friends​

Complete Example​

Type Safety Tips​

TypeScript​

JavaScript​

Next Steps​

SignedInProfile Type

Field Reference

id

name

title

level

profileicon

profilehiresimg

bannerimgland

bannerimgport

friends

Complete Example

Type Safety Tips

TypeScript

JavaScript

Next Steps