Facebook Login with Cognito using AWS Amplify

Link to chapter - https://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html

@jkassel Just replying here so others can find this thread.

Thanks for pointing the typos out. I just fixed it.

Yeah a separate user is created through this process. This is because the federation happens in the Identity Pool. You are not connecting to the User Pool. One way to throw the error would be to check if a user with that email already exists before this line:

I should also that there another way to do this. You can use the User Pool to log the Facebook user in. But the way we talk about in this chapter is the one Amplify supports by default.

For the session expiry issue I donā€™t see the problem. Can you try the hosted version and see if you have the issue?

https://demo-fb-login.serverless-stack.com

Thanks. Iā€™m unable to test against the hosted version since i believe my account needs to be whitelisted because your Facebook app is in development mode. I will also review the code and see if anything is different to confirm it isnā€™t me.

Oh yeah. I need to get the app approved.

This is such a great resource! I am having some trouble authenticating with Google. Do you have any resources on the differences between the two SDKs?

1 Like

Hmmm I havenā€™t try Google yet. What is the issue you are running into?

Struggling with how to load the API

As in the authentication works but when you make a call to the Serverless API it fails?

We might work on adding the Google login option as well. But itā€™ll be good to know what the issues are.

Yeah we are looking into it. No timeline on it yet though!

I skimmed through this chapter and find out that we set Facebook as an authentication provider on ā€œIdentity Poolā€. By the way, I also saw an option to set up an identity provider on ā€œUser Poolā€ with Facebook. What is the difference between these alternatives? Can I set up Facebook app id on User Pool instead of Identity Pool?

1 Like

Hey All - this is such a great resource!

Iā€™m trying to snag a facebook userā€™s email address during the login process.

Iā€™ve added a ā€˜console.log(user);ā€™ after line 55 in the FacebookButton.js file, but Iā€™m only getting an ā€˜undefinedā€™ value output to the console.

Any other thoughts on how I can get the userā€™s email? It seems like it should be present?

Thanks!

Yeah you can use the User Pool instead of the Identity Pool. The way we describe in this chapter is the one AWS Amplify uses. The key difference being that the User Pool will store the users details as opposed to the Identity Pool way where the User Pool is not involved.

I asked around in our chatroom (https://gitter.im/serverless-stack/Lobby) and they had some ways to do this. It sounds like you need to make a separate API call to /me to get this info.

1 Like

Dude! Thanks a ton! I appreciate the help!!

1 Like

Hello!

On the config.js where can I see on my end the APP_CLIENT_ID? I know where to get the Region, User_Pool and Identity_Pool. Just dont have idea where I can see the APP_CLIENT_ID on my Cognito view.

  cognito: {
    REGION: "YOUR_COGNITO_REGION",
    USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID"

Thank you! :slight_smile:

Hey there, you can see how we get it in this chapter - https://serverless-stack.com/chapters/create-a-cognito-user-pool.html.

There is a minor typo in the last part of the chapter, where it says:

" Finally, we can use the FacebookButton.js in our src/components/Login.js and src/components/Signup.js"

The Login.js is not a component, but a container.

-Tony

1 Like

Oh good catch. Thanks!

@travis-schweller

Inside of the handleResponse method add the following once youā€™ve grabbed the token:

const response = await fetch(`https://graph.facebook.com/me?fields=id,name,email,birthday&access_token=${token}`)
const { email } = await response.json() 

hope this helps!

1 Like

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