React Native Login Authentication PART 2 (step-by-step tutorial)

[Music] what's up node.js developers in today's video we're gonna continue our authentication workflow series and in this tutorial we're gonna learn how to create sign up screen for get password and other important screens from the sign up and authentication workflows if you didn't follow the first video in this series check it out somewhere here or here i will link it and let's see what exactly we're gonna build today so here is the signing screen that we have managed to build in the previous video and there we implemented all these custom buttons all these custom inputs and we put everything together in this sign-in screen in today's video we're gonna take this build a step further and we're gonna create an account screen where you'll be able to have multiple inputs for your data then press register or navigate back to the sign-in screen also in today's video we're gonna implement the forgot password flow which starts with setting your username and then after you press send you will be redirected to the reset your password in this screen you will insert your code that you will receive on your email or on your phone for example and after that you will enter enter your newly created password so we're gonna implement all of these screens that you saw in today's video we're also gonna link them together with navigation we're gonna speak about navigation we're gonna put all these screens together and implement this navigation from one screen to another in today's video we're gonna cover only the ui part in react native and later on in the future videos we're gonna implement the backend using amplify and also social signings with google and apple so if you enjoyed this series consider subscribing to the channel because this will help me a lot and also turn on the notification bell because not to miss any future videos but without further ado let's jump into the tutorial the signup screen design wise looks very similar to the sign-in screen because yeah we are trying to keep consistent and it's gonna be much easier to create because we already have all the custom inputs all the custom buttons and now whenever we need to create a new screen is just like lego putting the pieces together that we need here on the screen so yeah the let's start with creating the title inputs email password buttons and so on so let's go back in our project and to simplify things i'm gonna duplicate the sign-in screen let's rename it to sign up screen sign up and the same things for the file name let's rename it to sign up screen uh in the index here make sure to import it from sign up and let's open our sign up screen here and also rename the component sign up scroll down and whenever you export explore the sign up screen our sign up screen will not have a logo but it will have a text with a title so the title there is gonna be create an account the style for the title styles dot title let's define the title styles here you're not gonna see the updates because we are didn't change yet the component in our app.js so we're gonna do that in a second so for the title let's just do font size 24 font weight bold color 0 5 1 c 60 and also let's add some margin to make sure that it has some spacing there all right so now uh let's go ahead and open our app.js and here besides the sign-in screen let's import a different one the sign up screen sign up sign up and let's replace the sign in with a sign up at the moment later on we're going to implement navigation it's going to be much easier but now just replace the signup screen and we should see that create an account here on the top which is the title and not the logo compared to the sign-in screen alright so now we can close the sign-in screen of the gs and what else the custom button probably let's focus only on the sign up screen so the inputs that we will have here is starting from the top of the username email and password inputs so let's do that starting from the state we have username when we after username we're gonna have email email password and after the password we're gonna have password repeat password repeat set password repeat use state empty string perfect so uh regarding the height we don't need it because that was used for vm logo so i can remove it from here image as well and the logo as well we don't need it here okay let's go here are our custom inputs first one is username perfect the second one is going to be email value email set value set email then we have password let's copy the password and add the repeat password same for the value password repeat and set password repeat here for resetter which is as well a secure text entry so now we have our username we have our email we have our password and repeat password perfect the next one the button is called register custom button register and let's do on register pressed just to make sure that the name of a function is on register pressed okay on register press then instead of a custom button there we have the text for the terms of use and privacy policy so let's yeah we're not going to have a forgot password button however we're gonna have a text that will say by registering you confirm that you accept our terms of use and privacy policy let's try to remember it by registering confirm that you accept our terms of use and privacy policy save okay so yeah let's define some style here for our text but the good thing about text is that we can nest different text elements inside a text element so what that will help us to achieve is to give different styles for some parts of a sentence for example here terms of terms of use and privacy policy should have different styles so by putting them inside their own text text terms of use text we can assign different styles here so styles equal style i mean equal styles dot link it has a link style and the same for our privacy policy we encapsulate it into a text and we give a link style save so let's define the styles for the text and the link in our here for the local we don't need the logo here in the sign up text and link so the text will have a color gray and a margin vertical 10. yep now it's better and the link will have a color fdb075 perfect so yeah i see that and and privacy do not have a space between them for example here and that is because our code is getting trimmed so there is no space even if we add it here there is not going to be any space so we can add the space as a javascript character here like this okay so one more thing that we can do with these terms of use link we can assign our own press event to our text and on of use pressed and the same thing for the privacy policy on press and we can define them here and with these two functions if i press on the terms of service link i see the console worn being displayed so here you can either redirect on a internal page of your application for the terms of service or policy where you can open a new window in a browser if you have them on your website and to do that check out linking and how to open a browser window on a specific url okay but now what should we do the social sign-in buttons are the same and because they are the same and they take so much code like space as well as functions i am thinking to extract them to a separate component because there is going to be a lot of logic here for example checking if you are on ios and displaying the sign in with apple and so on so instead of doing it in multiple places i would rather have a social sign sign in buttons and here let's define the social sign-in buttons just let's do react native functional export and let's copy our social sign in buttons this free the sign in with facebook with google and with apple i'm going to copy them from here and paste them inside out instead of our text inside our view here all right so also we don't need the view because we don't need to style anything there for the container so for that reason i'm gonna remove it and leave it as a empty fragment let's also make sure to import the custom buttons import custom button and let's also bring the buttons the functions on sign in with apple with google and with apple here save and i think it has everything that it needs so let's try to import it in our sign up screen social sign in buttons but because uh we forgot to add the index file there we see here the folder and the file name so to simplify it we usually add the index.js and export and in signup screen now we don't need the file name because it's going to take it from index and index will point to the right file so let's render them here after the terms of use social sign in buttons perfect and the same thing we can do in sign in screen to delete these three buttons and replace them with the social sign in buttons also make sure to remove the free functions for the social sign in and make sure to import social sign-in buttons from our components all right so back to our up screen where we are working uh the last step is to replace the bottom text here have an account sign in so have an account sign in and the name of a function is gonna be on sign in pressed let's replace it on sign up with on sign in for good password we don't have it we can remove it so yeah that's it on this page we have all the inputs that we need we have our register sign in with facebook apple google and we have an account all right so with that being said we are done with our sign up screen here we have a title username email and everything else let's move on to the next screen that we will need to design so we will need email confirmation screen and after you complete your creating account here we are going to implement later on the logic of receiving unique code on your email and with that code you can approve and confirm that that email belongs to you so for that we will need a separate screen that will contain a title a username input which is optional it depends we can take the username logically because we know which user is doing this action and the confirmation code input also the buttons so for the style here i took them from amplify but we are gonna use the same styles that we have in our application to keep everything consistent here we have a reference of what do we need to have on that page so okay let's uh what let's duplicate our sign up screen this time sign up duplicate it's going to be renamed to confirm email screen confirm email screen in the index let's make sure to take it from confirm email screen let's copy this name and let's rename the file not this one the sign like this enter come on and the name of our function as well export default confirm email screen now let's change the title from create an account to confirm your email and let's go in our app.js and import our newly created screen let's replace it here in the rendering part and now we should see the same thing with a different title so the title if you see the title confirm your email then everything that you have done is correct if not go back and make sure that you have all the names properly renamed from sign up to confirm email and if you are on the same page as we have right now we can go ahead and start changing this screen so the only state variable that we will need here is going to be the code the code that you receive on your email so let's do code here let's remove all the custom inputs except the code set code save okay the button is confirm or for the placeholder enter your con information code probably is going to be better yes for the button text confirm on confirm pressed let's go ahead and rename from onregisterpress to onconfirmpress we're not going to have privacy policy here let's remove it we are also not going to have a social sign in providers but what are we going to have here the confirm bet to sign in and resend code okay so let's rename this to back to sign in on sign in pressed and also let's have another button here that will help the user request a new email so resend code on resend pressed let's do it here we don't need the other one yeah now we have on recent press back to sign in and the confirmation now it's a good time to also add the third style for our buttons which is going to be secondary because on this screen we have both primary secondary and tertiary so let's go ahead in our custom button and add some styles for this and let's do custom button index not index custom button here so for vac container underscore secondary we will not have any background color but we're gonna have a border border color of this one so it's gonna be inverted border with this and border wave let's try to and let's add a comma yeah now it looks better and for that text underscore second three we're gonna have color blur the blue yeah right now we have all three types of buttons primary secondary and tertiary perfect so we have our confirm your email screen all right what's next let's have a look yeah we have everything here the last screen is reset your password yeah this is the screen that you will reach whenever you will press the forget forgot password button here on the sign-in screen so whenever you uh forget password you go there you input your email or username and you will receive new code on your email so let's do this screen as well i'm gonna close everything we can start by duplicating our confirm email screen so let's rename to forgot password screen rename forgot password screen let's copy it enter in the index if it asks us to update the imports press yes if not go to the index and update it manually here to forgot password screen all right let's open forgot password screen and rename the name of a component and the export and also the title to be able to see the change so the title is reset your password reset your password so again how we did uh previous time let's go to our app.js let's import that screen import for god password screen and let's replace it in our application here so that should open our reset your password screen perfect so what do we need on this screen we need title we need username and buttons so instead of code we will have user name set user name so for our custom input let's say username user name and set username custom button what is going to be send okay the custom button is going to be send on send pressed let's replace it here we don't have a recent we only have back to sign in button yeah like this it's good enough so with that our screen is finished so you see when we have everything ready like all our custom inputs custom buttons and so on it's much easier to then create new screens and so on so it's very important to make sure you structure everything correctly so after you press send in this screen you're gonna receive an email with a code and the application will automatically redirect you to the next screen which is the reset your password here you're going to input the confirmation code from your email and a new password that you want to create so by doing that it's gonna confirm the email code is the same as the email owner and it's gonna update the new password so let's do that right now yeah what we're gonna do again as we did we take for god password screen and we rename it to reset password or new password screen let's copy this name because we're gonna need it let's rename the file save let's update automatically if not go make sure that in index you have new password screen here let's open your password screen rename the name of a component the export of the component and here the title is gonna be reset your password the same as there okay no worries so let's go in our application import our reset or new password screen new password screen let's replace it here and let's go back to our new password screen and what we will have we will have the code that you receive on email set code we are going to have a new password set new password so here instead username code code set code then we need another input for new or let's do enter your new password new password and set new password perfect send the button is going to be submit and on submit pressed let's copy the name and replace it here on resend we don't have a resent button here we don't need that function and better sign in is it still valid here yes back to sign in is still valid here okay perfect now we have the last screen created right so what's the next step the next step is to put everything put all this screen together using react navigation and make sure that we are able to navigate from one screen to another without having to replace the screen here in our application.js so let's start by installing our rack navigation version version 6 installing setup so let's open the installation guide here all right so let's go to the getting started what do we need uh installation with npm let's start by installing rack navigation native and i'm going to go in our application let's open and do npm install react navigation native while this is in progress let's go ahead and install the dependencies that we need so the first one is for the expo project and here is for a react native project let's copy these dependencies these are react native screens and react native safe area context so after finishing installing this dependency we can go ahead and install them other dependencies that we need for the screens safe area context and let's have a look the next step so from yeah from react native 060 linking is automatic we don't need to do that if you are developing on a mock system for ios make sure to also run npx pod install ios i usually work on mac os and i need to do that but now i am on windows and i don't need to do this step so if you are mac os make sure to run this command perfect so yeah we need to do some changes some setup in our native application for react native screens to work properly so we need to paste in this code inside our main activity so let's open our project let's open our files and in our root folder there is the android folder here let's open it up source main java and here you will see java.com authentication the name of your project and let's open main activity so in this main activity we will paste the our function here for the oncreate inside our main activity and also we should make sure to import android os dot bundle on top here like this all right this is done the next step is going to be to wrap our whole application in a navigation container and start defining our navigators so for this project we're going to use a stack navigator so where is it let's do stack native stack navigator this is the most basic navigator that we have that will allow us to navigate from one screen to another using a stack method so whenever we navigate on our screen the new screen is going to be placed on top of a previous screen and so on and whenever you do go back you just pop the last screen that you have and you are left with a previous screen that you have visited so that's why it's called the stack navigator because it stacks all the screen on top of each other so for that let's install rack navigation native stack as well and this is the last thing that we need to install for our navigation now here we will see an example of a stack navigator all right so everything is good perfect close here in the source i'm going to create a new folder called navigation let's create the index.js for our navigation and let's define react native functional export so this component is going to call navigation na vigation let's go in our app.js and let's import our navigation perfect so now let's replace our component with the navigation and we should see here an empty screen because we don't have anything here in our navigation okay we see navigation that means that we are rendering perfectly this component so what do we need to do if i go back there we know that we have to wrap our whole application inside the navigation container this should be the root for all our navigators so let's go ahead and instead of view we're gonna import navigation container and we're gonna rub this in a navigation container perfect so nothing has changed but this gave us the ability to add rack navigation native could not be found yeah that's because we forgot to reinstall the application on our device and that's necessary because we have installed a new npm run a new package a new native package that requires a reinstallation ramp run android all right so let's also stop our development server and start it again and let's try to reload right now all right so yeah we see that everything is back to normal we see our navigation text and we don't have any errors regarding navigation container so as i was saying the navigation container gives us the possibility to add navigators here inside it so one of the navigators that we will add is the stack navigator that we installed so native stack navigator so here is an example of how you create it you import create stack navigator from our native stack then we create the stack using this function and by wrapping all our stack dot screens inside a stack dot navigator we have our navigator created so let's start by importing this let's create the stack like this and let's start by adding the stack dot navigator and inside this tech dot navigator we can add stack dot screens so the screen needs a name so let's start with probably sign in screen and it needs a component the component is gonna be a sign-in screen that i'm gonna add in a moment so let's go in our app.js and take all the imports from here because we're gonna need all these screens let's take them from here and bring them in our project here also i think the relative path should be changed so we go one up then we go in our screens yeah like this let's make sure to change them to everything and the first component is going to be sign in screen if i do that i should see the sign-in screen on our device here sign in so everything is as it was before however we also have a header so in a lot of cases this header is very useful but in our case we most probably will not need the header in most of our screens so we can go ahead and say screen options header shown false this will make sure to hide the header for all the screens that we have inside this navigator okay so let's go ahead and add all the screens that we have there so i'm gonna do sign up screen sign up screen all right so we have all the screens here we define them as text screen the screen that is going to be displayed by default is the first screen that we get here in our navigator all right so let's start implementing the actual navigation between screens to screens so yeah in our sign but before that i really want to add one more screen to show the whole process and that screen is gonna be the home screen and we're gonna simulate a simple home screen index.js react native function component and here home suite home okay so let's also import the home screen here in our navigation and have it as probably the last screen here for that let's uh think about what the navigation paths are gonna be in our uh screen and then it's going to be easier for us to implement so one navigation path is going to be whenever we sign in we're going to navigate to our home page whenever we press on a sign up we're going to navigate here to creating a new account whenever we press on sign in we're gonna go back to our sign in screen when we press on the sign up button we're gonna go to the confirm sign up screen and what else do we have here back to sign in on the confirm page is going to go back to sign in here what else if we press on the forgot password on our login page we are gonna go to this reset password screen back to sign in and whenever we press on the send we're gonna be automatically redirected to resetting our password here and again back to sign in goes there so these are some of the navigation paths that we have to implement in our application so without further ado let's get started so i'm going to start with sign in screen let's open it here and in order to navigate we need access to that navigation so to do that we can import a hook use na vi gation from react navigation native so by doing that we can get access to navigation object and now whenever i press on the sign in we should of course first of all validate user by sending it to the backend and so on but after doing that we are gonna do navigation dot dot navigate and we're gonna navigate home so if i press right now on the sign-in we should be navigated to our home screen perfect so let's go back here navigation navigate home okay on sign-in press on forgot password what should happen here navigation simple navigation navigate on the screen with name forgot password if i press forgot password i go to this screen perfect i don't need the console one anymore never do i need it here on signup press exactly the same but we want to go to sign up save where is it don't have an account create one should go to create one account so everything is done here let's move to our sign up screen so in the sign up screen again we're gonna need access to navigation and on register press this again is gonna no on register press as seen here we should redirect to confirm email so navigation.navigate to confirm email on sign in press should go to sign in page on terms of service you can navigate to a terms of service page if you have one i don't have one here so i'm gonna leave it as it is right now so from create an account i can press on the have an account sign in i go back to this screen where i can press on the register which will do all the logic and after that will redirect us to the confirm your email screen so from the confirm your email screen where do we need to be able to go so const navigation on confirm press here we probably are gonna go navigation navigate home on sign in press we're gonna go to sign in and one resent press it's not gonna navigate anywhere it's just gonna do the resend of code so if i go to create an account register from here i can either confirm and go to the to home or back to sign in and go here perfect what else do we need there the forgot password screen and whenever we press on send press we will automatically be redirected to the new password screen on send press and speaking about this button on sign in press on sign in and on resent press we don't need it at all so let's remove it so from here if i press send i go to the reset your password code and enter your new password i can also go back to sign in yeah it's everything now is navigateable so the last step is the new password screen let's get the navigation come on on submit press we need to go to home and one sign in press we will do sign in so if i do forgot password send from here i can either submit and go to home home suite home or back to sign in and we are here so with that being said we have everything navigatable uh everything working we have put all the screens together so yeah now all our ui for authentication is ready in the next video we're gonna cover how we can take this user interface that we have created today and implement it together with aws amplify to have a fully functional authentication flow both on front end and on back end so don't forget to subscribe to the channel not to miss the future video which is going to come in a couple of weeks and after that we are also going to cover some signing with social accounts like google facebook apple and so on if you enjoy this video don't forget to subscribe to the channel leave a like and let me know down below whatever topics from mobile development would you like me to cover on this channel so yeah take care guys stay hydrated and write clean code bye bye

Channel: notJust․dev

Views: 5,827

Keywords: vadim savin, notjustdev, not just development, react native, react, react native tutorial, auth flow react, authentication ui, login auth react, login auth flow react native, sign in react native, sign up react native, authentication, react native ui, react native crash course, react native ui design, react native live coding, javascript

Id: _Fi86az2OV4

Length: 39min 43sec (2383 seconds)

Published: Tue Oct 19 2021