Hello and thanks for your awesome tutorial! You’re really great!
I’ve done the Extra Credit > React > Facebook Login with Cognito using AWS Amplify but when being authenticated with Facebook uploading a file fails.
The error comes up when sending a PUT to:
https://<bucket>.s3.amazonaws.com/private/<identity-id>/<file>
…the <identity-id>
is undefined so the PUT fails.
You can track down the source of this undefinition if you log what you get when running the login commands. For example, when you login using your email and password, if you do:
await Auth.signIn(fields.email, fields.password);
const currCreds = await Auth.currentCredentials();
console.log('currCreds', currCreds);
…you can see that identityId
is set correctly.
On the other hand when you login with Facebook through Auth.federatedSignIn
if you log the response you don’t get identityId
. Note: In the case you’ve previously logged in using email and password, it will remain the same, so this misconfiguration will also make uploading fail.
The workaround I’ve used is adding a simple lambda which returns the identityId
for the logged in user, so once the user logs in with facebook, we ask for it and we can send the PUT to the correct url using AWS.S3().putObject
In the case you want to try this out, take into account that you should host your React app in https as Facebook doesn’t allow http domains. You can set this adding HTTPS=true
to your React .env file.
You can check my repos as example:
API
Frontend
The problem I couldn’t fix is that when logged in with Facebook if you refresh the page you’re logged out, if anybody can help me on that would be awesome!
Santiago