Custom Layout for React Native Signin and Signup with AWS Cognito
How to use a custom layouts with React Native and AWS Cognito
In a previous article we saw how to implement the default user Signin/Signup using React Native and AWS Cognito. But what if we have our own layout screens and we need to connect it with AWS Cognito in React Native.
We will use the same repository as the previous post, but will implement our solution in a different branch.
Coding our solution
First of all, let’s create our layout files and put some content on them.
In a terminal on the root of your project type the following commands.
mkdir components
mkdir Confirmation ResetPassword Signin Signup Profile
touch Confirmation/Confirmation.js ResetPassword/ResetPassword.js Signin/Signin.js Profile/Profile.jsWe also need to add React Navigation to our project to enable navigation between screens.
npm install --save react-navigationSignin
First let’s implement the Signin feature adding the following to Signin.js:
Let’s break it down. At the top of our file we have all the necessary imports to make this component work, including awsConfig and styles.
In this section we have class definition and sigInUser function that will allow to Sign in a user using AWS Cognito Backend. This functions only receives an email and password as arguments. As you can see we are redirecting the user to his Profile page in case the sign in is successful and showing the error message when it fails.
The most important part of this section is the Auth.signin(email, password) function
Finally we implement our basic layout. Right now this layout look horrible but we are going to add some styles soon enough. We are using KeyboardAvoidingView with a nested ScrollView to allow that the Sign in Form doesn’t get behind the phone keyboard and also to hide it if the user taps outside any text input.
We also have created some placeholders to navigate to Signup and ForgotPassword screens.
Create a new file for styling this screen. From the root of your project type the following command:
touch components/Signin/SigninStyles.jsand paste the following content:
Now let’s make some adjustments to App.js so it can render the Login screen as the default and allow navigation between screens. We will comment each route of the Navigation to the rest of the screens until we implement each one.
If you run your project in the emulator with yarn run ios, your Sign in screen should look something like this:
Sign up
Next, the Sign up feature. Add the following to your Signup.js:
As you can see, the main difference in this fragment of code is the signupUser function:
Here, I’m using a small tweak to inform the user about password restrictions before he submits an invalid password in the Signup process:
Now let’s style our Signup Screen by adding the following in SignupStyles.js:
and you should get a Screen very similar to this one:
Uncomment the Signup route and import the Signup.js in App.js to allow navigation to this screen. This process will be the same every time we implement a new Screen.
Confirmation
The next feature that we need to implement is the Confirmation screen to enter the confirmation code provided by Amazon to our email to validate our sign up user.
In theConfirmation.js file add the following:
As before the only significant difference is the confirmUser function:
Adding these styles to ConfirmationStyles.js:
should give us a Screen like this one:
And again, we need to modify App.js to include Confirmation.js file and uncomment the Confirmation route to allow navigation:
Forgot Password
The last Amazon Cognito related feature that we need to implement is Forgot Password adding the folloowing to ForgotPassword.js:
The state of this component has more values because we are going to use conditional rendering to avoid navigating to another screen to confirm the reset password code:
The main functionality fo this component is to reset the password when the user forgets and this is the function that allow it:
First will check if the resetPassword state is set to true so we could submit username, resetCode, and newPassword attributes to AWS endpoint so the password get change; else we will set the resetPassword state true: this should only happen after the user has provided the username and submitted to AWS so he could get a resetCode in his email Inbox. We also change the recoverButtonText to RESET to simulate a new Screen and clear the errorMessage state in case of previous error.
As I said before we are going to use a single Screen to render the resetCode and newPassword inputs conditionally. For that we are going to need and auxiliary function renderIf:
The sole purpose of this function is to render content if the condition is true.
Now we are going to encapsulate the rendering of the Reset Password Fields feature into the function resetPasswordFields:
this way when the resetPassword state is set to true we are going to call the function that will render the two extra inputs needed to Reset the User Password.
And finally the render function:
As you can see on line 29 we are managing the conditional rendering of the Reset Password Fields based on the state of the resetPassword state.
On line 38 we are calling resetPassword function that, as we see before, will change the resetPassword state and request a resetCode the first time is pressed when the user enters the username/email and press the Recover button. Then the button will change it’s text to Recover simulating a new button and when the user press it the the password will be reset.
The styles associated with this component:
At this point you should have a Screen like this:
And again, we need to modify App.js to include Confirmation.js file and uncomment the Confirmation route to allow navigation:
Lastly you need to create a Profile Screen to navigate to, if the user Signin correctly, but I leave that to you as a small challenge.
Once more the final code repository:
Conclusion
In this article we customize the layout of our previous React Native Signin and Signup with AWS Cognito tutorial, so you could used the same base code to implement a particular Signin/Signup design according to your needs. I hope this article was useful.
If you have any question let me know or leave a comment.
Author: Eng. Alberto Aragón Alvarez
- https://www.linkedin.com/in/albertoaragonalvarez/
- alberto@alturasoluciones.com
- https://twitter.com/aragonalvarez85
If you like it, clap as many times as you want. For more histories like this one follow our publication on Medium or subscribe to our mailing list.
