User Authorization with React Native & AWS using React Native Navigation (V2)

Adding Authentication to a React Native app with React Native Navigation & AWS.


This is part 2 of a 2 part series. For part 1, click here.

Continuing on from Part1, we now want to add real user signup & signin to our app using AWS.

We’ll use AWS Amplify to connect to AWS, & Amazon Cognito to manage users.

If you already have the code from part 1, you can skip to the next step. If you are starting from here, you can clone the project from this repo and start from there.

Creating the Auth service

From within the root of the React Native project, we would like to initialize a new AWS project so that we can add authentication. To do so, we need to install & configure the AWS Mobile CLI:

npm i -g awsmobile-cli
awsmobile configure

Once you’ve installed & configured the CLI, initialize a new AWS project:

awsmobile init

This command will do a few things:

  1. Create a new Mobile Hub project in our AWS Account.
  2. Install a couple of dependencies into our project:aws-amplify & aws-amplify-react-native.
  3. Add local configuration files (awsmobilejs & aws-exports.js) that will allow us to edit configuration locally via the cli & push changes to our AWS Mobile Hub project in the AWS console.

Next, we need to link a native dependency to our React Native project:

react-native link amazon-cognito-identity-js

Now we need to add user-signin to our new AWS project:

awsmobile user-signin enable

And the push it to the AWS console:

awsmobile push

We now have the user-sigin functionality enabled & ready to use! You can view the entire Mobile Hub project in your AWS account by running awsmobile console from your command line. You can also visit the Amazon Cognito console to view the new Amazon Cognito configuration there.

Wiring up the React Native app

Now that the service has been created, we need to update the App to use it! We’ll first need to update index.js to use the configuration in aws-exports.js to work with AWS Amplify.

index.js

index.js — we’ve imported the Amplify library as well as the AWS configuration from aws-exports.js, and called the Amplify.configure function, passing in the config. This will initialize the React Native project & allow us to start calling AWS services using Amplify from anywhere within our app.


SignUp.js

In SignUp.js, we’ll update thesignUp function to handle new user sign up & create a new confirmSignUp function for MFA.

SignUp.js — Here we have 2 basic forms: one to sign up a new user & one to confirm the sign up of the new user using MFA. The confirm sign up form will allow the user to enter their MFA code to identify that they’ve received the MFA code. We show & hide the 2 forms based on the boolean value of this.state.showConfirmationForm which will be updated in the signUp & confirmSignUp class methods.

The methods we call to sign up & confirm sign up from AWS Amplify are Auth.signUp & Auth.confirmSignUp.


SignIn.js

In SignIn.js, we’ll update thesignIn function to handle user sign in & create a new confirmSignIn function for MFA.

SignIn.js — The logic in this component is very similar to what we did in SignUp.js with one difference: when we call Auth.signIn, we save the returned value from the method call in our state for later use in Auth.confirmSignIn. When we call Auth.confirmSignIn(user, confirmationCode), we pass in this user object along with the authentication code coming from our MFA.

Initializing.js

Once the user is logged in, you can retrieve information about the user by calling Auth.currentAuthenticatedUser. If there is a signed in user, this function will succeed & we can load the main application. If this fails, we can then load the authentication routes (SignIn & SignUp).

To implement this, let’s import the Auth component from AWS Amplify & update the componentDidMount lifecycle method to check for the user:

// Initializing.js
// previous imports excluded
import { Auth } from 'aws-amplify'
export default class Initialising extends React.Component {
async componentDidMount() {
try {
const user = await Auth.currentAuthenticatedUser()
console.log('user: ', user)
if (user) {
goHome()
} else {
goToAuth()
}
} catch (err) {
console.log('error: ', err)
goToAuth()
}
}
// rest of class excluded
}
To see the final version of this component, click here.

Home.js

The last thing we need to do is to update the SignOut button to actually sign out the user when clicked. To do this, we can attach the onPress handler to call the Auth.signOut method from AWS Amplify:

// Home.js
// previous imports excluded
import { Auth } from 'aws-amplify'
export default class Home extends React.Component {
// static options omitted
logout = async () => {
try {
await Auth.signOut()
goToAuth()
} catch (err) {
console.log('error signing out...: ', err)
}
}
// rest of class excluded
}
To see the final version of this component, click here.

Conclusion

Getting up and running with user authentication is really straightforward with the combination of Amazon Cognito & AWS Amplify. The techniques we’ve used in this tutorial of working with React Native Navigation will also work really well with any other authentication provider.

As far as the React Native “Navigation” landscape goes, there are two libraries that I usually use in my projects: React Navigation is my go to, and I also have really liked React Native Navigation.

React Navigation is extremely well maintained & is very mature. The library does almost anything you would like & the maintainers (Brent Vatne Eric Vicenti et al) have done an excellent job of keeping up with issues & making it a first class library.

React Native Navigation is a solid second choice & is also very well maintained by the Wix team who care a lot about the React Native ecosystem & have contributed to many solid open source projects. React Native Navigation V2 just recently came out of alpha so there may be some missing features. If so, submit an issue or a pull request.

I don’t think you could go wrong with either library at this point in time.

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AWS AppSync and AWS Amplify, and the founder of React Native Training.
If you enjoyed this article, please clap n number of times and share it! Thanks for your time.