Save time by using AWS Authentication with React Native Apps

We all have seen significant growth in the development of the React Native application in recent times. One of the most important features in any application is authentication that usually is the entry point into your application. In this hands-on tutorial, we will learn how to use AWS Amplify service to quickly add authentication capability to our application.

1. Creating a demo application using react-native-cli:

Considering your system is already set up to use JavaScript, let’s jump on to installing react-native-cli on your machine.

Execute this command in your terminal.

npm install -g react-native-cli

This will set up your system to use React Native. Now, let’s create our first React Native application.

Execute this command in your terminal.

react-native init MyFirstProject

This will create an initial scaffolding for your project. This will be your playground area where you will be adding new components and dependencies. Please note that in the above command “MyFirstProject” is the name of your project. Hence, you can use any preferred name of your choice.

Let us now jump to the project using the below command.

cd MyFirstProject

In order to make some changes to your default application, replace the contents of your App.js file with the below content.

import React from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
const App = () => {
 return (
  <View style={styles.view}>
   <Text>Xebia Engineering is Awesome</Text>
  </View>
 );
};
const styles = StyleSheet.create({
 view: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
 },});
export default App;

In the code snippet shown above, we created our first component that will render Xebia Engineering is Awesome.

Excited to run your first react native app on the phone? Execute the below command in your terminal.

react-native run-ios --simulator=”iPhone 11 Pro Max”

The above command will tell react-native CLI to use iPhone 11 Pro Max as a simulator. If you want to use any other device, please specify the device of your choice.

Once the command is successfully executed, it will open up a simulator and your application would be displayed something like this.

Hoorah! We have successfully completed Part 1 of the tutorial.

2. Adding AWS Amplify Authentication to the application

After you have your demo application up and running, let’s move forward and add AWS authentication to it. For this, we would be using AWS Amplify Service for authentication.

You can get details about AWS Amplify framework from https://aws.amazon.com/amplify/

Let us add the npm packages that would be required to make AWS Amplify work with our application. In the terminal, execute the following commands:

npm install aws-amplify
react-native link aws-amplify
npm install aws-amplify-react-native
react-native link aws-amplify-react-native

Once you have successfully added to your project then create a new file named aws-exports.jsand populate it with following code

const awsConfig = {
  identityPoolId: "",
  region: "",
  userPoolId: "",
  userPoolWebClientId: ""
};
export default awsConfig;

Do not forget to add the relevant values from the AWS console to make this service work.

Now let us modify our App.js by importing the relevant libraries for authentication.

import React from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import Amplify from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react-native";
import awsConfig from "./aws-exports";
Amplify.configure(awsConfig);
const App = () => {
 return (
  <View style={styles.view}>
   <Text>Xebia Engineering is Awesome</Text>
  </View>
 );
};
const styles = StyleSheet.create({
 view: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
 },});
export default withAuthenticator(App);

Next, we will refresh our app and it should now show an AWS authentication screen.

Test the application by signing up new users and then signing in. The authentication should also work for existing users in your pool.

Exciting? We have now completed Part 2 of the tutorial.

3. Extending the native AWS authentication screen with your own custom styling.

Let us now create a new component and name it login.js and we will create our custom login screen here. For this tutorial, I have created a simple login screen like this.

My login.js component looks something like this:

import React, {Component} from "react";
import Amplify from "aws-amplify";
import {Button, TextInput, View} from "react-native";
import awsConfig from "./aws-exports";
Amplify.configure(awsConfig);
export default class Login extends Component {
// ----------------------------------------
// ----------------------------------------
// CONSTRUCTOR AND LIFE CYCLES
// ----------------------------------------
constructor(props) {
  super(props);
  this.state = {
    data: {
      email: "",
      password: "",
    },
    error: {
      email: null,
      password: null,
    },
  };
}
// ----------------------------------------
shouldComponentUpdate(nextProps, nextState) {
  if (this.props !== nextProps) {
    return true;
  }
  if (this.state !== nextState) {
    return true;
  }
  return false;
}
// ----------------------------------------
// ----------------------------------------
// METHODS
// ----------------------------------------
onValueChange(key, value) {
  const {
    data,
  } = this.state;
data[key] = value;
this.setState({
  data,
  });
}
// ----------------------------------------
login() {
  const {
    email,
    password,
  } = this.state.data;
  const error = {
    email: this.getEmailError(email),
    password: this.getPasswordError(password),
  };
  this.setState({
    error,
  });
  Amplify.Auth.signIn(email, password)
    .then(/* perform the required action. For example: Navigate to a       new screen if authentication is successfull */)
    .catch(err => alert(err.message));
  }
render(){
  return(
    <View>
      <TextInput
         style={{ height: 40, width: 300, borderColor: 'gray',
         borderWidth: 1, textAlign: "center" }}
         placeholder="Email"
         value={ this.state.data.email }
         error={ this.state.error.email }
         onChangeText={ (value) =>this.onValueChange("email",value)}
       />
      <TextInput
         style={{ height: 40, width: 300, borderColor: 'gray',
         borderWidth: 1, textAlign: "center", marginTop: 20 }}
         placeholder="Password"
         value={ this.state.data.password }
         error={ this.state.error.password }
         onChangeText={ (value) => this.onValueChange("password",         value) }
       />
      <Button
         title="Login"
         onPress={ () => this.login() }
       />
   </View>
  )
 }
}

Here we have configured our Amplify service like this:

Amplify.configure(awsConfig);

The most important thing to notice here is the use of Amplify.Auth.signIn()
It is a simple promise which takes the email and password as two parameters. If the promise is resolved, you instruct your app to perform a certain action using .then() method. If the authentication fails, we simply display the error message in the form of an alert in the .catch() method().

Bravo !! We now have a react native application working with AWS Amplify authentication on our custom Sign In page.

You can view the entire tutorial code in the Git repository here: https://github.com/mayank0409/aws-authentication-with-react-native