federated sign in for react native

docs/media/authentication_guide.md

@@ -316,6 +316,45 @@ return (
     <Authenticator federated={federated}>
 )
 ```
+
+For React Native, you can use `Auth.federatedSignIn()` to get your federated identity from Cognito. You need to provide a valid JWT token from the third provider. You can also use it with `Authenticator` so that your login status will be automatically persisted by that component.
+
+Federated Sign in with Facebook Example:
+```js
+import Expo from 'expo';
+import Amplify, { Auth } from 'aws-amplify';
+import { Authenticator } from 'aws-amplify-react-native';
+
+export default class App extends React.Component {
+  async signIn() {
+    const { type, token, expires } = await Expo.Facebook.logInWithReadPermissionsAsync('YOUR_FACEBOOK_APP_ID', {
+        permissions: ['public_profile'],
+      });
+    if (type === 'success') {
+      // sign in with federated identity
+      Auth.federatedSignIn('facebook', { token, expires_at: expires}, { name: 'USER_NAME' })
+        .then(credentials => {
+          console.log('get aws credentials', credentials);
+        }).catch(e => {
+          console.log(e);
+        });
+    }
+  }
+
+  // ...
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Authenticator>
+        </Authenticator>
+        <Button title="FBSignIn" onPress={this.signIn.bind(this)} />
+      </View>
+    );
+  }
+}
+```
+
 #### Customize UI
 
 In order to customize the UI for Federated Identities sign-in, you can use `withFederated` component. The following code shows how you customize the login buttons and the layout for social sign-in.

packages/aws-amplify-react-native/src/Auth/Authenticator.js

@@ -16,7 +16,8 @@ import { View, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { 
     Auth, 
     Analytics,
-    Logger 
+    Logger,
+    Hub
 } from 'aws-amplify';
 import AmplifyTheme from '../AmplifyTheme';
 import AmplifyMessageMap from '../AmplifyMessageMap';
@@ -65,12 +66,20 @@ export default class Authenticator extends React.Component {
 
         this.handleStateChange = this.handleStateChange.bind(this);
         this.checkUser = this.checkUser.bind(this);
+        this.onHubCapsule = this.onHubCapsule.bind(this);
+
+        Hub.listen('auth', this);
     }
 
     componentWillMount() {
         this.checkUser();
     }
 
+    onHubCapsule(capsule) {
+        const { channel, payload, source } = capsule;
+        if (channel === 'auth') { this.checkUser(); }
+    }
+
     handleStateChange(state, data) {
         logger.debug('authenticator state change ' + state);
         if (state === this.state.authState) { return; }

packages/aws-amplify/src/Auth/Auth.ts

@@ -1243,7 +1243,7 @@ export default class AuthClass {
     }
 
 
-    private _setCredentialsFromFederation(params) {
+    private async _setCredentialsFromFederation(params) {
         const { provider, token, identity_id, user, expires_at } = params;
         const domains = {
             'google': 'accounts.google.com',
@@ -1271,7 +1271,11 @@ export default class AuthClass {
             region
         });
 
-        Cache.setItem('federatedInfo', { provider, token, identity_id, user, expires_at }, { priority: 1 });
+        try {
+            await Cache.setItem('federatedInfo', { provider, token, identity_id, user, expires_at }, { priority: 1 });
+        } catch (e) {
+            logger.debug('Failed to cache federated info with', e);
+        }
         return this._loadCredentials(credentials, 'federated', true, user);
     }