Creating a Complete LOGIN Page in React Js and Node Js FROM SCRATCH

[Music] hello in this episode of today's point code we'll be creating a login system with react.js from start to finish we will make use of components such as formic style component yap and also redux useful links as well as timestamps will be in the description below do to start with let's head to the command line and create our react app we'll use nps creators up and give it a name in this case i'll call it ttpc login once our app has been created we enter the directory and open the project in the code editor in the code editor we see that a lot of files and directories have been generated for us now delete the files that we now use in this episode now in the public directory let's open the index.html file and make some changes we will change the contents of the title tag now let's copy our logo and put it in the public directory and rename it once you've done that let's go back to the index.html file and make change to our icon link now back in the source directory let's open up.js and make some changes we'll clear the content of our dev tag and put hello world we also clear the input at the top of the file once we've done this let's visit our index.css file we will create a general style at the top of the file in this row we want to set our margins and patterns to zero now let's create some directories we'll be using in our project in our pages directory let's create the pages that our project will have [Music] now we want to use an external font for our project so let's go to google font once we've located the font we click on it and copy the link now back in our index.html file we paste the link in the head tag now in our index.css file we need to change the font family to match the link that we just added [Music] now let's make some changes in the index.js file [Music] [Music] now let's run our project with tian stats on the command line they should open it in a browser once our app is open we should see hello world displayed now let's open another command line in the same directory and install styled components this is what we'll be using to style all our [Music] components once we are done let's create a styles.js file in the components directory we will use this file to house all our styled components at the very top let's import styled components once we are done we want to define all the colors that i'll be using in this project for consistency sake we will define it as an object and export it so for the most part of this tutorial you can just follow along and type on your computer if you want and you should get the same result now let's copy the images that i'll be using in this tutorial into the assets folder once you've done that let's import the background into the styles.js file we'll be using this for our first style component now in our first out component we will call a stout container and it will be a dive and remember in style component we use string lead trials or backticks instead of our normal quotation marks [Music] for the background property we'll be using a linear gradient and also the background in doing so we want to create a faint dark tint on our image now back in our app.js let's import our styled container and apply it since it is not the default export we need to import it in the curly braces now going back to the browser we see that our background has been applied and we see hello world in the center remember sometimes you have to wait a while and refresh your browser before you can see the change because the react code is compiled before it displays the output [Music] let's create our home component in our home.js file [Music] for the start we just put a paragraph containing home in there now let's import the home component into our js file and replace our hello world with it now let's start creating our home page so replace the home paragraph with a few divs once you are done let's head to our styles.js file and create a few components [Music] [Music] you shouldn't be worried when you see errors and warnings when writing the code these will normally disappear after you finish writing the code and it has been compiled now back in the home.js file let's import our components and start using them now we can see that our home page is starting to take shape let's go back to our styles.js file again and create some more styled components in this case we'll create the avatar this will be the components for our logo that will be putting on top of our pages we are setting it up in a way such that the image to be used will be passed to it as a property uh so now in the home.js let's put our avatar there under the view menu i toggled word wrap so that we can see all the code on this page now we import our logo and pass it to the avatar component you can see that it is being displayed but wanted to be at the top most part so let's start the div that contains the avatar now our logo is looking as we want it to look now to facilitate movement between our pages we will use react router so let's install it now back in the styles.js let's import link from react router dom install it we use it to create our buttons over here we want to change the behavior of our pattern when it's being hovered on now to make the changing behavior smooth let's add a transition property now let's import the start button and use it we'll create a button for login and another for sign up now let's specify the links where our buttons point to once we are done with this we need to wrap our whole app in a router that comes from react router dom so let's import the router as well as other components that we'll be using later on once we've done that we should be able to see the output of our button now we can see the output of our button but it doesn't look right yet so let's create a component that we use to fix the styling of our buttons we will call it a button group and we wrap it around our buttons so i'll show you alright import our component and wrap it around our start buttons now on refresh of our page you should see that the position has been fixed now let's move on to our next page which is the login to do that we first create our login component and just put login text in it we then export and replace the home component in our app.js file but we still leave the import of the home components there since we'll be using it later on on refresh you see login in our browser but the background is still there and that's the look we are going for now for the login we'll be using formic to build our forms so let's install it once the installation is complete let's create some styled components in this case we are styling our input field do so now let's check for an invalid prop in our input we will understand how it works later on this invalid probe will trigger different stylings when it's available now when the input field is in focus let's apply some styling let's start some more components this time let's create a styled label now we use this component to wrap our whole form because we'll be reusing it we want to pass the background color as a property when using it next on the list is our phone button we want to create a styled button but this time around instead of using the link that comes with react router dom we'll be using the regular button now because this form button is very similar to the first button we created let's copy the styles and make some changes foreign now let's go to a login.js file and make some inputs now let's make changes to our login components over here we'll be using our logo so let's import it note that we use our component as much as possible so whenever we need something we just import it from our styles if you remember our style title takes a size property which determines the size of the text on refreshing we can see our logo and our title now let's make some imports from formic once we are done let's use it in our login components now the formic tag will take a function as a child and this contains our form to ensure usability and high level of abstraction we want to put our formic input in a different file we create a file called form library or formlib for short in our component directory now in our form library file let's make some few imports from formic also import some styled components from our styles.js file now let's create and export our text input component first of all we take props as a parameter now using the props we will set up a formic field so you have a field variable and also meta which contains information about the field so when we are using the input field we will pass the label as a property to the component and that's what we are putting in our style label now we'll make use of our style text input and spread the food and also the props on it now back in our login.js file let's import our text input and use it now we have to pass all the necessary properties to our text input so we'll create two fields email and password [Music] [Music] [Music] so [Music] now let's bring in our butting group which we use to properly style our phone button we need to pass a type of submit to it so now i have our phone with the input and button recreated but the input seems to have a faint outline so let's take that off we will do that in the styles.js file now looking at the input fields we started in such a way that there is a gap at the left side in each of the input fields you want to put an icon that matches the input field at the left side and we will do that using react icons once we've seen it we'll head to the command line and install it once we've installed it let's create a styled component for the icons we want to ensure that is properly aligned in the input field do now for some of the input fields such as the password we'll be having icons both on the left and the right side so in the start icon we check for the right property if the right property has been provided then we start a particular icon to the right side otherwise we stick to the left now in our form library let's import the style icon and use it so the value that is applied to the icon will be provided when the text input is being used remember to add the icon to the parameters of our component now in the login.js file need to import some icons from react icons and supply to the input fields [Music] now on refresh we see that our icons are showing but they are showing at the wrong place so let's fix it now in the form library we see that i use stout instead of style as the property of the dev so let's fix it on correcting and refreshing we see that the icons come back to their actual position where they are supposed to be this might not be the case for you if you call the error at first glance now our icons are fine but our colors look a bit off so let's go into our star text input and make some tweaks first of all we change the value of our color another background color by doing that and refreshing it looks like our targeted work now in our form library.js let's go and work on the eye icon for the password field so we import the eye icons from react icons now from the props we want to check you know when the field is a password field so that we can render the eye correctly now we need to toggle between the two eye icons when it is off and when it is on to do that we used it so let's import use date from react let's call our stitch shoe our default value will be false so now using the show variable state we can know when to render each of the icons now we need to pass and unclick to the icon so that we can toggle the value of show this one click will make use of set show to set the value by negating the current value of show now for the password field we need to use a customized text input so that we can be able to vary when the password can be seen and when it cannot be seen to do this we make use of the show variable once again so for the type of the input we will toggle between text and password using the text to allow the password to be seen so to prevent the rendering of double password fills let's check when it is not a password so that we render the other normal text input once we've done that everything should be back to normal but there is an issue when i try to change the value of the password field this is because formic requires the initial values so that to be able to change them so let's set them up in the login.js file inside the formic attack so we pass the initial values prop which takes an object of all the fields and the initial values let's also add the on submit pro this will be called whenever the form is submitted for the meantime we just load the values to the console the values will be passed as a parameter to the unsubmit function in addition to that we get other useful methods such as set submitting this will help us to stop forming that we are done with submission of the form now back to the form we can see that changing the value gives no error and the i toggle 2 works fine now for the validation of our input fields we will use yap select installer app will give us all the tools that we need to properly validate our input values and also set the appropriate errors now to start with let's import all rc app into our login component now to use the app with formic we need to add the validation schema property to our format component this will take a yap object in this object we define all the rules for our input fields so for the email we require to be a string first of all it needs to be an email if it does not match the email property we return an error message also which is required otherwise we return a required message so the messages to be returned will be passed as argument to the app properties for the password we need it to be a string and we can set the minimum and maximum length and pass an error message if the password does not obey this rule once the app retains an error message we need to display it so let's create a component to display our error messages we'll do this in the styles.js file we also create an extract test component which you'll use later on once again we take the font size as a property when we are using the component the color of the texture can be passed as an optional property now back in our form library.js file let us import and use our error message component to know whether we have an error message or not we use the meta property with a meta property we know when our input field has been touched meaning it has been changed and whether an error is occurred due to that change if the input field has been touched and also an error exists then we can go ahead to display our error message we check for the touch so that the error messages will not be displayed anyhow now if there is no error message to be displayed we will still use the error message tag but we'll set the visibility to hidden so that was to maintain the shape of our form even though there is no message to be displayed shhh now let's test out our form by supplying an invalid email we see that the message is displayed and the same happens when you put in a short password but we aligned our message to the left but it is showing at the center so let's fix it going through the error message component we see that i missed a semicolon i put a colon instead of a semicolon so let's just change that on changing data and refreshing we see that there are messages displayed at the left side matching the design we are looking for now you might remember that we checked for an invalid prop when creating our text input we want to use that to style our input field when there is an error so whenever there is an error you want to pass an invalid property to the text input field we'll do this in the form library.js we once again use our method attached and also meta dot error to set the invalid property that is if our input has not been touched and there is no error the invalid property will have a false value and therefore the styles will not be applied now testing out our input again we will see that when you have the error message the background is changed to red which is what we are looking for now if you are still with me up to this point a sub to this channel will be very appreciated now back to our login.js file let's use our extra test to display a message for a user who is on the login page but wants to go to the sign up page the sign up needs to be a link and we'll create a component for that we'll call our component test link you want it to look like a normal test [Music] now once we are done let's import the components into our login.js file and use them now let's pass a two property to our test link to indicate where we want our link to lead us to in this case our sign up page now refreshing and testing it out we will see that the styles have been applied now one more thing as usual people put copyright messages at the bottom of their web pages so let's put a copyright message under this form to do this we need to create another styled component in this case we'll call it copyright text [Music] now back in our login.js file let's import the copyright text and use it we'll put it just below our style from area so that it is displayed just below the white background [Music] now we can see that our copyright text is displaying nicely below our phone now when we click on the login we see that there is an ugly outline around the button this depends on the browser we are using so let's clear the outline from the start component [Music] let's do the same for our other start button [Music] and now when we click on the button we see that the outline is no more so typically when we provide a valid email and a password and hit on the login button we will see some kind of loader or spinner we want to do the same to our phone we'll do that using react's loader [Music] spinner so now let's install this package now once we are done we need to import a particular css file into our project confine this import on the react loader spinner page now once we've copied the link we paste it in our app.js file [Music] now back to our form in the login.js file we make use of a property that formic provides for us it is called a submitter this returns a boolean true or false to indicate when our form is submitted using this we can know when to display our loader spanner and when not to do so so we take a submitting in as a parameter now let's import our loader now when our loader is displaying we're easy to replace our button so let's put our loader in the button group component so so now for our button let's check when our form is not submitted and displayed once you've done this we can save and refresh our work now when we provide valid details and submit our form we will see that our loader is showing now let's move on to our sign up so in our sign up we'll do something very similar to what we did in our login.js file so let's copy all the code and paste it in our signup.js file once we've done that let's import it into our app.js file now back in the signup.js file let's make some changes now for our sign up we need some extra fields so let's add them to our initial values first of all we want to repeat our password also we want to take our date of birth and lastly our full name we also need to validate these extra fields so let's add some extra validation rules [Music] [Music] [Music] now for a repeat password in addition to it being a string and being required we need to make sure that it matches the original password in this case we'll use a formic property known as one off with this one off we pass an array to it and put in our password field as a reference so now the value of our repeat password should be at least equal to the referenced password for it to be accepted otherwise we would return an error [Music] [Music] message now let's copy and paste some of the text input fields we copy and paste our password once and copy and paste our email field twice now let's change the values of the properties for the date field we'll get rid of the placeholder property since it will not be needed so once we've done this let us import two new icons for our date of bet and name fields once we've done that we'll place the value of the icon property now at the bottom let's make changes to our extra text we'll change our link to login and the path as well now saving and refreshing we'll see that our changes have been made now at this point let's go ahead and set up our dashboard page to do this we'll go into our home.js file and copy the content let's also import our dashboard component into our js file now let's make some changes in our dashboard.js file we'll need just one button so let's get rid of one also let's change the details to log out we don't need our link to point anyway so let's just put hash now let's import styled form area which we'll be using to give us a little background to our text now let's copy our button and text into the styled form area let's pass our background color to our style form area to do this we need to make sure that we have colors imported on saving a reflection we have our dummy dashboard which says welcome user you also have the logout button now back in our app.js file we need to set up routes for each component so that we don't need to replace the component each time we want to see the output of it to do this we make use of the switch and also the route the switch will always check for the current link and choose which component to display each of the routes will take a path which it associates with our components now let's copy and paste our art three more times and make changes for the home component we just use forward slash this will ensure that any other routes it doesn't match sign up login or dashboard will go straight to our home component now on refreshing we see that we are taking to our home component once we click on login we see that we are taken to the login page and same applies when we click on sign up the dashboard route works as well so we have successfully set up our various routes now at this point we can go ahead and start our authentication to do this we need a few reacts and redux packages so let's install them once the packages have installed let's create an auth folder inside this auth folder we'll be creating other subfolders and files we'll create an action folder reduces folder and also install.js file inside the actions folder we will create useractions.js file inside the reduces folder we'll create a root reducer file now let's start our work in our store.js file we need to import some few components from the packages that we installed remember with redux we are hoping to create a store which you'll be using to store the details of our user whenever the user logs in we'd like to make sure that to be able to access the information wherever we are in our project in addition to the import we import a session service this session service will provide us the tools to store the details of a currently logged in user all these lines of code make up the boilerplate code for redux we need to write this code in order for redux to work now we need to initialize our session service and pass our store to it once we've done that let's export our stock now let's go into root reducer.js we created this file under the reducers directory let's make some imports for our work the concept of the reducers is to interact with our store and change up values whenever it's needed now let's export default our root reducer now let's go into our index.js file here we need to provide access to our store for our app and to do that we need to import provider from react redux this will ensure that our app and all its components can have access to the details in our redux store we also need to import our store and pass it as a property now let's wrap up the provider component so don't forget to pass the store as a property to the provider i think i made a typo in the root reducer file so let's change it we need to import session reducer instead of session reduces once we've done that and refresh you'll see that there is no change and this is perfectly fine now we need to create functions which will take our form input details and work on them such as communicating with the backend these functions are called actions in redux so let's go into our user actions.js file and create a few actions we will need an action for login an action for sign up and also an action for logout these actions will end up causing changes in our redux store when necessary now we have the skeleton for our actions now back in the login.js file we need to connect our login component to the redux store and also import our login action we will import our login action from the user actions file now on successful signing or sign up you might want to move to a new page be in its dashboard or another page to be able to move around successfully we need to have information about history and we will get to this using the use history hook from react router dom now let's connect our login component to readers at the bottom where we export it now connect is a higher order function so we call the connect function which returns another function and we pass our login to it for this component we'll pass now and also an object of our actions to our connect function since redux assigns the actions to our props let's take in the login user action into our login component so that we can use it now inside the on submit property we want to use the login user action first of all we want to pass in the values secondly we want to pass in the history so let's create the history variable using our use history hook thirdly when we go to the back end and there is an error message returned we need to find a way to display it to the user so to do that we reset full arrow which is provided by formic once we use it we need to add it to the parameters of our own submit function lastly we will pass the set submitting function to our login user once again this will ensure that we can tell from it when we are done submitting the phone now let's do something similar for our sign up page so let's copy our authentic section and paste in our signup.js file we need to change the action to sign up user now let's connect our component to redux using connect and also passing the action to it in an object form [Music] now let's take in the sign up user and use it in the unsubmit function we'll pass in the same props as we did in the login file let's add set foot arrow to the parameters and also don't forget to initialize the history viable once we've done that let's go into our actions file and accept the various parameters now in the login user we will take in the values as credentials we also take in the history set field error and also set submitting now let's copy the same parameters for our sign up so at this point of a login system you want to make some checks and take an action which will result in a user object being retained with some data and also a status now based on the status either fail or success or true or false we based on that and allow the user access to our system or deny the user access and provide an error message normally the action you take would be to make an api call to a back end or even interact with a database directly in our case we make use of an api endpoint which refers to a back-end server that we created in our first three videos we created a server with node.js and mongodb now after we created them we hosted it on heroku we did all this in the first three videos so to be able to continue with this tutorial you need to have that back-end server set up so you can check those videos out build the back-end server and come back to continue from this portion now we can see the back-end server that we hosted in eurocook with which an api endpoint was provided so we played with the api endpoint in postman and tried the sign up and sign-in features now if you've been able to set up the back-end server i'll be using for this tutorial we need to make a slight tweak to what we achieved in our first three videos we need to allow costs which we didn't do so first things first let's change into our login server directory under command line and open it in a code editor once we have done that we'll make the change in our server.js file so what we are adding is course which is cross-origin resource sharing so it makes it possible for apps from different sources to have access to our backend server and assess the resources available if we don't add this access to our backend requests from our front-end applications will be blocked by the browser so let's head to the command line and install calls as a package once this is done we go into our server.js file and import course through the required function once we've done that we pass it to our app.use and don't forget it's a function so once we've done that we are good to go and that's all we need to do so now we need to commit our changes using it and push it back to heroku so once we've been able to successfully push the changes back to heroku let's head back to the react section now to be able to interact with the api we need to use packages such as fetch or axios in this case we'll be using action as well as install it so once agios is done installing let's import it into our useractions.js file now in the login user action let's make a post request using axios i'll quickly copy the sign in endpoint from postman in addition to the link we need to pass the credentials also we need to pass some headers in this case we'll pass the content type header and set it to application slash json once we've done that we can attach dot 10 because this function returns a promise also let's catch any error that can occur and coso.error it now back in the dot stem block axios will return a response and this response will have a data property which will contain anything that our server returns to us let's remind ourselves quickly how this looks like so back in postman let's submit our signing request with some credentials we see that the request came back with status message and also data now let's invalidate our credentials and see what happens so we still end up getting this details and message so now i'm back in our code editor let's take out the data from the response remember this data contains whatever is returned from the backend including other fields we saw in postman so now we check for the status using the databar firstly we check for when the status is filled then followed by when the status is a [Music] success now let's take out the message from the data object so once the status is filled and we have the message from the data object we can make some manipulations to know which specific error has located and then direct you to the appropriate input field so now having a quick glance at our back-end code in the user.js file and under the sign-in section we can see the various messages that our backend server returns and it will give us an idea of what to expect so to determine which particular field the message is intended for we use the includes method which is available for strings so firstly we'll check for credentials if the message includes credentials then we set the error message for both the email field and the password remember we are doing this because of how our backend retains data if your backend server retains data differently that means you have to do something else also we check if our message includes password if it includes password then resets the arrow for the password field [Music] now if the status is success then we'll store the data return in the user data variable in this case we'll take the first index to understand let's have a look at post one if i request is sent with valid credentials the backend returns the status messaging data but the data is an array so in order to access the information in the r we need to pass the index so in this case we assess the first index of the data array also let's create a variable token which stores the id of the data that the backend server returns now once we've done this we want to create a session for the current user to do that let's import session service now let's use our token and user data to set up the session [Music] [Music] be now after setting up the session and everything is fine in the dot then block we'll use the history variable that i received to move to the dashboard we'll make use of those push function that's available on the variable now after everything we need to tell formic that we are done submitting our form so to do this we pass a false value to the set submitting function and let's get rid of the dummy data that we created now let's refresh and test it out in our browser first we'll give it a try with invalid credentials we see that we are denied access and the invalid credentials message is displayed now let's try some valid credentials and now we can see that we are moved to the dashboard saying welcome user now let's work on the sign up to be very similar to the login so let's copy the beginning part of the login so once again let's take the data from the response and check for our status whether it is field or success if it is filled then we're going to check for the specific error message that was retained else if they status was success and we go on to log in our user [Music] we can take a quick look at our backend code to have an idea about the kind of error messages that the sign up section returns once we know that we can proceed first of all we check whether the error message contains name if it does then we set the error message to the input name field else if it includes email then we send the error message to the email field once again if the message contains dates they will set the arrow to a little bit field and lastly if the message contains password they will send the message to the password field now for the signup server we want to complete submission right in the field block now in the success block meaning our user has been successfully added to the database now we'll print the email and password from the credentials that were submitted and log in the user using our login user function and we need to pass in all the appropriate arguments for the login user action now because the login user function is a redux action you can't call it directly so to be able to use it we need to wrap it in a dispatch function so let's take in the dispatch now for readers actions it is preferable to return a function so let's wrap the content of our functions with a function and return it in this case we make use of the arrow function again we need to do this for all our actions for the sign up user once we do it we can pass the dispatch to the inner function instead and also before i forget let's change the ending part of our signup api endpoint now let's refresh and try it out in a browser now on submission we see that our user has been created and we are moved to the dashboard now let's work on the logout button now in our dashboard.js file we need to connect the dashboard component to redux and import our logout action now let's pass an on click attribute to our logout button this will go ahead to call the logout user action now like all our actions we need the history variable so let's import use history and create a hd variable now for our logout user action we need to take in the history and destroy the sessions that have been set once we've destroyed the sessions we just moved back to the homepage now on refresh we can see that our logout pattern works now let's observe something even though i've successfully logged out to the user from our system should i visit the forward slash dashboard route i'll still get access which is very bad so we need to fix it to do this let's go to our component directory and create some wrappers for our route in this case we'll create auth route and also basic routes the author out we use it to ensure that once asia is not logged in the user will not have access to our dashboard on the other hand the basic crowd will ensure that once a user is logged in visiting the sign up or login page will redirect you to the dashboard now let's start with the author out you need to make some few inputs now let's create our author out component and connect it to our redux store now as the parameters we will take the children pass to it and also authenticated authenticated is provided to us by redux react session with this we will know whether a user has been authenticated or not and this will enable us to know when to redirect and want to allow access to the requested resources also we'll take the rest of the properties so all throughout to return a route now the changes will happen in the render property in this property we'll make use of the authenticated variable so for the author out once the user is authenticated we want to allow access to the children that these are requested for otherwise we want to redirect the user to the login page so the to property of the redirect component takes an object of pathname and also state so just like our readers actions to be able to assess authenticated from redux we need to pass it to the connect function but for state variables such as authenticated we need to create a map state to props function which returns an object and pass it to connect so in the map state to props we will destructure or take the session from the redux state and fetch the authenticated value from it once we've done that we'll pass map state to props to our connect and this should provide us access to authenticated now the basic cloud will be very similar to the auth route so let's copy the content and paste it in it now let's make a few edits we change the name of the component and what is exported and now all we need to do is negate the value of authenticated so in this case the children will be returned when the user has not been authenticated but when the user is authenticated the user will be redirected now back in the app.js file let's make use of the new route components that we've just created we will give the author out to the dashboard route and the busy crowds to the login and sign up route now once again redux react session provides us with a checked value this checked value indicates whether the authentication has been checked in the first place so if the authentication has not been checked we will refrain from rendering any components but if it has been checked then we go ahead to render our components so we make use of the checked here and we need to take it from the redux store so let's connect our whole app component to redux as well once again we'll make use of the map set to props since we'll be taking a redax state what is that checked so let's correct our connect input to react with assisted now let's try it out let's try to go to the dashboard without logging in you see that on doing that we are redirected to the login screen meaning our route is working now let's try to login once we do that we are redirected to the dashboard and it says welcome user now if we try to access the login page we see that we are redirected back to our dashboard because we already logged in currently our dashboard only displays welcome user but we can do better so let's try and fetch the current user's details and put it on the dashboard to make use of map state to props we once again take in the session variable and target our session.user once we've done that we need to take it in as a parameter to our dashboard component now we can edit the style title and put our user's name over there now we see that our current user's name is being displayed now let's display some other details about the user to do this we'll make use of the extra text so let's import it from our styles.js so let's display the email of our user and also the date of birth now we see that the email and our date of bits are being displayed but the color property is not working so let's go into the styles.js file to fix it now in the extra test we see that i missed the semicolon so putting it there and refreshing our page we see that our color is now working so now let's maximize our browser to see the beauty of our work though this is not the most beautiful site ever we've gotten it to perform the functionalities that we wanted do [Music] so we've been able to create a working login system using react okay so this has been a very long tutorial if you stayed with me up to the end thank you so much for watching if you learnt one or two things please like and subscribe and i'll see you in the next episode

Channel: ToThePointCode

Views: 5,254

Keywords: login system with react, react redux login and signup, React login authentication with redux, login system with react redux, complete login and signup with react, full react login system, full react login system with redux formik, how to build a login system with react, react login page, react login page tutorial, login system react js, full react login project, login page with react and node js, creating a login page in react js and node js, full login system react, visualstudio

Id: HCnHYz6TXA4

Length: 119min 9sec (7149 seconds)

Published: Fri Dec 11 2020