If you are building a React Native app and want to add user authentication, you can use AWS Amplify to easily integrate with Amazon Cognito, a robust user directory service that handles user registration, authentication, account recovery and other operations. I will show you how to use AWS Amplify Authentication to secure your React Native app with username/password login.
AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full stack applications, powered by AWS. It provides an easy way to add authentication flows into your app using the Authenticator component, which encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources.
Step 1: You need to install AWS Amplify Cli and packages
npm install -g @aws-amplify/cli
npm install aws-amplify aws-amplify-react-native
Step 2: Initialize AWS Amplify in your React Native project
amplify init
Step 3: You need to configure AWS Amplify with your Auth cloud resources. You can use the Amplify CLI to create new resources or import existing ones. For this example, I will use the default configuration with username as the sign-in option:
amplify add auth
? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.
Step 4: Test it and deploy the resources, run:
amplify push
This will generate an aws-exports.js file in your project root folder, which contains the configuration for your Auth cloud resources. You can import this file and use it to initialize AWS Amplify:
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
//...
Amplify.configure(awsconfig);
Now, you are ready to use the Authenticator component in your app. The simplest way to do this is to use the withAuthenticator Higher Order Component (HOC), which automatically detects the authentication state and updates the UI accordingly. If the user is signed in, the underlying component (typically your app's main component) is displayed; otherwise, sign-in/sign-up controls are displayed. To use it just import from aws-amplify-react-native and wrap your App component with it:
import { withAuthenticator } from 'aws-amplify-react-native';
// ...
export default withAuthenticator(App);
Extra: There’s also another away, using a custom login screen:
- Create a new file in your React Native project called LoginScreen.js.
- Import the withAuthenticator Higher Order Component from the AWS Amplify UI library.
- Create a component that extends the withAuthenticator Higher Order Component.
- In the render method of your component, render the login UI.
- Export your component.
import React, { Component } from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react-native';
class LoginScreen extends Component {
render() {
return (
<withAuthenticator>
<View style={styles.container}>
<Text style={styles.title}>Login</Text>
<TextInput
style={styles.input}
placeholder="Username"
value={this.state.username}
onChange={this.handleChangeUsername}
/>
<TextInput
style={styles.input}
placeholder="Password"
value={this.state.password}
onChange={this.handleChangePassword}
/>
<Button
style={styles.button}
title="Login"
onPress={this.handleLogin}
/>
</View>
</withAuthenticator>
);
}
handleChangeUsername = (event) => {
this.setState({ username: event.target.value });
};
handleChangePassword = (event) => {
this.setState({ password: event.target.value });
};
handleLogin = () => {
const { username, password } = this.state;
this.props.auth.signIn({
username,
password,
}).then(() => {
// User signed in successfully
}).catch((error) => {
// Handle error
});
};
}
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
// ... your stiles
};
export default LoginScreen;
That's it! Now, your app has complete flows for user sign-in and registration.
Top comments (0)