skip to Main Content

I’m using Firebase (angularfire) and Facebook login in my APP to authenticate my users. However today I realized that the profile image URL had been expired, but the Firebase SDK isn’t refreshing it.

Is there a way to solve this or should I request the image using the Facebook API?

4

Answers


  1. Firebase only updates this data after you sign in using a provider:

    1. User signs in with Facebook. Facebook provider data populated.
    2. User updates their Facebook photoURL.
    3. User signs in again with Facebook, the photoURL for the facebook provider is updated.

    Sign In again is key here. A user reload will not refresh the user properties.

    The top level displayName and photoURL won’t be updated though. You will need to do that manually with the relevant API.

    If this is not good enough for your needs, you should switch to using the Facebook API.

    Login or Signup to reply.
  2. I solved this by using the photoURL that can be found within: user.providerData[0].photoURL
    Where user is the user data returned on

    firebase.auth().onAuthStateChanged( user => {})
    

    And [0] is the index of the Authentication Provider of interest. In my case I only have Facebook authentication, thus the index is 0.

    Seems that this URL is somehow being updated… (maybe on user sign in?)

    Edit: It seems that the URL is indeed being updated on user sign in. So be aware that if the user is “remembered” by the browser, with this method the image will eventually expire, if the user isn’t forced to sign in again before expiration.

    Login or Signup to reply.
  3. The best way to use Facebook photos from Firebase is through the facebook ID of the user:

    const fbUID = userData.providerData[0].uid
    const photoURL = 'https://graph.facebook.com/' + fbUID + '/picture?type=large'
    

    This gives you an image that doesn’t expire, and it also always stays up to date with the user’s facebook profile pic. Even better, it’s much higher quality than the original, and it is visible by anyone! Additionally, there is no need to use the Facebook API to request this. You can actually stick that URL into the browser with any fbUID and it will go right to the user’s current profile picture.

    Login or Signup to reply.
  4. Use this as your image url

    http://graph.facebook.com/(FBSDKAccessToken.current()?.userID ?? "")/picture?type=large
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search