# Facebook Login with Cognito using AWS Amplify

**URL:** <https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466>\
**Category:** Chapter Comments\
**Created:** [September 18, 2018, 11:32pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466 "2018-09-18T23:32:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [September 18, 2018, 11:32pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/1 "2018-09-18T23:32:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [September 19, 2018, 5:52pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/2 "2018-09-19T17:52:35Z")

</div>

> [@Social Login with Cognito](https://discourse.sst.dev/t/social-login-with-cognito/464/3):
>
> Thanks Jay! I was able to set up facebook login using your docs. I must note on the docs, there was a typo in the config parameter in app.js (config.social.facebook rather than config.social.FB) and it needed to state to include the config file on top. The code in gihub contains the correct information. I also noticed that it creates a separate ‘user’ (as shown in DynamoDB) than the one in my user pool even though I’m using the same email. Is there a way to synch those users with the same e…

@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:

> <https://github.com/AnomalyInnovations/serverless-stack-demo-fb-login-client/blob/master/src/components/FacebookButton.js#L60>

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](https://demo-fb-login.serverless-stack.com)

---

<div class="post-metadata">

**Author:** ![jkassel](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jkassel/32/239_2.png) [@jkassel](https://discourse.sst.dev/u/jkassel)\
**Post date:** [September 19, 2018, 8:47pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/3 "2018-09-19T20:47:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [September 21, 2018, 9:32pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/4 "2018-09-21T21:32:59Z")

</div>

Oh yeah. I need to get the app approved.

---

<div class="post-metadata">

**Author:** ![lhack47](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@lhack47](https://discourse.sst.dev/u/lhack47)\
**Post date:** [October 4, 2018, 10:58pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/5 "2018-10-04T22:58:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 6, 2018, 2:08am UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/6 "2018-10-06T02:08:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lhack47](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@lhack47](https://discourse.sst.dev/u/lhack47)\
**Post date:** [October 7, 2018, 10:00pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/7 "2018-10-07T22:00:09Z")

</div>

Struggling with how to load the API

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 8, 2018, 8:22pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/8 "2018-10-08T20:22:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 28, 2018, 2:09am UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/10 "2018-10-28T02:09:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pobch](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/pobch/32/312_2.png) [@pobch](https://discourse.sst.dev/u/pobch)\
**Post date:** [October 31, 2018, 4:43pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/11 "2018-10-31T16:43:06Z")

</div>

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?

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/d4d22eb5d2a239b81c2bff4d5e3d24de2f28c815.png)

---

<div class="post-metadata">

**Author:** ![travis-schweller](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@travis-schweller](https://discourse.sst.dev/u/travis-schweller)\
**Post date:** [November 4, 2018, 5:27pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/13 "2018-11-04T17:27:00Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [November 5, 2018, 10:23pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/14 "2018-11-05T22:23:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [November 5, 2018, 11:53pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/15 "2018-11-05T23:53:38Z")

</div>

I asked around in our chatroom ([https://gitter.im/serverless-stack/Lobby](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.

---

<div class="post-metadata">

**Author:** ![travis-schweller](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@travis-schweller](https://discourse.sst.dev/u/travis-schweller)\
**Post date:** [November 6, 2018, 12:05am UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/16 "2018-11-06T00:05:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KBPsystem777](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/kbpsystem777/32/358_2.png) [@KBPsystem777](https://discourse.sst.dev/u/KBPsystem777)\
**Post date:** [December 18, 2018, 8:23pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/17 "2018-12-18T20:23:07Z")

</div>

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.

```auto
  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! 🙂

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [December 23, 2018, 12:47am UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/18 "2018-12-23T00:47:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tstarkdk](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tstarkdk](https://discourse.sst.dev/u/tstarkdk)\
**Post date:** [December 28, 2018, 7:05pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/19 "2018-12-28T19:05:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [December 30, 2018, 6:57pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/20 "2018-12-30T18:57:53Z")

</div>

Oh good catch. Thanks!

---

<div class="post-metadata">

**Author:** ![coloradocolby](https://avatars.discourse-cdn.com/v4/letter/c/ccd318/32.png) [@coloradocolby](https://discourse.sst.dev/u/coloradocolby)\
**Post date:** [December 31, 2018, 5:29pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/21 "2018-12-31T17:29:08Z")

</div>

@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&amp;access_token=${token}`)
const { email } = await response.json() 

```

hope this helps!

---

<div class="post-metadata">

**Author:** ![cliffordh](https://avatars.discourse-cdn.com/v4/letter/c/9fc29f/32.png) [@cliffordh](https://discourse.sst.dev/u/cliffordh)\
**Post date:** [January 12, 2019, 5:56pm UTC](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466/22 "2019-01-12T17:56:48Z")

</div>

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

[Next page](https://discourse.sst.dev/t/facebook-login-with-cognito-using-aws-amplify/466.md?page=2)