Facebook Login with Cognito using AWS Amplify

Chapter Comments
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.

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
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.

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

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!

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?

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.

32

I am working on setting up Facebook login, but I keep getting these errors: “The method FB.login can no longer be called from http pages.” and “The method FB.getLoginStatus can no longer be called from http pages.” Basically, https://localhost:3000 would work, but http://localhost:3000 does not, and I am using the latter.

This is weird because Facebook’s documentation says http://localhost:3000 should work as long as you’re in development mode and using a test user (which I am). Has anyone run into this issue before and know how to solve it? Thank you!!

33

So it turned out the http/https thing was throwing errors in the console but was not actually a problem in carrying out the FB login. The FB login wasn’t working for me, but for a different reason. I had to move some code around, and now it works. I think it wasn’t getting the updated status after login. I am using the following code:

  handleStatusChange = (response) => {
    if (response.status === 'connected') {
      this.handleResponse(response.authResponse);
    } else {
      console.log(response);
    }
  };

  handleClick = () => {
    window.FB.getLoginStatus((response) => {
      if (response.status === 'connected') {
        this.handleResponse(response.authResponse);
      } else {
        window.FB.login(
          () => window.FB.getLoginStatus(this.handleStatusChange),
          { scope: 'public_profile,email' },
        );
      }
    });
  }
34

Hmmm does the demo repo not work for you? Also, I recall having to setup https for my localhost but yeah it shouldn’t affect your code.

35

Thanks for the chapter and active replying! How much difference it is between using User Pool and Identity Pool from UI code point view? Do you have a sample?

36

Hmm what do you mean User Pool vs Identity Pool? We use both in our examples. Can you expand on the two different setups?

37

No for not being clear. The User Pool itself has “Federation->Identity Provider”, firstly I want to understand how it’s different with using Federation in Identity Pool from programming point view?

Secondly, from users perspective, are the login flows different between Federation in User pool and Federation in Identity Pool?

Thanks a lot!

38

Does the Identity Pool support Apple sign-in, or is that only supported through the User Pool? Also, what are the pros and cons of the User Pool not being involved in the case of using the Identity Pool for 3rd party sign-up/sign-in?

Finally, it would be great to this chapter the CloudFormation configuration part.

Thanks

39

I haven’t looked into Apple sign-in yet but here is what I found:

40

Yeah the login flows are different. This chapter should help you:

41

What is response role? function handleFBLogin is not deal with response

    try {
      const response = await Auth.federatedSignIn(
        "facebook",
        { token, expires_at },
        user
      );

      setIsLoading(false);
      props.onLogin(response); // why the pass response?
    } catch (error) {
      setIsLoading(false);
      handleError(error);
    }


  function handleFbLogin() {
    props.userHasAuthenticated(true);
  }


<FacebookButton onLogin={handleFbLogin} />
42

Did you figure this out?