Facebook Developer Account

Nowadays, most applications allow users to sign-in using a third-party identity, defined and managed outside of your app. This is known as Identity Federation. Amazon Cognito does support Identity Federation out of the box with Login With Amazon, Login with Google, Login with Facebook, Signin with Apple, or any OIDC or SAMLv2 compliant identity provider.

Just as for regular signin flow, you can chose to present to your customers with the Cognito Hosted UI or to build your own. In this workshop, we chose to use the hosted UI because it handles most of the complexities of the OAuth flow for you.

In this section, we’re going to add a “Login With Facebook” button to our application. Because we are using the Cognito hosted web user interface, there is no code change required to add “Login With xxx”. This is a two steps process:

  • we create a developer account on Facebook’s developer web site and we create a Facebook app

  • we update the Amplify configuration to add Facebook as an identity provider

Create a Facebook app

To setup oAuth with Facebook, follow these steps:

  1. Create a developer account with Facebook.

  2. Sign In with your Facebook credentials.

  3. Select My Apps menu on the top right side, choose Add a New App. create a facebook app 1

  4. Enter a name for your app and click Create App Id. create a facebook app 2

  5. From the left side menu, choose Settings, Basic and take note of the App ID and App Secret create a facebook app 3

  6. Click +Add a Platform from the bottom of the page and choose [Web Site]

  7. Under Web Site, type your user pool domain with the /oauth2/idpresponse endpoint into Site URL. You can find the Cognito domain by looking in awsconfiguration.json file, under the key Auth => Default => OAuth => WebDomain. Do not forget to type https:// at the start of the URL.

    Alternatively, the below command will copy the value to the clipboard, you will just need to paste it in the correct field:

    cd $PROJECT_DIRECTORY
echo "https://$(cat awsconfiguration.json | jq -r .Auth.Default.OAuth.WebDomain)/oauth2/idpresponse" | pbcopy

    create a facebook app 4

  8. Click Save Changes

  9. Type your user pool domain into App Domains and press enter. This is the same domain as you entered into Site URL, without the path. For example: https://amplifyiosworkshop8exxxxx-xxxxxxxx-dev.auth.eu-west-1.amazoncognito.com

    The below command will copy the value to the clipboard, you will just need to paste it in the correct field:

    cd $PROJECT_DIRECTORY
echo "https://$(cat awsconfiguration.json | jq -r .Auth.Default.OAuth.WebDomain)" | pbcopy

    create a facebook app 5

  10. Click Save changes.

  11. From the navigation bar on the left, click Products (+) and then Set up from Facebook Login. create a facebook app 6

  12. From the navigation bar choose Facebook Login and then Settings.

  13. Type your redirect URL into Valid OAuth Redirect URIs and press enter. It consists of your user pool domain with the /oauth2/idpresponse path, such as: https://amplifyiosworkshop8exxxxx-xxxxxxxx-dev.auth.eu-west-1.amazoncognito.com/oauth2/idpresponse

    Alternatively, the below command will copy the value to the clipboard, you will just need to paste it in the correct field:

    cd $PROJECT_DIRECTORY
echo "https://$(cat awsconfiguration.json | jq -r .Auth.Default.OAuth.WebDomain)/oauth2/idpresponse" | pbcopy

create a facebook app 7

  1. Click Save changes.

Next step is to update AWS Amplify’s configuration to include Login with Facebook.