Welcome to the second part 2 of this series of articles about user authentication with React Native and AWS Amplify.

The aim of this series is to show you how to add a custom fully fletched authentication layer to your projects while keeping full control over the styling of your components.

Now, this is a progressive tutorial. So if you did not follow part 1 please go and check it out here.

If you want to check the full code for this project go to this link here.

Reminder

As we discussed in part 1, our focus will be on building the front-end part of the app first. By front-end, I mean app layout and navigation flow.

Then we will move to integrate AWS Amplify as our back end cloud service for securely authenticating users in the app.

We left it where the app had full navigation-flow to authenticate users using react-navigation 2.

Demo of part 1 final progress in the video below.

User authentication flow with react-navigation 2.

In this article, we will keep working on the front-end part of the application.

4 — Application layout with native-base

Throughout this part and the next one, we will add the following to our application.

A custom splash screen with Expo.

A layout of the sign in, sign up, forget the password, reset the password, and sign out screens.

An app logo with fade in and fade out animation effects.

Tab navigation layout.

International phone input.

So let us get started 👌.

4.1 — Custom splash screen

Let us first start by replacing the default splash screen of Expo by our custom splash screen.

I made an independent mini-tutorial to achieve this. Hence, I won’t be repeating myself here.

I am gonna ask you to jump to the following link and follow the instructions in the article step by step to do this first task.

4.2 — Sign in screen layout

We start by building the layout of the SignInScreen.js.

As for now, this sign-in page only renders some text through the Text component.

To make our changes, we need to add the following imports to SignInScreen.js.

import {

StyleSheet,

View,

Text,

AsyncStorage,

TouchableOpacity,

TouchableWithoutFeedback,

SafeAreaView,

StatusBar,

KeyboardAvoidingView,

Keyboard,

Alert,

Animated,

} from 'react-native' import {

Container,

Item,

Input,

Icon

} from 'native-base'

I will explain the role of each of these components as we progress. But if you are a React Native developer you might have come across a few of them if not all of them already.

Let us define the styles for these components beforehand. Replace your styles with the following.

Styles for the sign-in screen.

Each style object defined in the above Gist will be passed as props to each component inside the render() method.

To sign in the user, we need to store the user’s username and password then navigate them to the app screen.

Inside the SignInScreen class component, add the following state fields and method above the sign-in method.

state = {

username: '',

password: '',

} onChangeText(key, value) {

this.setState({[key]: value})

} // previous code for sign in method

async signIn() {...}

The onChangeText method will update the state of the username and password fields as the user types in.

Replace the code inside the render() method of the SignInScreen class component with the following code.

The new render method of the SignInScreen.

Now let us go through each of these components and understand what it is doing.

As you can see, we used SafeAreaView to wrap all other components.

The SafeAreaView will prevent the header from getting behind the device boundaries extension.

After the SafeAreaView, we added the StatusBar component. This component gives us the possibility to style the status bar of the device.

The next child component is KeyboardAvoidingView. This view will change the padding dynamically when we toggle the keyboard for typing user input.

Our input components are wrapped with a TouchableWithoutFeedback.

It has an onPress callback to dismiss the keyboard when users press outside the text input. This callback uses the Keyboard view that handles keyboard-related events.

We also used native-base components to construct the input fields.

Each input is defined by an Item component that has an Icon and Input child components.

We attached several props to the Input field. Most of them are self-explanatory.

The onSubmitEditing will focus the user input to the next Item component. We do so by adding a reference field to the target Item component and calling it using the onSubmitEditing.

Now time for some testing. Refresh your simulator to check the new layout. Go to the sign-in screen. You should see the below.

The layout of the sign-in screen.

Looks good.

Now activate the device keyboard to test the functionality of the previously defined components.

In your simulator, go to Hardware/Keyboard/Toggle Software Keyboard.

Now if you focus on any of the Input (username, password), you should observe the shift of the components as the keyboard appears.

I let you use your imagination to change the colors, the font family, and the size of these components.

4.3 — Sign up screen layout

For the sing up page, we need to get a bunch of information about the users before signing them up.

We will ask the users to provide a username, a valid email address and a phone number for code confirmation, and a secure password.

The previous code for SignUpScreen.js, defined in part 1, was a basic render Text component. It looked like this.

import React from 'react'

import {

StyleSheet,

View,

Text,

} from 'react-native' export default class SignUpScreen extends React.Component {

render() {

return (

<View style={styles.container}>

<Text>Sign Up</Text>

</View>

)

}

} const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#aa73b7',

alignItems: 'center',

justifyContent: 'center',

},

})

First of all, replace the styles with the following gist.

These are the styles necessary for the components that we will build in the following.

Similar to SignInScreen.js, add the necessary imports in SignUpScreen.js.

import React from 'react' import {

TouchableOpacity,

TouchableWithoutFeedback,

StyleSheet,

Text,

SafeAreaView,

StatusBar,

KeyboardAvoidingView,

Keyboard,

View,

Alert,

Modal,

FlatList,

Animated,

} from 'react-native' import {

Container,

Item,

Input,

Icon

} from 'native-base'

We need to define the state fields that will be passed by the users when signing up for the app. Add the following code inside the class component SignUpScreen.

export default class SignUpScreen extends React.Component {

state = {

username: '',

password: '',

email: '',

phoneNumber: '',

authCode: '',

} onChangeText(key, value) {

this.setState({[key]: value})

} render() {

return (

<View style={styles.container}>

<Text>Sign Up</Text>

</View>

)

}

}

Now time to change the render() method. Replace the code inside the render() method with the following gist.

Code inside the render method of the SignUpScreen.

All the components in the above are the same as in the SignInScreen. With more Item components to hold the necessary fields for email, phone number ..etc.

Time to refresh the simulator. Navigate to the signup screen. You should see the following layout.

Sign up screen.

Not bad 😉.

4.4 — Forget password screen layout.

Inside ForgotPasswordScreen.js, add the following imports.

import {

TouchableOpacity,

TouchableWithoutFeedback,

StyleSheet,

Text,

SafeAreaView,

StatusBar,

KeyboardAvoidingView,

Keyboard,

View,

Alert,

Animated

} from 'react-native' import {

Container,

Item,

Input,

Icon

} from 'native-base'

The styling of the ForgetPasswordScreen component is exactly the same as the SignInScreen component. As such, all you need to do is to copy and paste the same styles (defined in the stylesSignIn.js gist of section 4.2 ) from SignInScreen.js into ForgetPasswordScreen.js.

To allow users to request a new password, we need to set the following state fields and add the onChangeText method.

export default class ForgetPasswordScreen extends React.Component {

state = {

username: '',

authCode: '',

newPassword: '',

} onChangeText(key, value) {

this.setState({[key]: value})

} render() {

return (

<View style={styles.container}>

<Text>Forget password?</Text>

</View>

)

}

}

The render() method only renders a simple Text component. As such, replace what is inside the render() method with the following.

The render method of the ForgetPasswordScreen.

Refresh your simulator and navigate to the forget password screen.

Forget the password screen.

4.5 — Sign out screen and reset password layout

Sign in to the app and go to the Settings screen. In this screen, we displayed a simple sign out button. We will change this layout to include a reset password functionality.

Add the following imports to SettingsScreen.js.

import React from 'react' import {

AsyncStorage,

TouchableOpacity,

TouchableWithoutFeedback,

StyleSheet,

Text,

SafeAreaView,

StatusBar,

KeyboardAvoidingView,

Keyboard,

View,

Alert

} from 'react-native' import {

Container,

Item,

Input,

Icon,

} from 'native-base'

Inside the class component SettingsScreen, add the state fields to store the old and new passwords, as well as the onChangeText method to get users inputs.

export default class SettingsScreen extends React.Component {

state = {

password1: '',

password2: '',

} onChangeText(key, value) {

this.setState({[key]: value})} async singOut() {

await AsyncStorage.clear()

this.props.navigation.navigate('Authloading')

} render() {

return (

<View style={styles.container}>

<TouchableOpacity

onPress={() => this.singOut()}

style={styles.buttonStyle}>

<Text style={styles.textStyle}>Sign out</Text>

</TouchableOpacity>

</View>

)

}

}

Replace the styles of SettingsScreen.js with the same styles defined in the stylesSignIn.js gist of section 4.2.

Modify the render() method with the following code.

The render method of the SettingsScreen

We added a change password header, Input fields to change the password, and styled the sign out button.

Now time to refresh the simulator and check the new layout.

Sign in to the app and navigate to Settings. You should see the following layout.

Settings screen with a password reset and sign out button.

As all the navigation flow from part 1 is still fully functional, you can press the sign out button to be redirected to the WelcomeScreen.

Conclusion

In this part 2 of the series on user authentication with React Native and AWS Amplify, we managed to design the layout and the necessary components to make the authentication flow possible.

In the next article, part 3, we will add the app logo with fade in and fade out animation effects. We will add styling to the tab navigator to make it look more beautiful and will start adding the necessary dependencies for our back end with AWS Amplify.

If you enjoyed this tutorial, you can give me as much claps 👏 as 50. Hit the follow button to stay updated with the upcoming articles. You can also follow my up to date projects on Twitter and Github.

Thank you for reading and stay tuned for the next parts ✋.

Join our community Slack and read our weekly Faun topics ⬇