Add social provider sign-in

1. Go to Google developer console.

2. Click Select a project.

3. Click NEW PROJECT.

4. Type in project name and click CREATE.

5. Once the project is created, from the left navigation menu, select APIs & Services, then select Credentials.

6. Click CONFIGURE CONSENT SCREEN.

7. Click CREATE.

8. Type in App Information and Developer contact information which are required fields and click SAVE AND CONTINUE three times (OAuth consent screen -> Scopes -> Test Users) to finish setting up the consent screen.

9. Back under the Credentials tab, Create your OAuth2.0 credentials by choosing OAuth client ID from the Create credentials drop-down list. .

10. Choose Web application as Application type and name your OAuth Client.

11. Click Create.

12. Take note of Your client ID and Your Client Secret. You will need them for the next section in the CLI flow.

13. Choose OK.

1. Create a developer account with Amazon.

2. Sign in with your Amazon credentials.

3. You need to create an Amazon security profile to receive the Amazon Client ID and Client Secret. Choose Create a Security Profile.

4. Type in a Security Profile Name, a Security Profile Description, and a Consent Privacy Notice URL.

5. Choose Save.

6. Choose Show Client ID and Client Secret to show the client ID and secret. You will need them for the next section in the CLI flow.

1. Sign In with your Apple developer credentials.

2. On the main developer portal page, select Certificates, IDs, & Profiles.

3. On the left navigation bar, select Identifier.

4. On the Identifiers page, select the plus icon (+).

5. On the Register a New Identifier page, select App IDs.

6. On the Register an App ID page, under App ID Prefix, take note of the Team ID value.

7. Provide a description in the Description text box and provide the bundleID of the iOS app.

8. Under Capabilities, select Sign in with Apple.

9. Select Continue, review the configuration, and then select Register.

10. On the Identifiers page, on the right, select App IDs, and then select Services ID.

11. Select the plus icon (+) and, on the Register a New Identifier page, select Services IDs.

12. Provide a description in the Description text box and provide an identifier for the Service ID.

13. Select Continue and register the Service ID.

1. Go to the Google developer console.

2. On the left navigation bar, look for APIs and Services under Pinned or under More Products if not pinned.

3. Within the APIs and Services sub menu, choose Credentials.

4. Select the client you created in the first step and click the Edit button.

5. Type your user pool domain into the Authorized Javascript origins form.

6. Type your user pool domain with the /oauth2/idpresponse endpoint into Authorized Redirect URIs.

   

   Note: If you saw an error message Invalid Redirect: domain must be added to the authorized domains list before submitting. when adding the endpoint, please go to the Authorized Domains List and add the domain.

7. Click Save.

1. Sign in with your Amazon credentials.

2. Hover over the gear and choose Web Settings associated with the security profile you created in the previous step, and then choose Edit.

3. Type your user pool domain into Allowed Origins and type your user pool domain with the /oauth2/idpresponse endpoint into Allowed Return URLs.

4. Choose Save.

1. Sign In with your Apple developer credentials.

2. On the main developer portal page, select Certificates, IDs, & Profiles.

3. On the left navigation bar, select Identifiers and then select Service IDs from the drop down list on the right.

4. Select the Service ID created when you set up your auth provider as outlined in the section above.

5. Enable Sign In with Apple and select Configure.

6. Under Primary App ID select the App ID that was created before.

7. Type your user pool domain into Domains and Subdomains.

8. Type your user pool domain with the /oauth2/idpresponse endpoint into Return URLs.

9. Click Next, review the information, then select Done.

10. On Edit your Services ID Configuration click Continue, review the information, then select Save.

11. On the main Certificates, Identifiers & Profiles, select Keys.

12. On the Keys page, select the plus icon (+).

13. Provide a name for the key under Key Name.

14. Enable Sign in with Apple and select Configure.

15. Under Primary App ID select the App ID that was created before.

16. Click on Save.

17. On Register a New Key click Continue, review the information, then select Register.

18. You will be redirected to a new page. Take note of the Key ID and download the .p8 file containing the private key.

• Set the launchMode of MainActivity to singleTask
• Add new intent filter (below) with scheme="myapp"

<application>
  <activity
    android:name=".MainActivity"
    android:launchMode="singleTask">

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

The sample below uses Expo's WebBrowser.openAuthSessionAsync.

import { useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Linking, Button } from "react-native";
import * as WebBrowser from "expo-web-browser";

import { Amplify, Hub, Auth } from "aws-amplify";
import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth";
import awsconfig from "./src/aws-exports";

const isLocalHost = Boolean(__DEV__);

const [localRedirectSignIn, productionRedirectSignIn] =
  awsconfig.oauth.redirectSignIn.split(",");

const [localRedirectSignOut, productionRedirectSignOut] =
  awsconfig.oauth.redirectSignOut.split(",");

async function urlOpener(url: string, redirectUrl: string): Promise<void> {
  const authSessionResult = await WebBrowser.openAuthSessionAsync(
    url,
    redirectUrl
  );

  if (authSessionResult.type === "success" && Platform.OS === "ios") {
    WebBrowser.dismissBrowser();
    return Linking.openURL(authSessionResult.url);
  }
}

const updatedConfig = {
  ...awsconfig,
  oauth: {
    ...awsconfig.oauth,
    redirectSignIn: isLocalHost
      ? localRedirectSignIn
      : productionRedirectSignIn,
    redirectSignOut: isLocalHost
      ? localRedirectSignOut
      : productionRedirectSignOut,
    urlOpener,
  },
};
Amplify.configure(updatedConfig);

export default function App() {
  const [user, setUser] = useState(null);
  const [customState, setCustomState] = useState<string | null>(null);

  useEffect(() => {
    const unsubscribe = Hub.listen("auth", ({ payload: { event, data }}) => {
      console.log("event", event);
      console.log("data", data);
      switch (event) {
        case "signIn":
          setUser(data);
          break;
        case "signOut":
          setUser(null);
          break;
        case "customOAuthState":
          setCustomState(data);
          break;
      }
    });

    getUser();

    return unsubscribe;
  }, []);

  const getUser = async (): Promise<void> => {
    try {
      const currentUser = await Auth.currentAuthenticatedUser();
      setUser(currentUser);
    } catch(error) {
      console.error(error);
      console.log("Not signed in");
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Open Hosted UI" onPress={() => Auth.federatedSignIn()} />
      <Button
        title="Open Facebook"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Facebook,
          })
        }
      />
      <Button
        title="Open Google"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Google,
          })
        }
      />
      <Button
        title="Open Amazon"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Amazon,
          })
        }
      />
      <Button
        title="Open Apple"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Apple,
          })
        }
      />
      <Button title="Sign Out" onPress={() => Auth.signOut()} />
      <Text>{user && user.getUsername()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

import { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Linking, Button } from 'react-native';
import * as WebBrowser from 'expo-web-browser';

import { Amplify, Hub, Auth } from 'aws-amplify';
import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
import awsconfig from './src/aws-exports';

const isLocalHost = Boolean(__DEV__);

const [localRedirectSignIn, productionRedirectSignIn] =
  awsconfig.oauth.redirectSignIn.split(',');

const [localRedirectSignOut, productionRedirectSignOut] =
  awsconfig.oauth.redirectSignOut.split(',');

async function urlOpener(url, redirectUrl) {
  const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(
    url,
    redirectUrl
  );

  if (type === 'success' && Platform.OS === 'ios') {
    WebBrowser.dismissBrowser();
    return Linking.openURL(newUrl);
  }
}

const updatedConfig = {
  ...awsconfig,
  oauth: {
    ...awsconfig.oauth,
    redirectSignIn: isLocalHost
      ? localRedirectSignIn
      : productionRedirectSignIn,
    redirectSignOut: isLocalHost
      ? localRedirectSignOut
      : productionRedirectSignOut,
    urlOpener
  }
};
Amplify.configure(updatedConfig);

export default function App() {
  const [user, setUser] = useState(null);
  const [customState, setCustomState] = useState(null);

  useEffect(() => {
    const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
      console.log('event', event);
      console.log('data', data);
      switch (event) {
        case 'signIn':
          setUser(data);
          break;
        case 'signOut':
          setUser(null);
          break;
        case 'customOAuthState':
          setCustomState(data);
          break;
      }
    });

    Auth.currentAuthenticatedUser()
      .then((currentUser) => setUser(currentUser))
      .catch(() => console.log('Not signed in'));

    return unsubscribe;
  }, []);

  return (
    <View style={styles.container}>
      <Button title="Open Hosted UI" onPress={() => Auth.federatedSignIn()} />
      <Button
        title="Open Facebook"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Facebook
          })
        }
      />
      <Button
        title="Open Google"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Google
          })
        }
      />
      <Button
        title="Open Amazon"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Amazon
          })
        }
      />
      <Button
        title="Open Apple"
        onPress={() =>
          Auth.federatedSignIn({
            provider: CognitoHostedUIIdentityProvider.Apple
          })
        }
      />
      <Button title="Sign Out" onPress={() => Auth.signOut()} />
      <Text>{user && user.getUsername()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});