Page updated Nov 20, 2023

Add social provider sign-in

You can enable your users to sign-in and authenticate with your app using their existing accounts with social providers like Apple, Amazon, Facebook, and Google. Once you configure your backend resources, you can then configure your app to sign in users for that provider. This process will securely exchange credentials and gather user information. This information can then be used to create a new user in your app or link the social account to an existing user. Incorporating social provider sign-in provides your users with a streamlined registration, more sign-in options, and an integrated experience across their existing accounts and your app.

In this guide we will review how you can add sign-in with social providers by first setting up your developer account with the provider. After this step, you can then configure your Auth category and integrate social sign-in with your app.

Before you begin, you will need:

  • An Amplify project
  • The Amplify libraries installed and configured
Learn more
Review how OAuth authentication works

The preferred way to incorporate social provider sign-in is via an OAuth redirect which lets users sign in using their social media account and creates a corresponding user in the Cognito User Pool.

OAuth 2.0 is the common Authorization framework used by web and mobile applications for accessing user information ("scopes") in a limited manner. Common analogies you will hear in OAuth is that of boarding a plane or staying in a hotel - showing your identification is the authentication piece (signing into an app) and using the boarding pass/hotel key is what you are authorized to access.

OAuth support in Amplify uses Cognito User Pools and supports federation with social providers, which will automatically create a corresponding user in the User Pool after they sign in. With this design you do not need to include an SDK for the social provider in your app. After you set up your developer account with these social providers you can configure the Auth category by running amplify add auth and selecting the social provider option. You can then use signInWithRedirect() in your app to either show a pre-built "Hosted UI" or pass in a provider name (e.g. signInWithRedirect({provider:'Facebook'})) to interface directly and build your own UI. Image

Set up your social auth provider

Before you configure social sign-in with Amplify Auth you will need to set up your developer account with each provider you are using.

Note: Amazon Cognito provides first class support for Facebook Login, Google Sign-In, Login with Amazon, and Sign in with Apple for seamless setup. However you can configure other Identity Providers that support SAML or OpenID Connect (OIDC).

  1. Create a developer account with Facebook.

  2. Sign in with your Facebook credentials.

  3. Choose My Apps from the top navigation bar, and on the page that loads choose Create App. Create App button in the My Apps page of the Facebook developer account.

  4. For your use case, choose Set up Facebook Login. Set up Facebook Login option selected from list.

  5. For platform, choose Website and select No, I'm not building a game.

  6. Give your Facebook app a name and choose Create app. Form fields for the Facebook create app form.

  7. On the left navigation bar, choose Settings and then Basic. App ID and App Secret in the basic settings tab of the dashboard.

  8. Note the App ID and the App Secret. You will use them in the next section in the CLI flow.

Your developer accounts with the social providers are now set up and you can return to your Amplify project for next steps.

Configure the Auth category

Once you have the social providers configured you can update your Auth configuration through the Amplify CLI.

When configuring social sign-in through the Amplify CLI, it's important to exercise caution when designating attributes as "required". Each social identity provider has different information they send back to Cognito. User Pool attributes that are initially set up as "required" cannot be changed later. You may have to migrate the users or create a new User Pool if you need to change requirements.

To begin with the CLI, run the following in your project’s root folder:

amplify add auth ## "amplify update auth" if already configured
1amplify add auth ## "amplify update auth" if already configured

Choose the following options:

? Do you want to use the default authentication and security configuration? `Default configuration with Social Provider (Federation)` ? How do you want users to be able to sign in? `Username` ? Do you want to configure advanced settings? `No, I am done.` ? What domain name prefix you want us to create for you? `(default)` ? Enter your redirect signin URI: `myapp://` ? Do you want to add another redirect signin URI `No` ? Enter your redirect signout URI: `myapp://` ? Do you want to add another redirect signout URI `No` ? Select the social providers you want to configure for your user pool: `<choose your provider and follow the prompts to input the proper tokens>`
1? Do you want to use the default authentication and security configuration?
2 `Default configuration with Social Provider (Federation)`
3? How do you want users to be able to sign in?
4 `Username`
5? Do you want to configure advanced settings?
6 `No, I am done.`
7? What domain name prefix you want us to create for you?
8 `(default)`
9? Enter your redirect signin URI:
10 `myapp://`
11? Do you want to add another redirect signin URI
12 `No`
13? Enter your redirect signout URI:
14 `myapp://`
15? Do you want to add another redirect signout URI
16 `No`
17? Select the social providers you want to configure for your user pool:
18 `<choose your provider and follow the prompts to input the proper tokens>`

Note: You can configure your application to use more than one redirect URL. For more information, refer to the Redirect URLs section below.

Next, run amplify push to publish your changes. Once finished, it will display an auto generated URL for your web UI. You can retrieve your user pool domain URL at anytime by running amplify status using the CLI.

You need to now inform your social provider of this URL:

  1. Sign In to your Facebook developer account with your Facebook credentials.

  2. Choose My Apps from the top navigation bar, and on the Apps page, choose your app you created before.

  3. On the left navigation bar, choose Products. Add Facebook Login if it isn't already added.

  4. If already added, choose Settings under the Configure dropdown. The Settings option is circled from the configure dropdown.

  5. Under Valid OAuth Redirect URIs type your user pool domain with the /oauth2/idpresponse endpoint.


Userpool domain is pasted into the text field with /oauth2/ endpoint.

  1. Save your changes.

Note: Federated sign-in does not invoke any Custom authentication challenge Lambda triggers, Migrate user Lambda trigger, Custom message Lambda trigger, or Custom sender Lambda triggers in your user pool. For information on the supported Lambda triggers refer to the AWS documentation

You have configured your Auth category and updated your URL with the social providers. You can now set up the frontend for your app.

Install native module

signInWithRedirect displays the sign-in UI inside a platform-dependent webview. On iOS devices, an ASWebAuthenticationSession will be launched and, on Android, a Custom Tab. After the sign-in process is complete, the sign-in UI will redirect back to your app.

To enable this capability, an additional dependency must be installed.

npm install @aws-amplify/rtn-web-browser
1npm install @aws-amplify/rtn-web-browser

Platform Setup

On iOS, there should be no additional setup steps.


After a successful sign-in, the sign-in UI will attempt to redirect back to your application. To register the redirect URI scheme you configured above with the device, an intent-filter must be added to your application's AndroidManifest.xml file which should be located in your React Native app's android/app/src/main directory.

Add the intent-filter to your application's main activity, replacing myapp with your redirect URI scheme as necessary.

<application ...> <activity android:name=".MainActivity" ...> ... <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myapp" /> </intent-filter> ... </activity> </application>
1<application ...>
2 <activity android:name=".MainActivity" ...>
3 ...
4 <intent-filter>
5 <action android:name="android.intent.action.VIEW" />
6 <category android:name="android.intent.category.DEFAULT" />
7 <category android:name="android.intent.category.BROWSABLE" />
8 <data android:scheme="myapp" />
9 </intent-filter>
10 ...
11 </activity>

Set up your frontend

After configuring the OAuth endpoints (with Cognito Hosted UI), you can integrate your app by invoking the signInWithRedirect function which will redirect the user to the Cognito Hosted UI and provide options to sign in via username and password as well as any of the Social providers you have configured. Also, note that passing Amazon, Apple, Facebook or Google on the provider argument (e.g signInWithRedirect({ provider: 'Amazon' })) will bypass the Hosted UI and federate immediately with the social provider as shown in the below example.

Note: You can also use the Authenticator UI component to add social sign in flow to your application. The Authenticator reads directly from your Amplify configured socialProviders. Visit Social Provider section to learn more.

Add custom state

A custom state is not required, but if you are looking to add one, you are able to do so by passing a string value (e.g. signInWithRedirect({ customState: 'xyz' })) and listening for the custom state via Hub. You can also use the Hub eventing system to catch errors using signInWithRedirect() to listen for the signInWithRedirect_failure event.

import { useEffect, useState } from "react"; import { Text, View, Linking, Button } from "react-native"; import { Amplify } from "aws-amplify"; import { Hub } from "aws-amplify/utils"; import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth"; import { AuthUser } from "aws-amplify/auth"; import config from './amplifyconfiguration.json'; Amplify.configure(config); function App() { const [user, setUser] = useState<CognitoAuthUser | null>(null); const [error, setError] = useState<unknown>(null); const [customState, setCustomState] = useState<string | null>(null); useEffect(() => { const unsubscribe = Hub.listen("auth", ({ payload }) => { switch (payload.event) { case "signInWithRedirect": getUser(); break; case "signInWithRedirect_failure": setError("An error has ocurred during the oauth flow."); break; case "customOAuthState": setCustomState(; break; } }); getUser(); return unsubscribe; }, []); const getUser = async (): Promise<void> => { try { const currentUser = await getCurrentUser(); setUser(currentUser); } catch (error) { console.error(error); console.log("Not signed in"); } }; return ( <div className="App"> <button onClick={() => signInWithRedirect()}>Open Hosted UI</button> <button onClick={() => signInWithRedirect({ provider: "Facebook" })}> Open Facebook </button> <button onClick={() => signInWithRedirect({ provider: "Google" })}> Open Google </button> <button onClick={() => signInWithRedirect({ provider: "Amazon" })}> Open Amazon </button> <button onClick={() => signInWithRedirect({ provider: "Apple" })}> Open Apple </button> <button onClick={() => signOut()}>Sign Out</button> <div>{user?.username}</div> </div> ); }
1import { useEffect, useState } from "react";
2import { Text, View, Linking, Button } from "react-native";
3import { Amplify } from "aws-amplify";
4import { Hub } from "aws-amplify/utils";
5import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth";
6import { AuthUser } from "aws-amplify/auth";
7import config from './amplifyconfiguration.json';
11function App() {
12 const [user, setUser] = useState<CognitoAuthUser | null>(null);
13 const [error, setError] = useState<unknown>(null);
14 const [customState, setCustomState] = useState<string | null>(null);
16 useEffect(() => {
17 const unsubscribe = Hub.listen("auth", ({ payload }) => {
18 switch (payload.event) {
19 case "signInWithRedirect":
20 getUser();
21 break;
22 case "signInWithRedirect_failure":
23 setError("An error has ocurred during the oauth flow.");
24 break;
25 case "customOAuthState":
26 setCustomState(;
27 break;
28 }
29 });
31 getUser();
33 return unsubscribe;
34 }, []);
36 const getUser = async (): Promise<void> => {
37 try {
38 const currentUser = await getCurrentUser();
39 setUser(currentUser);
40 } catch (error) {
41 console.error(error);
42 console.log("Not signed in");
43 }
44 };
46 return (
47 <div className="App">
48 <button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
49 <button onClick={() => signInWithRedirect({ provider: "Facebook" })}>
50 Open Facebook
51 </button>
52 <button onClick={() => signInWithRedirect({ provider: "Google" })}>
53 Open Google
54 </button>
55 <button onClick={() => signInWithRedirect({ provider: "Amazon" })}>
56 Open Amazon
57 </button>
58 <button onClick={() => signInWithRedirect({ provider: "Apple" })}>
59 Open Apple
60 </button>
61 <button onClick={() => signOut()}>Sign Out</button>
62 <div>{user?.username}</div>
63 </div>
64 );

Deploy your backend environment with auth parameters for social sign-in

When you create or update your authentication configuration, Amplify will setup the configuration locally, but it does not automatically deploy the changes to your backend environment. You will need to run amplify push to deploy the changes to your backed environment.


Congratulations! You finished the Add social provider sign-in guide. In this guide, you learned how to set up your social auth provider, configure the Amplify Auth category for social sign-in, and set up the frontend. Your users can now sign into your app using their social provider accounts.

Next steps

Now that you have social provider sign-in you may also want to learn additional ways to customize these workflows. We recommend you learn more about: