How to config Cognito to get Facebook Login to pass back picture url included?

Viewed 337

Recently I had configure to use amplify with @aws-amplify/ui-react library to login Federated users.

Once login, for google user, I would get payload like

{
  "id": "",
  "email": "",
  "name": "",
  "picture": "",
  "token": ""
}

Yet for facebbook user, I get similar stuff but no picture info

{
  "id": "",
  "email": "",
  "name": "",
  "token": ""
}

I had tried to update config enter image description here in my Cognito for Facebook provider. However, this failed to get picture info for me.

Is it possible to make amplify's federated login through Facebook to pass me back picture info as well? I know I could just call another Facebook api to retrieve picture, but I wish this could be avoided, since Google login would return picture info automatically.

P.S. Here's my Facebook identity providers config: enter image description here

PPS. Here's my recent Cognito attribute mapping config:

For Facebook: enter image description here and in CognitoUserSession's idToken's payload: the picture field would include a JSON object about profile picture's information enter image description here

For Google, much simpler: enter image description here and the payload: the picture field is simply the image link enter image description here

1 Answers

Assuming you're requesting public_profile, use "picture" from Facebook Attribute is actually correct, I do face similar problems that I couldn't receive it until i delete the userpool, and creating a new one.

The value you will get from picture should be something like this

{
    "data": {
        "height": 50,
        "is_silhouette": false,
        "url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?etcetcetcetc",
        "width": 50
    }
}
Related