Facebook Login with Cognito using AWS Amplify


I’m trying to convert this example code to use Vue.js. So far so good… however, I’m unsure how to convert this line and it’s purpose:


Any ideas?


1 Like


That’s awesome. It would be great if you can share it with us and we’ll post a link to it for everybody else.

That line is basically a callback that a parent component can use once the login is completed. In our case we simply flag the app state as the user has logged in.



Hi Jay!
Thank you for your great effort! I’ve successfully implemented the Facebook button.
However, once I’m logged in and hit the ‘refresh’ button in the browser I get a blank screen which can only removed after

  1. Deleting all Browser Data
  2. Logging in again.
    Do you have any idea what could cause this issue?


Awesome, thank you for this chapter! It would be very helpful to see a Google example, as the AWS Amplify documentation on this is horrible. Much appreciated!

1 Like


Thank you! Yeah it’s definitely on our list.



Hmm that’s really weird. Can you compare it to the hosted version we have and see if you get the same issue? https://demo-fb-login.serverless-stack.com

If not then make sure your authentication flow is similar to the one in the sample repo - https://github.com/AnomalyInnovations/serverless-stack-demo-fb-login-client



HI I followed your steps. But I don’t get to show the Facebook dialog. Another window shows up, but it closes right away. Any help would do.




I think that window that is showing up might be related to your current session. Can you try clearing your cookies and trying again?



First of all, thanks for this awesome guide. It is a super helpful and saved me a lot of time. Second, I have a question - I need to make sure I get the overall pattern right.

Assuming I am writing a web serverless app with both “local” users (stored & authorized by a Cognito User Pool), and facebook users, the overall structure is like this:

  1. New local users register by Auth.signUp
  2. Existing local users login by Auth.signIn
  3. Facebook users register/login (is the same for them) by Auth.federatedSignIn. Arguments for this function (token & user attributes) are received from FB by the login and me apis.

Is this correct? What is confusing me a little bit is that with this setup, the Auth.currentAuthenticatedUser function can return two completely different things: either a CognitoUser object for local users or just a plain map of user attributes and I have found no official, documented way of distinguishing these two case. Of course, I can remember what auth method user used or I can check the class of the returned value (or presence of some keys, whatever), but that feels a bit odd. So, is the above pattern correct? Or am I missing something?

1 Like


Honestly their documentation is not very good. But yeah the pattern is correct. You use two different Auth methods to sign in a user.