5

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?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
rena
  • 1,223
  • 3
  • 17
  • 30

4 Answers4

11

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.

John Bernardsson
  • 1,751
  • 1
  • 17
  • 19
  • That worked for me, not sure why the previous method wouldn't work unless there is some browser caching as other posts have mentioned. this.photoUrl = user.providerData[0].photoURL; – dr3x May 23 '18 at 05:27
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.

bojeil
  • 29,642
  • 4
  • 69
  • 76
  • ok, i understand that the top level photo is set. but not updated, so if you login with Facebook and then login again with G++, you will still be trying to get the facebook URL. Seems there kind of needs to be a fix here. – Brill Pappin Dec 11 '17 at 02:58
1

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.

Noah Allen
  • 699
  • 5
  • 14
0

Use this as your image url

http://graph.facebook.com/\(FBSDKAccessToken.current()?.userID ?? "")/picture?type=large
Krishna Kirana
  • 438
  • 4
  • 10