Facebook Login with Cognito using AWS Amplify

#22

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:

  this.props.onLogin(response);

Any ideas?

Cliff

1 Like

#23

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.

0 Likes

#24

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?
    Cheers,
    Mario
0 Likes

#25

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

#26

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

0 Likes

#27

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

0 Likes

#28

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.

Thanks!

0 Likes

#29

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

0 Likes

#30

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

#31

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

0 Likes