kind of works, no crashes, but inefficient and not everything is refreshed

src/widgets/avatar-upload.jsx

@@ -48,6 +48,7 @@ export default class AvatarUpload extends React.Component {
           this.props.readOnly && this.props.uid ?
             <div className="avatar-box">
               <LetterTile
+                tinode={this.props.tinode}
                 avatar={true}
                 topic={this.props.uid}
                 title={this.props.title} />

src/widgets/chat-message.jsx

@@ -120,6 +120,7 @@ export default class ChatMessage extends React.Component {
           <div className="avatar-box">
             {fullDisplay ?
               <LetterTile
+                tinode={this.props.tinode}
                 topic={this.props.userFrom}
                 title={this.props.userName}
                 avatar={avatar} /> :

src/widgets/chip-input.jsx

@@ -118,6 +118,7 @@ export default class ChipInput extends React.Component {
     this.state.sortedChips.map((item) => {
       chips.push(
         <Chip
+          tinode={this.props.tinode}
           onCancel={this.handleChipCancel}
           avatar={makeImageUrl(item.public ? item.public.photo : null)}
           title={item.public ? item.public.fn : undefined}

src/widgets/chip.jsx

@@ -23,6 +23,7 @@ export default class Chip extends React.PureComponent {
           <span className="spacer" /> :
           <div className="avatar-box">
             <LetterTile
+              tinode={this.props.tinode}
               avatar={this.props.avatar || true}
               topic={this.props.topic}
               title={this.props.title} />

src/widgets/contact-list.jsx

@@ -89,6 +89,7 @@ class ContactList extends React.Component {
           }
           contactNodes.push(
             <Contact
+              tinode={this.props.tinode}
               title={c.public ? c.public.fn : null}
               avatar={makeImageUrl(c.public ? c.public.photo : null)}
               comment={comment}

src/widgets/contact.jsx

@@ -99,6 +99,7 @@ class Contact extends React.Component {
       <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
         <div className="avatar-box">
           <LetterTile
+            tinode={this.props.tinode}
             avatar={avatar}
             title={this.props.title}
             topic={this.props.item} />

src/widgets/group-manager.jsx

@@ -165,6 +165,7 @@ class GroupManager extends React.Component {
         </div>
         <div className="panel-form-row">
           <ChipInput
+            tinode={this.props.tinode}
             chips={this.state.members}
             staticMembers={this.state.staticMembers}
             prompt="add members"
@@ -178,6 +179,7 @@ class GroupManager extends React.Component {
           </label>
         </div>
         <ContactList
+          tinode={this.props.tinode}
           contacts={this.props.contacts}
           myUserId={this.props.myUserId}
           topicSelected={this.state.selectedContacts}

src/widgets/group-subs.jsx

@@ -22,6 +22,7 @@ export default class GroupSubs extends React.Component {
       usersOnline.push(
         <div className="avatar-box" key={sub.user}>
           <LetterTile
+            tinode={this.props.tinode}
             topic={sub.user}
             avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />

src/widgets/letter-tile.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Tinode from 'tinode-sdk';
 
 import { stringHash } from '../lib/strformat.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
 
 export default class LetterTile extends React.PureComponent {
   render() {
@@ -21,8 +22,9 @@ export default class LetterTile extends React.PureComponent {
           <i className={className}>group</i> : <i className={className}>person</i>;
       }
     } else if (this.props.avatar) {
+      const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
       // If avatar image is invalid, show a placeholder.
-      avatar = <img className="avatar" alt="avatar" src={this.props.avatar}
+      avatar = <img className="avatar" alt="avatar" src={url}
         onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
     } else {
       avatar = null;

src/widgets/new-topic-group.jsx

@@ -118,10 +118,10 @@ export default class NewTopicGroup extends React.PureComponent {
         <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
           description="Section title for TagManager">{
           (title) => <TagManager
+            tinode={this.props.tinode}
             tags={this.state.tags}
             activated={true}
             onTagsChanged={this.handleTagsChanged}
-            tinode={this.props.tinode}
             tabIndex={4}
             title={title} />
         }</FormattedMessage>

src/widgets/permissions-editor.jsx

@@ -133,6 +133,7 @@ class PermissionsEditor extends React.Component {
       <div className="panel-form-column">
         {this.props.userTitle ?
           <ul className="contact-box small"><Contact
+            tinode={this.props.tinode}
             item={this.props.item}
             title={this.props.userTitle}
             small={true}

src/widgets/side-navbar.jsx

@@ -26,6 +26,7 @@ export default class SideNavbar extends React.PureComponent {
         {avatar ?
           <div id="self-avatar" className="avatar-box">
             <LetterTile
+              tinode={this.props.tinode}
               avatar={avatar}
               topic={this.props.myUserId}
               title={this.props.title} />

src/widgets/tag-manager.jsx

@@ -12,7 +12,7 @@ export default class TagManager extends React.Component {
     super(props);
 
     this.state = {
-      tags: this.props.tags,
+      tags: this.props.tags || [],
       tagInput: '',
       activated: this.props.activated
     };
@@ -25,8 +25,9 @@ export default class TagManager extends React.Component {
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (!arrayEqual(nextProps.tags, prevState.tags) && !prevState.activated) {
-      return {tags: nextProps.tags};
+    const tags = nextProps.tags || [];
+    if (!arrayEqual(tags, prevState.tags) && !prevState.activated) {
+      return {tags: tags};
     }
     return null;
   }
@@ -75,11 +76,11 @@ export default class TagManager extends React.Component {
   handleSubmit() {
     // Add unprocessed input to tags, submit the list.
     this.props.onSubmit(this.handleAddTag(this.state.tagInput.trim()));
-    this.setState({activated: false, tags: this.props.tags});
+    this.setState({activated: false, tags: this.props.tags || []});
   }
 
   handleCancel() {
-    this.setState({activated: false, tagInput: '', tags: this.props.tags});
+    this.setState({activated: false, tagInput: '', tags: this.props.tags || []});
     if (this.props.onCancel) {
       this.props.onCancel();
     }
@@ -116,6 +117,7 @@ export default class TagManager extends React.Component {
           <FormattedMessage id="tags_editor_no_tags" defaultMessage="Add some tags"
             description="Tag editor prompt when no tags are found.">{
             (add_tags_prompt) => <ChipInput
+              tinode={this.props.tinode}
               chips={tags}
               avatarDisabled={true}
               prompt={add_tags_prompt}

src/widgets/topic-desc-edit.jsx

@@ -265,10 +265,10 @@ export default class TopicDescEdit extends React.Component {
           <FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
             description="Section title for TagManager">{
               (title_tag_manager) => <TagManager
+                tinode={this.props.tinode}
                 title={title_tag_manager}
                 activated={false}
                 tags={this.state.tags}
-                tinode={this.props.tinode}
                 onSubmit={this.handleTagsUpdated} />
           }</FormattedMessage>
         </>