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

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.

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.

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

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

Choose the following options:

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    `http://localhost:3000/`
11? Do you want to add another redirect signin URI
12    `No`
13? Enter your redirect signout URI:
14    `http://localhost:3000/`
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>`

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:

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

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.

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.

1import { Hub } from "aws-amplify/utils";
2import { signInWithRedirect, getCurrentUser, AuthUser } from "aws-amplify/auth";
3
4Hub.listen("auth", ({ payload }) => {
5  switch (payload.event) {
6    case "signInWithRedirect":
7      const user = await getCurrentUser();
8      console.log(user.username);
9      break;
10    case "signInWithRedirect_failure":
11      // handle sign in failure
12      break;
13    case "customOAuthState":
14      const state = payload.data; // this will be customState provided on signInWithRedirect function
15      console.log(state);
16      break;
17  }
18});
19
20function handleSignInClick(customState: string) {
21  signInWithRedirect({
22    provider: "Google",
23    customState
24  });
25}

1import { Hub } from "aws-amplify/utils";
2import { signInWithRedirect, getCurrentUser } from "aws-amplify/auth";
3
4Hub.listen("auth", ({ payload }) => {
5  switch (payload.event) {
6    case "signInWithRedirect":
7      const user = await getCurrentUser();
8      console.log(user.username);
9      break;
10    case "signInWithRedirect_failure":
11      // handle sign in failure
12      break;
13    case "customOAuthState":
14      const state = payload.data; // this will be customState provided on signInWithRedirect function
15      console.log(state);
16      break;
17  }
18});
19
20function handleSignInClick(customState) {
21  signInWithRedirect({
22    provider: "Google",
23    customState
24  });
25}

Redirect URLs

For Sign in Redirect URI(s) inputs, you can put one URI for local development and one for production. Example: http://localhost:3000/ in dev and https://www.example.com/ in production. The same is true for Sign out redirect URI(s).

If you have multiple redirect URI inputs, you'll need to pass them in your Amplify configuration. For example:

1Amplify.configure({
2  Auth: {
3    Cognito: {
4      loginWith: {
5        oauth: {
6          redirectSignIn: [
7            'http://localhost:3000/',
8            'https://www.example.com/'
9          ],
10          redirectSignOut: [
11            'http://localhost:3000/',
12            'https://www.example.com/'
13          ],
14          ...oauthConfig
15        }
16      },
17      ...userPoolConfig
18    }
19  }
20});

1import React, { useEffect, useState } from "react";
2import { Amplify } from "aws-amplify";
3import { Hub } from "aws-amplify/utils";
4import { signInWithRedirect, signOut, getCurrentUser } from "aws-amplify/auth";
5import { AuthUser } from "aws-amplify/auth";
6
7Amplify.configure({
8  Auth: {
9    Cognito: {
10      loginWith: {
11        oauth: {
12          redirectSignIn: [
13            "http://localhost:3000/",
14            "https://www.example.com/",
15          ],
16          redirectSignOut: [
17            "http://localhost:3000/",
18            "https://www.example.com/",
19          ],
20          ...oauthConfig
21        },
22      },
23     ...userPoolConfig
24    },
25  },
26});
27
28function App() {
29  const [user, setUser] = useState<AuthUser | null>(null);
30  const [error, setError] = useState<unknown>(null);
31  const [customState, setCustomState] = useState<string | null>(null);
32
33  useEffect(() => {
34    const unsubscribe = Hub.listen("auth", ({ payload }) => {
35      switch (payload.event) {
36        case "signInWithRedirect":
37          getUser();
38          break;
39        case "signInWithRedirect_failure":
40          setError("An error has occurred during the Oauth flow.");
41          break;
42        case "customOAuthState":
43          setCustomState(payload.data);
44          break;
45      }
46    });
47
48    getUser();
49
50    return unsubscribe;
51  }, []);
52
53  const getUser = async (): Promise<void> => {
54    try {
55      const currentUser = await getCurrentUser();
56      setUser(currentUser);
57    } catch (error) {
58      console.error(error);
59      console.log("Not signed in");
60    }
61  };
62
63  return (
64    <div className="App">
65      <button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
66      <button onClick={() => signOut()}>Sign Out</button>
67      <div>{user?.username}</div>
68    </div>
69  );
70}

1import React, { useEffect, useState } from 'react';
2import { Amplify } from 'aws-amplify';
3import { Hub } from 'aws-amplify/utils';
4import { signInWithRedirect, signOut, getCurrentUser } from 'aws-amplify/auth';
5
6Amplify.configure({
7  Auth: {
8    Cognito: {
9      loginWith: {
10        oauth: {
11          redirectSignIn: [
12            'http://localhost:3000/',
13            'https://www.example.com/'
14          ],
15          redirectSignOut: [
16            'http://localhost:3000/',
17            'https://www.example.com/'
18          ],
19          ...oauthConfig
20        }
21      },
22      ...userPoolConfig
23    }
24  }
25});
26
27function App() {
28  const [user, setUser] = useState(null);
29  const [error, setError] = useState(null);
30  const [customState, setCustomState] = useState(null);
31
32  useEffect(() => {
33    const unsubscribe = Hub.listen('auth', ({ payload }) => {
34      switch (payload.event) {
35        case 'signInWithRedirect':
36          getUser();
37          break;
38        case 'signInWithRedirect_failure':
39          setError('An error has occurred during the Oauth flow.');
40          break;
41        case 'customOAuthState':
42          setCustomState(payload.data);
43          break;
44      }
45    });
46
47    getUser();
48
49    return unsubscribe;
50  }, []);
51
52  const getUser = async () => {
53    try {
54      const currentUser = await getCurrentUser();
55      setUser(currentUser);
56    } catch (error) {
57      console.error(error);
58      console.log('Not signed in');
59    }
60  };
61
62  return (
63    <div className="App">
64      <button onClick={() => signInWithRedirect()}>Open Hosted UI</button>
65      <button onClick={() => signInWithRedirect({ provider: 'Facebook' })}>
66        Open Facebook
67      </button>
68      <button onClick={() => signInWithRedirect({ provider: 'Google' })}>
69        Open Google
70      </button>
71      <button onClick={() => signInWithRedirect({ provider: 'Amazon' })}>
72        Open Amazon
73      </button>
74      <button onClick={() => signInWithRedirect({ provider: 'Apple' })}>
75        Open Apple
76      </button>
77      <button onClick={() => signOut()}>Sign Out</button>
78      <div>{user?.username}</div>
79    </div>
80  );
81}

(Required for Multi-Page Applications) Complete Social Sign In after Redirect

If you are developing a multi-page application, and the redirected page is not the same page that initiated the sign in, you will need to add the following code to the redirected page to ensure the sign in gets completed:

1import 'aws-amplify/auth/enable-oauth-listener';

Custom Providers

When using custom providers that are not provided by default in Cognito, you can pass an object to the provider parameter with the name of your custom provider.

1import { signInWithRedirect } from 'aws-amplify/auth';
2
3const provider = {
4  custom: 'MyCustomOIDCProvider'
5}
6
7function handleSignInClick() {
8    signInWithRedirect({ provider })
9}

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.

You can deploy your app to the Amplify Console with continuous deployment of the frontend and backend, please follow these instructions.

Conclusion

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:

• Password management
• Identity Pool Federation
• Working with Hub