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

what's up nudges developers in today's video we're gonna learn how to create authentication screen in react native today in this video we're gonna cover how to create the ui the user interface of first of all the sign-in screen with the username password web buttons all the social sign-in buttons like facebook google and apple and also the sign up screen which is very important in order to create your account by the way these designs was provided by sandeep kasundra on dribble so check his workout to see more about that as well besides these screens we're also going to cover a very important screen authentication flow such as confirming your email by providing a confirmation code here also for getting password and requesting code on your email than resetting your password creating a new password in this form so we're gonna cover all these screens that are necessary in authentication flow in react native if you're new on this channel hi my name is vadim and welcome here on this channel we are learning about react native mobile development and javascript technologies if you enjoy what you are seeing subscribe to my channel not to miss any future videos because we have a lot of tutorials planned for the near future but without further ado let's jump into our project of today if you want to follow along this tutorial download the asset bundle from assets dot not dot slash authentication and there you'll find this pdf presentation images icons and other materials that you will need throughout this tutorial and with that being said let's get started [Music] all right so the first step is to initialize our new project to open it in our uh editor of choice and to start the project to see it on our emulator so let's get started with this step first of all i'm gonna open windows terminal or you can open any terminal of your choice on your machine if you are on linux mac os or any other system yeah here i'm going to open the folder of my projects and to initialize the react native project we're going to write npx react native init and the name of a project is going to be authentication after the project has been successfully created we can close this terminal and open our project in our editor of choice in my case this is visual studio so let's select the folder before getting into details of all the files and so on let's open a terminal in visual studio code and from here let's run our development server by doing npm start this has started that development server now we want to run our application on emulator so let's open a new terminal by pressing on this plus sign and from the new terminal i'm gonna write npm run android and this will run our application on our android emulator you can also run it on ios device if you have a mac os system and an ios simulator so yeah it will work on both android and ios so here we have our first rack native application on our device it runs as we expect if you see this screen then so far everything is okay so let's open our app.js file because this is our entry the file that is the entry point in our application so right now here we have a lot of things going on so what i will do is to try to clean these things out to have a clean starting point in order not to be confusing for anyone so section i'm gonna delete this component uh from here from application i'm gonna delete everything from the safe area view and i'm gonna leave only this save area view here i can write a simple text like hello world and yeah let's delete also the background style dark mode and stuff like that not to get confused and for the safe area view i'm gonna add styles dot root for our route and inside styles we can also delete everything and add a simple route with a flex one what else we can remove we can remove the unnecessary imports from here like this one this one and the type node because we are not using typescript and we can remove it from there and remove this part from here so our application is going to be a simple functional component apparently we don't need even colors so yeah now we have a very clean up.js from where we can start working so what i want to do next is to set up our folder structure that we're going to use throughout this video so i'm going to create a folder called src that will keep all our source code in the src we are going to have a folder called screens that will contain all the screens that we have and also a folder called not inside screens but inside src we're going to have components these are two uh very common folders for the screens and the reusable components that we're gonna have inside the screens let's start by creating a new screen called i don't sign in screen let's create the sign in screen file here dot js let's generate a simple component sign in screen that is gonna display sign in screen at the moment also let's create a helper file here called index.js that is going to be help us easier import our sign in screen without duplicating the folder name and the file name so in our index we simply say export default from this directory sign-in screen and by doing that we can go back in our app.js and we can simply import it like import sign in screen from source screens sign-in screen and now instead of a hello world text we can render our sign in screen and the text should change here on our device to sign in screen perfect all right so this step is done we initialize the rack native projects we have cleaned it prepared it for the next steps and we have run it on our device the next step is to start designing the user interface of our sign-in screen but first of all let's have a look at what it contains so first of all from the top to bottom we see the logo here that takes around probably one third or one fourth of a screen then we have a username and password inputs which are custom inputs with custom styles after which we have a sign in button the forgot password button which is a link button it doesn't have a background and the social sign-in buttons like facebook google and lastly a link that will take us to the sign up page so with that being with that in mind let's start designing this screen and let's also split it in different smaller components that we can reuse such as the custom input component and custom button component all right so let's get started yeah we can close our app.js index.js and sign in screen yeah at the moment we can focus on this one so what i will want to do is to start with rendering the logo on top of a page for our assets that we want to bundle inside our application we're going to create a new folder inside our root folder of our project let's do it not inside source but inside the root now it still wants like this so the folder is be called assets and we can add a new folder where images where we will keep all the images and here let's paste in any logo you can also find the node.js development logo in the assets that you have downloaded i'm gonna bring it here all right we have it so now let's go back to our signing screen let's import the image component let's import our logo assets images and there is logo one dot p n g make sure to add also the extension of the logo okay so now we can use the image component and pass in the source our logo let's save we're gonna also add some styles because we see how it is displayed so style equal styles dot logo and also let's define our styles down below for that we're gonna need to import style sheet from react native and style dot create here we're gonna create the styles so first of all for our logo we can simply set hard-coded width and height and yeah we see displayed here now to make sure that our whole logo is visible in the container that we specified here we're going to say that the resize mode is contain contain save and now we see that the whole logo fits inside this width and height but in order to make sure that our logo is not hard-coded we has a hard-coded width we are going to say that the width is 70 of the screen 70 of the screen and this will make sure that it displays almost the same on any device size so let me try to reload like this so yeah let's also while we're here add some styles to our root here in order to align items in the middle so align items center to make sure that our logo is in the middle styles here and we can also add some padding to this root in order to make sure to have some spacing here on the top yep now it looks better so with a weave one more thing that i want to do is to set a maximum width because if we are looking on this signing screen on a big screen like on an ipad or on web then it's not going to look very good if it's gonna take 70 percent of the whole screen so you can set up max weave to be somewhere like 500 pixels or 300 pixels it depends on your design choices for the height we're gonna get the height of the screen using the use dimensions hook that we can get from rock native use windows dimensions and we can get the height from use window dimensions and with that being said we can now add one more style here that will contain the height of our image which is going to be around the height of our screen multiplied by 0.3 that means that is going to be 30 percent of our screen because that's what we saw here it's around 30 percent and here in our styles instead of writing height because we specified here we can specify the max height as well so the max height we can say as well like 200 pixels 300 pixels depending on your design choice let's save right now and let's refresh our project here and now our logo is displayed well on this device and is going to be responsive to different device sizes okay so moving on the next step in our project here is the inputs for the username and the password i'm going to start right away by defining a custom component for our input by creating a new folder here custom input because we will reuse it for multiple places in our application so it's better to have it here like custom input.js do react native functional export custom input custom input i'm gonna come back to define it here but first of all let's define the project structure here here from custom input and back in our sign-in screen we can import our custom input from components custom input and let's render it here custom input will we see it on the screen yeah we see the text custom input on the screen which is good we can go to custom input here and start developing our custom input so for the input we are going to definitely need the text input to be able to get the input from the user let's delete this text and let's define the text input that we have first of all in order to see it i'm gonna add a placeholder place holder and by doing that yeah i see the placeholder here i can start writing all right so let's start styling it so for that i'm going to import the style sheet from react native and let's define the styles here styles stylesheet.create so we're gonna have container style and also the input style we're gonna give the container style to our view and our input style to our text input okay so what do we have here so the background of our input is going to be white but the background of our page should be kind of a gray so for that let's go in our sign-in screen and for the root let's add a background not in the sign in screen let's add this background color to the whole application so yeah that's gonna be better so in our app.js for our root i'm gonna add background color f9 fb fc save and now if i go into custom input i can say that the background color of our input should be white yeah now it's better so for the weave let's specify that it's one hundred percent of them of a parent component like this and it has also some border and some border radius so for the border i'm going to specify the border color e8e8 which is a very light gray a border width of one like this and to make the corners round i'm gonna specify border radius five yeah now it looks better now with some spacing i would like to give some more space for this text inside here not to start from the beginning so let's add padding but only horizontal because vertically we have enough padding there 10 and when we are going to have multiple custom inputs for example custom input custom input they are going to be displayed one on top of each hour so to fix that let's add also some margin vertical 10 to have some spacing around them vertically or even five probably is going to be okay all right so now with the styles are i think we are good now let's implement the the functionality of our custom input to be able to control it from outside and in order to be able to control it from outside we're not going to keep the state the value of our text input in this component however we are going to receive a value and the setter a function that we will call whenever we want to update the value we are going to receive it through props so we are going to receive value and set value for props the value we are gonna set to the value of our text input value equal value the set value uh we're gonna use it whenever the text changes in the text input so one change text we're gonna call the set value that will update the value with a newly updated text and also let's receive a placeholder for props to be able to specify it whenever we are using it placeholder like this okay so let's go back here and let's start with the first custom input it's going to have a placeholder username for the value and the set value we are going to need state to keep track of the username so let's import the use date hook from react use state and let's define on top of our component let's define our username set user name state initially it's going to be an empty string and the same we're going to do for the password password set password okay so for the first custom input we're gonna say that the value property of the custom input is our username and the setter set value is our set username so by doing that we send this value on the setter down to our custom input which then sends it to the actual text input and let's do the same for our password password value password and the set value is going to be set password like this save and yeah now we can update our password username and the password as you can see the password here is visible and in order to make it hidden there is a property to that we can send to the text input which is called which is called secure text entry and this is specifically for password and if we set secure text entry to true we see that our digits are hidden so let's also receive this secure text entry through props in order to be able to adjust it from outside set here secure text entry with a secure text entry that we receive here and back in our custom input we can say secure text entry equal true for password and now our password is going to display this password but username by default as the username whenever you have a property went through you can send only the property and without the true and it's the same so looks a bit cleaner all right so that's it with our custom inputs we're gonna have to adjust them a bit more later for example adding the icons and so on but that's gonna be probably at the end of a video because right now we still have a lot of things to do for example with custom buttons so let's actually start working at our custom buttons and i'm going to start with a sign in button because it's pretty yeah it's quite straightforward what we have to do it's like a view with a background color with some round corners and a text in the middle pretty simple so let's create a new component in our components folder it's going to be called custom button let's define here i'm going to copy the index here and it's going to come not from custom input but custom button so let's create our custom button here dot gs and recognitive functional export custom button okay like this and let's go back in our screens sign-in screen let's import the custom button from components custom button perfect and let's render it after our inputs custom button so we see the button here perfect let's start styling it so first of all let's add here stylesheet define the styles dot create and let's add two styles the container style and the text style let's also make sure to send these styles to our view styles dot container and to our text inside style styles dot text so our container will first of all have a background color free 3b71 f3 this is the blue that we see there yeah and we see it right away on the screen so now that we have a background color let's play with the sizes so the width of our button is going to be 100 of a parent view like this also to make sure that it displays properly let's add some padding so the padding 15 we'll make sure to add some spaces like this and again to make sure that it has some margins from our containers we can say margin vertical five okay so in order to align the text in the center let's do align items center and to make the borders round i'm gonna do border radius five and with that set the container i think it's looks quite good and the last step is for the text to say that the font weight is going to be bold and the color of the font is going to be white perfect so now we have the styles of our button let's make it functional so in order to be able to register on press events of a user we're gonna have to import a component called pressable that gives us the ability to register these events so our top view is going to be replaced by vis pressable which is similar to a view it contains styles so nothing from our styles will change but besides tiles we can also pass our on press event here so what should happen when the button is pressed from inside custom button we don't know what should happen because it should be reusable for different scenarios and for that reason we're gonna receive it through props the on press event so on press is on press the same things with the text of a button let's receive it for props as text and with that to one press and text we have this reusable button that we can go back here in our sign-in screen and say let's first of all define a function for on sign in pressed we're going to implement the logic in the next video so stay tuned by the end of the video to know what's going to happen next but right now let's just console 1 sign in to make sure that everything works so first of all the text of this button is going to be sign in and well on press event is going to be the function that we define here now we see the text on the button sign in if we press on it we see the console warn that we define here so that means that our button works as expected all right let's have a look at what are the next steps so the next steps are the forgot password which is also a button but a different type of button with different styles and we're signing with facebook and sign in with google so for the forgot password let's have a look so i'm gonna copy the custom button here and i'm gonna say that the text should be for god password then on press let's do on forgot pass word press pressed let's define the function here and again we're gonna just console log this name so now we have two buttons pressing on sign in we see sign in pressing on forgot password we see on forgot password pressed perfect but the styles of this button should be different so usually when we have customizable buttons we have three types of button buttons primary which usually is with solid background we have secondary which is with a transparent background but with solid borders of this color and we have tertiary is it right how i pronounce it let's see tertiary okay so besides primary secondary we also have tertiary buttons which usually looks like links so for that reason for our custom button let's pass here a type which is going to be tertiary and with this type property we can go back to our custom button receive it here as type and think about how to conditionally style our buttons depending on our type so we're gonna have the styles for our container here and for the container we're gonna keep only the styles that are the same for all the types of containers and then we're going to extract individual styles for different types of buttons in separate styles for example container underscore and let's say primary and our primary button is going to have the background color here blue so let's take it from container because this background color is only for our primary button and also let's define a container tertiary which does not have a background color but if we will need any custom styles for our tertiary button we're going to add them here let's do the same for our text text will be them you have a general style then we have text tertiary and the color of that text in a tertiary button if we have a look here should be kind of a gray color so the color is gray okay so for the styles here let's also assign the container style which are default styles but let's add one extra style that is going to be coming from the styles object and we're gonna access the necessary styles based on the type using this notation so styles it should be container because we wrote it like container underscore and after that is going to be the type of button so if the type is primary it's going to be container underscore primary if it's tertiary container underscore tertiary and the same thing we're going to do for our text here tiles at text underscore type save so as we see for the forgot password it works as expected everything works very perfectly but we lost some styles for our primary button because from here we are not sending here a type primary and either can send here type primary or better we can assign a default value of primary whenever the button will receive undefined type it's going to fall back to primary so as you can see here if we don't pass anything it's gonna be back to primary okay so for the forgot password uh tertiary button we are done the next tabs the next buttons here are the social sign in buttons so let's define them here let's copy the custom button here and we're gonna have three of them because we have uh signing with sign in with facebook with google and i also want with apple because if you uh intend to deploy your application on market you need to implement sign in with apple so on apple store market sign in with facebook on sign in facebook sign in with google on sign in google and sign in apple with apple alright let's now define this functions on the top const and the same for our three functions okay so now we see free button signing with facebook sign in with google and sign in with apple now regarding styles here these buttons are not primary are not secondary and are not tertiary at all they are very custom buttons so what is custom here is definitely the background color and the text color so let's adjust now our button component in order to be able to adjust the background color and the foreground color from from outside so to do that let's yeah let's add one more styles to the style array for our container so the last style is gonna be yeah let's see if background color is specified we're gonna assign a style with background color bg color otherwise we're going to assign an empty style object here and this background color will override any background color that is coming from the container or for the container primary or and so on so if there is a background color it's going to take a priority let's do the same for this style for the text here as well if foreground color exists we're going to set the color of our text as foreground color otherwise empty object alright so let's go back to our sign-in screen and here we're gonna specify the foreground color background color of all these buttons alright guys so here are all the colors uh you can stop the video and copy the colors that i have found here and with them this is how our screen looks at the moment we have different buttons passwords inputs everything that we needed there and if we look at the designs the last thing is here at the bottom a tertiary button which will say don't have an account create one so we can do that by copying our forgot password tertiary button let's paste it here don't have an account create one on sign up pressed this will redirect the user to the signup screen and if we look here we see the button here at the bottom of the screen and everything now is ready for this screen before going to the next screen i want to do one issue that there might be with such screens so for example on this device everything looks good and everything fits on the screen however if the application will be open on a device with a much smaller screen size then you might lose some of the buttons that you have here at the button so the user might not be able to click them which is a very huge problem when the user is not able to click some buttons to do that i'm gonna simulate this by increasing the margin vertical of our buttons so if i put 25 here just for the sake of this example we lose the ability to sign in with apple and we to navigate to the sign up screen because we cannot reach it so in for that situations we need to wrap our whole page in a scrollable view to be able to scroll down to see everything that is on this screen so to do that let's import scroll view from react native and let's rub our whole page here the whole view in a scroll view let's copy the ending and go to them and here and after the view is closed we will close the scroll view yeah everything is okay so now we are able to scroll down if the content on the screen is longer than the screen height so by doing this we are making sure that the all the buttons are accessible on any device screen so going back to our custom button i can move the margin vertical to five and everything works as expected you can also if you don't like the scroll bar here on the right you can disable it by passing a show vertical scroll indicator false if you do that you are not going to see the scroll indicator on the right all right so we have finished with this screen the sign-in screen and next we're gonna start working on the sign up screen which is quite similar but it has multiple inputs all right guys so that was it for today in this video we have finished the signing screen from our authentication workflow and we have implemented here a lot of custom things like custom inputs custom buttons and so on follow the next video where we're gonna continue this tutorial with the rest of the screens from the authentication flows which are very important for any application like sign up screen where you will be able to create an account and we're gonna reuse the same components that we created during this video in order to create this form also in the next video we're gonna cover the forgot password flow where you'll be able to input your username and after you press send you will be redirected to a new page where you will be able to reset your password also in the next video we're gonna integrate navigation to put all these screens together in order to navigate from one another as you saw here in this demo like don't have an account we navigate to a sign up page have an account we navigate back and so on so make sure to follow the next tutorial to learn how to implement all of the remaining screens in our authentication flow if you enjoyed this video guys hit the like button subscribe to the channel and turn on the notification bell not to miss the future videos that are coming on this channel and as always guys take care stay hydrated and ride clean cold see you soon

Channel: notJust․dev

Views: 16,060

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

Id: ALnJLbjI7EY

Length: 39min 17sec (2357 seconds)

Published: Tue Oct 12 2021