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
To setup oAuth with Facebook, follow these steps:
Sign In with your Facebook credentials.
Select My Apps menu on the top right side, choose Add a New App.
Enter a name for your app and click Create App Id.
From the left side menu, choose Settings, Basic and take note of the App ID and App Secret
Click +Add a Platform from the bottom of the page and choose [Web Site]
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
Click Save Changes
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
Click Save changes.
From the navigation bar on the left, click Products (+) and then Set up from Facebook Login.
From the navigation bar choose Facebook Login and then Settings.
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
Next step is to update AWS Amplify’s configuration to include Login with Facebook.