Connect React-Native to Serverless API: AWS Sign-in with Amplify SDK

Part ɪɪɪ: Connect UI to API │Story 03: Update UserSignIn Component to sign-in to AWS

GIT : Repo| Feature/Story branch | PR

In the previous post, we configured Identity pool in AWS Cognito with OpenID Connect (OIDC) as authentication provider for it. The OIDC has been set to use Google as auth provider with the two client Ids we have for iOS and Android.

In this article, we would connect to this AWS Cognito Identity pool from our react-native app using Amplify SDK’s Auth.federatedSignIn method.

Add Identity pool Id and Region to Amplify Config

1 . Update src/config/appConstants.js to add our Identity Pool’s Id and region: 👇

👆line # 10–13: we added AWS Cognito Identity Pool Id and Region

2 . Update src/config/appConfig.js as below :

👆line # 21–25: We provided our Identity Pool details to Amplify’s configuration. The Auth class of Amplify SDK will use these details to connect to the identity pool and get our user authenticated.

3 . Next, update the UserSignIn component to take the google sessions’s idToken and pass it on to Amplify’s Auth.federatedSignIn method that would authenticate/authorize the user for AWS and return AWS user session object.

Lets see what updates we’ve made to our UserSignIn component above:

1 . We import Auth modules from aws-amplify.

2 . Line # 79-80 : In the onSignInPress method, after GoogleSignIn returns successfully, we call a local class method awsSignIn method, passing it the Google’s Sign-in response.

3 .Line # 97–115 : awsSignIn method: In this method, we grab idToken, expiration time and user’s email from the Google’s Sign-in response, and pass this to Amplify’s Auth.federatedSignIn to sign in to AWS Congnito’s Identity pool.

4 .Line # 136/149 : If user is already signed-in to his/her google account, we call local class method getCurrentUserInfo. In this method we call awsSignIn method again to sign in to the identity pool.

5 . On successful signing in to first Google and then to AWS Identity pool, we dispatch the UserSignIn_onSuccess redux action and then navigate to the Home screen.

6 .Line #164 : In the signOut method, we added Auth.signOut method to log out from AWS session as well.

With these changes in the UserSignIn component, below is how the authentication/authorization flow would work:

a . when a users signs in with his/her Google credentials to our app, we would pass the auth-token from Google to AWS Cognito Identity Pool using the Amplify SDK’s methodAuth.federatedSignIn .

b . Our Identity pool is using OpenID Connection Provider(OIDC) to authenticate the user request.

c . The OIDC has been configured to use Google Authentication provider URL with the client Ids of our iOS and Android apps.

d . Thus, the Identity pool would authenticate the request coming from the configured ClientIDs with a valid Google sign-in auth token.

e . After the request is authenticated, AWS Cognito Identity pool would associate the Authenticated User Role policy that we have configured to allow access to our serverless API. Thus our noteWordy app user should be able to access to the our Serverless API.

Update signOut method in AppHeader

Also update the signOut method in AppHeader component to log out from user’s AWS session as well 👇

  /**
   * @name signOut
   */
  signOut = async () => {
    try {
      await Auth.signOut();
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
    } catch (error) {
      // console.error(error);
    } finally {
      this.props.UserSignIn_logOut({});
      this.props.navigation.navigate('SignIn');
    }
  };

Moment of truth

Alright, now that we got the AWS sign in implemented, let’s see if we can post a word to the db without any 403 Forbidden error that we were getting earlier before adding the AWS authentication. Run the app on simulator:

First let’s check if the Sign-in is working as expected, now that we are calling Amplify’s Auth.federatedSignIn, we should get authenticated by the AWS Identity Pool after Google sign-in.

[[ ⚠️ If you noticed, we see an error thrown in the console at Auth.federatedSignIn -AuthClass - Cannot get the current user because the user pool is missing. Please make sure the Auth module is configured with a valid Cognito User Pool ID. But finally it works as expected. This apparently is an issue with Amplify SDK. ]]

Awesome, User Sign-in seem to be working fine. As can be seen from the console log, we get a success for the UserSignIn_OnSuccess action, which we trigger after Auth.federatedSignIn successfully returns confirming that we successfully authenticated with AWS Identity pool.

Next, lets see if we can post a word to our database table: 👇

$ react-native run-ios

and on Android:

$ react-native run-android

👏 Excellent!! Our app is now able to access our AWS Serverless API and as we see above, the word is now getting posted to the dynamoDB table 🙌

In the next post, we would update the Home screen to connect it with API via redux, replace the static list of words that we had so far on the screen with a dynamic list of words fetched from database and add Edit and delete words feature.

← Prev:Identity Pool┈🏠┈Next:Home screen with data from DB→