React - AWS Amplify Facebook Login - “Username Attribute Mapping Required”

Question

I have installed the AWS Amplify CLI and added federated authentication through Facebook. In Cognito, the attributes are appropriately mapped.

When using the AWS Amplify (aws-amplify) React library, using the Auth component, I provide a button to the user for login, which calls Auth.federatedSignIn({provider: 'Facebook'}). The call goes to Facebook successfully and redirects back to my app successfully.

However, I get an error, saying "username attribute mapping required." But when I go to Cognito, I've mapped username to ID. Thoughts as to why I'm getting this error?

Answer 1

TLDR: turn off "Require App Secret" in your app's Facebook developer portal settings.

I wasn't able to pinpoint a more valuable error code until I tried to use Facebook's login in a more direct approach (i.e., outside of Amplify). I finally received the error "API calls from the server require an appsecret_proof argument," which led me here.

The Facebook team responded with:

This issue was caused by a backend change that has made appsecret_proof incompatible with the JavaScript API. After evaluating the change, it has been decided that this behavior will have to remain. As such, for your apps that use the JavaScript API, you will now need to uncheck "Require App Secret." You may then want to set up a separate app for your server side logic so that appsecret_proof can be used for increased security.

Once I turned off "Require App Secret," I was set. If that level of security doesn't matter to you for your application, then this is the only answer, unless Amplify comes up with some server-side version.