feat(aws-amplify-react-native): Add withOAuth HOC for Cognito Hosted UI

[manueliglesias]

Issue #, if available:

Description of changes:

// Configure Amplify
Amplify.configure({
  Auth: {
    oauth: {
      // Domain name
      domain: 'some-hosted-ui.auth.xx-xxxx-x.amazoncognito.com',

      // Authorized scopes
      scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],

      // Callback URL
      redirectSignIn: Linking.makeUrl('/sign-in'),

      // Sign out URL
      redirectSignOut: Linking.makeUrl('/sign-out'),

      // 'code' for Authorization code grant, 
      // 'token' for Implicit grant
      responseType: 'code',

      // optional, for Cognito hosted ui specified options
      options: {
        // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
        AdvancedSecurityDataCollectionFlag: true,
      },

      // Optional, showing Expo's WebBrowser usage in ReactNative
      urlOpener: async (url, redirectUrl) => {
        const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);

        if (type === 'success') {
          await WebBrowser.dismissBrowser();

          if (Platform.OS === 'ios') {
            return Linking.openURL(newUrl);
          }
        }
      }
    }
  }
});

// Build UI
class App extends React.Component {
  render() {
    const {
      oAuthUser: user,
      oAuthError: error,
      hostedUISignIn,
      facebookSignIn,
      googleSignIn,
      amazonSignIn,
      customProviderSignIn,
      signOut
    } = this.props;

    return (
      <SafeAreaView style={styles.safeArea}>
        {user && <Button title="Sign Out" onPress={signOut} icon='logout' />}
        <ScrollView contentContainerStyle={styles.scrollViewContainer}>
          <Text>{JSON.stringify({ user, error, }, null, 2)}</Text>
          {!user && <React.Fragment>
            <Button title="Cognito" onPress={hostedUISignIn} />
            <Button title="Facebook" onPress={facebookSignIn} />
            <Button title="Google" onPress={googleSignIn}  />
            <Button title="Amazon" onPress={amazonSignIn} />
            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} />
          </React.Fragment>}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

// Create HOC
export default withOAuth(App);

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[manueliglesias]

Look at the diff with ?w=1 in the url, Auth.js shows a lot of changes but it is only because the file used to have wrong line endings.

[undefobj]

Small changes for maintenance, otherwise looking great!

[undefobj]

Per our 1:1 code review and testing, this all looks good and is working great. Let's please follow up on the docs around using React Native links and tying this to the URLs entered into the Cognito console.

[mtraynham]

Are buffer and react-native supposed to peerDependencies of @aws-amplify/[email protected]?

https://github.com/aws-amplify/amplify-js/pull/2665/files#diff-ac40fa61dfab81b51944a4e8ab2de752R59

I don't think this affects anything, but you get a warning now when installing.

npm WARN @aws-amplify/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @aws-amplify/[email protected] requires a peer of react-native@^0.44.0 but none is installed. You must install peer dependencies yourself.

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.