Twitter authentication with passport.js

Question

This is a real niche question regarding Twitter OAuth with passport.js ()

I have a controller which updates the user's avatar using their Twitter "avatar":

const signInViaTwitter = (twitterProfile) => {
  return new Promise((resolve, reject) => {

    console.log(twitterProfile);

    // find if user exist on in
    User.findOne({ username: twitterProfile.username }, (error, user) => {
      if (error) { console.log(error); reject(error); }
      else {

        // user existed on db
        if (user) {
          // update the user with latest git profile info
          user.name = twitterProfile.displayName;
          user.username = twitterProfile.username;
          user.avatarUrl = twitterProfile.photos.value;
          user.email = '';

          // save the info and resolve the user doc
          user.save((error) => {
            if (error) { console.log(error); reject(error); }
            else { resolve(user); }
          });
        }

        // user doesn't exists on db
        else {
          // check if it is the first user (Adam/Eve) :-p
          // assign him/her as the admin
          User.count({}, (err, count) => {
            console.log('usercount: ' + count);

            let assignAdmin = false;
            if (count === 0) assignAdmin = true;

            // create a new user
            const newUser = new User({
              name: twitterProfile.displayName,
              username: twitterProfile.username,
              avatarUrl: twitterProfile.photos.value,
              email: '',
              role: assignAdmin ? 'admin' : 'user',
            });

            // save the user and resolve the user doc
            newUser.save((error) => {
              if (error) { console.log(error); reject(error); }
              else { resolve(newUser); }
            });

          });
        }
      }
    });
  });
};

The authentication of the user works - but for some reason, the avatar won't show...here is the following console output:

Refused to load the image 'https://api.twitter.com/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://abs.twimg.com https://*.twimg.com https://pbs.twimg.com data:".

Does anyone know what this means? I'm thinking it's probably due to being in development mode - that is, http://localhost:8080/ ... and it won't accept https?? Or won't pass it back?

UPDATE: ^I think the above error is unrelated to the image not being display...

A little look at the html source gives:

<img class="styles__userAvatar___2x2U9" src="{unknown}" alt="Wind Up Lord Vexxos Avatar">

So it's obviously passing in an unknown variable for the src - rather than the user's display avatar...

So, for me it looks like the offending line is:

user.avatarUrl = twitterProfile.photos.value;

What should I be setting this to?

Answer 1

Just a thought, isn't twitterProfile.photos an array? probably you should try accessing twitterProfile.photos[0].value