In this video you will learn how to clone an AWS Amplify back end into a React Native project and test it out using Authentication and the AWS Amplify React Native UI Component library.
We will start by walking through the steps to clone the back end into the React Native app using the Amplify CLI. Then we will go into the React Native project and add code to enable an authentication flow. From there, we will test it out by signing up and signing in as a new user.
Nader Dabit: [0:01] We'll start in the Amplify Console in an existing Amplify project. We'll then click on Backend environments and then choose the backend environment that we'd like to clone. From here, we'll scroll down into the Edit backend section and copy the CLI command through our clipboard. Back at the terminal, we'll paste in the command and then press Enter.
[0:26] Next, we'll choose the AWS profile and the text editor that we'd like to use. I'm working in a React Native project and we'll be accepting the defaults for the rest of the options. If you plan on making changes to this backend environment, choose yes. Once the environment is cloned, you should now see an Amplify folder as well as an aws-exports.js file.
[1:00] Next, we'll test it out by opening the project in our text editor. I'll first configure Amplify in index.js by calling Amplify.configure, passing in the configuration from aws-exports.js. In App.js, I'll import the withAuthenticator higher order component from aws-amplify-react-native and change the default export to be the withAuthenticator wrapping the App component.
[1:38] I'm in a React Native environment, so I'll open the project in Xcode to test out an iOS build in the iOS simulator. When the application loads, I should be able to sign up for a new account and then sign in.