Name: React Native Authentication with AWS Amplify
Uploaded: 2018-11-19T14:20:57-06:00
Description: In this lesson we learn how to add a real authentication service to a React Native application using AWS Amplify

In this lesson we learn how to add a real authentication service to a React Native application using AWS Amplify

https://app.egghead.io/api/v1/lessons/react-react-native-authentication-with-aws-amplify/subtitles

React Native Authentication with AWS Amplify

Instructor: [00:01] To get started, we'll first initialize a new React Native project. Next, we'll change into the directory and install a couple of dependencies. The two dependencies we'll need are AWS Amplify and AWS Amplify React Native.

[00:31] Once the dependencies are installed, we'll need to go ahead and link a couple of native dependencies. If you're using Expo or Create React Native app, you won't need to link either of these dependencies as they're already part of the Expo SDK.

[00:44] The two dependencies we'll need to link are amazon-cognito-identity-js and React Native vector icons.

[01:16] To initialize a new Amplify project, we'll run Amplify and Net. Give a name for your project, a name for your environment. Choose the type of text editor you're using and then you can choose the defaults for the rest of the options. For the AWS profile, either choose an AWS profile already configured on your machine or create a new AWS profile.

[01:51] To create the authentication service, we can run amplify-add-auth. Here we're prompted to either use the default configuration or set up our own custom configuration.

[02:03] For the purposes of this demo, we'll go ahead and choose the default configuration. Now that the configuration has been created locally, we can run amplify-push to create the resources in our account.

[02:26] Now that this service has been created, we need to update our React Native application to interact with the service. In our text editor, let's go ahead and open up index.js and app.js.

[02:37] In index.js, we'll go ahead and import Amplify from AWS Amplify, the configuration, and AWS exports that were created for us by the CLI. Then we'll call Amplify.configure passing in the config.

[02:57] In app.js, we'll go ahead and import the withAutheticator Higher Order Component from AWS Amplify React Native. We'll update the default export to be the withAuthenticator Higher Order Component passing in the app component.

[03:32] To test this out, we can run react-native-run-ios or react-native-run-android. Now we have an authentication flow protecting our app component.

[04:08] After signing up, check your email for the EMFA confirmation code. After logging in, we see that the default React Native application loads on our screen. When we refresh, we stay logged in because the user session is persisted to AsyncStorage.

[04:42] For complete control of your authentication flow, you can also use the Auth class from AWS Amplify. The Auth class has over 30 different methods available, including things like sign up, sign in, confirm sign up, forgot password, and many other useful methods.

[05:02] To view the new service in your account, you can visit console.aws.amazon.com and search for Cognito. In the Cognito dashboard, click on Manage User Pools.

[05:15] Here you should be able to click on the user pool and see all of the information about the authentication service you've just created.

[05:29] To view a list of all the services configured with your Amplify project, you can run Amplify Status at any time.

React Native Authentication with AWS Amplify

Share this video with your friends