Login and Registration - ASP.Net WEB API and React JS

hello everyone this is Manoj welcome back to my YouTube channel in today's video I'll show you how we can achieve sign in and sign up functionality using web API and react.js project to create the projects I'm using this location so let's open command Crown first from the same location and let's create a new pre-exist project so npx create react app for react app I am giving name front end app so it will create our react.js project as you can see it has started to create the project now let's open Wheel Studio to create our web API project for this video I'm using Windows Studio 2019 you can use 2017 or 2022. so click on new project from the template we'll select C sharp and web API as you can see from here click on next for this let me give name backend app and I'm giving the same location as react.js project click on create so web API create so this will create our web API project which we will use to write our apis which we will use in the react.js project so it will take some time foreign API project is ready so we can see in the solution Explorer this is the default folder structure so we have two controllers this is MVC controller this is API controller we have areas we have appstart here we have all config files models folder scripts views so on and so forth so let me close this let's see yeah we are done with our react.js project also so let's go to this folder by command CD and the folder name and from here type code space dot so it will open our project in vs code directly let me close the command prompt so this is our default you know interface of our react.js project so if I expand the source folder which is SRC so we have app.js index.cs index.js okay so go to terminal new terminal and here we'll try to run this application by using the command npm start to npm start so it will start the development server and we can see the default react.js project in our browser let's also run this web API project by clicking on this button so we'll see the default page of web API in browser so my default browser is Google Chrome so we'll see both of the project in Google Chrome only foreign so as you can see this is our default web API interface and in the new tab localhost colon 3000 this is the default port number of rdx.js project so our API is running so this is the default react.js application and let's add one more controller click on ADD controller click on mvc5 empty click on ADD now we need to give a name so here I am giving name test controller click on ADD it will add our controller let me also open SQL Server because we need one table so our test controller has been added as you can see here so let me remove think I have added the wrong controller let me delete this we need a web API controller so click on ADD controller web API this one add test now so you can see API controller so now this is web API controller so first go to models folder let's add one model class okay let's say employee and let's add some properties so shortcut is propped then hit tab so first property is ID second property is name and third property let's say phone number and last property should be let's say address so we'll use this and let's add one more property called is active exactly means if you are giving value 1 so it is an active employee and if you are marking that is active zero it means that employee is no longer in the company or in the organization so we will not display the data on the front end so we are done with our employee model so save now first go to your web config so here we need to declare our web config so after this app settings add connection string tag inside this we need to give a name I'm giving name icon and then connection string the first attribute is server so go to your SQL Server so this is your server name copy paste and then the database let's connect this one so we'll use the master database let me give name master and if you notice I'm using Windows authentication so there is no need to give username and password so we will give in t integrated security as true save we are done with our connection string go to your test controller now we need to add some name spaces so using system dot data another one is data dot SQL client so let's create our SQL connection let's add one more namespace so using system dot configuration so here in the SQL connection parameters give configuration manager dot connection string name of your collection dot connection string so you need to copy this name and paste it here so our connection is ready let me remove this now go to your SQL Server click on new query so by default it will open your master database and here let's create a table create table PMP management ID let's make it auto increment one by one so we don't need to give it every time when we create a new employee and make it primary key and then name name we will use where care with the length of 100 and we have phone number and we have address and we have is active as int so select this command execute our table has been created select star from the table name which is EMP management so there is no row perfect now let's create a stored procedure we'll use stored procedure in our web API so create prog USP login so here we will pass two parameters at name worker and let me phone number worker so I'm using so I'm using name and phone number as the credentials if you want you can create email ID password username whatever is your requirements you can create those fields and you can use them here all right so begin and now select start from EMP management where name equal at name and add phone equal sorry at the rate phone let me copy paste and this is your tables field and this is your variable create similarly copy this one paste USP registration name phone number address and is active foreign the command which is insert into employee management now give the field names name phone number address is active now values so let's copy these four fields and put at the rate because we are taking values from the variables that's it select this procedure so we have two procedures now all right so we are done with our database part now go back to web API in the test controller so let's declare a method for login so or let's create a method for registration first so route registration public train registration it will take our employee class as parameter we need to include the namespace which is models so click on intellisense app model perfect so now let's also add SQL command object CMD equal null so now CMD is equal to new command for our registration we need to copy our registration SP name SP means stored procedure and now we need to give the connection object which is Con in our case okay okay now we need to give the parameters so CMD Dot parameters dot add with value so the first parameter of our registration SP is name and here we will get name from employee dot name let's copy this and change all parameters so the second one is phone so employee DOT phone number address employee dot address is active employee dot is active nice and here we need to give the command type so CMD dot command type is equal to command type dot stored procedure and now after adding all the parameters we need to open our connection so connection dot open and end I equal to CMD dot execute non-query so it will execute our this SP with these parameters if a neuro has been inserted in or of a new record gets inserted in the database then the value of this I will be greater than 0. so here we will check if I greater than 0 it means if only record gets inserted then we will display a message else we will display another message so here let's take one string variable let's say message equal string dot empty so if I greater than 0 then message is equal to data inserted else error control KD finally return this foreign put semicolon over here and let's also use try catch blocks so try catch so by using try catch block you will save your page by breaking on runtime so in the try let's copy this paste it here and if any error gets occurred then we will return message as exception Dot message save so that's a pretty straightforward and pretty simple message okay same way let's copy this and paste it over here so now let's create a method for login and instead of SQL command let's add SQL data adapter now in here let's remove this all so d a equal new data adapter copy the login stored procedure name paste it here and the connection object now d a DOT select command Dot command type is equal to command type dot stored procedure oops and d a DOT select command Dot parameters dot add with value so the first parameter is your name and this name will come from employee dot name copy paste so the another one is phone number so employee DOT phone number after that let's take a data table DT is equal to new data table d a DOT fill DT so if the name and phone number these records exist in this table then this table gets filled otherwise this table will be empty so let's give a validation if DT dot rows dot count greater than 0 it means these information is available in your devdb then message is equal to user is valid or else if the information is not available in the DB then user is invalid save so we are done with our both the methods registration and login let's save this perfect let's try to build this solution so build has started so build succeeded nowhere perfect let's run this now go back to visual studio code in the source folder let's create a new file login.js and so here import react from react and function login return Dev login and export default login so save let's copy this add new file registration.js paste change the name registration copy save go to our app.js so let's import registration and also import login and let's remove this header part and include your registration first and after a break line let's add login save let's remove this logo also we don't need save go to browser let's open localhost colon 3000 the react.js project so you see we are able to see the text so first of all go to registration and here let's add fragment so fragment is used to render a single element if you use multiple elements inside this fragment so react will consider those elements as a single element because we have a well restriction in your react we cannot render more than one GSX element so that's why we use fragment so let's add label your name and let's add input field input type text and ID equal txt name placeholder and name one br copy so the next one is phone number txt phone number and phone number last one is address EXT Ress finally let's add a button save save go to your browser you see this is your registration form and let me give one more VR here so as of now I'm not focusing on the designing part I only want you to understand the logic behind it how we can use login and sign in or sign up functionality design you can take care all right so in the registration now we need to use use state we will use some stats so for the name name set name you state blank string copy and second one is phone number set phone number address set address so let's declare on change event on change so handle name change foreign so let me first copy this and paste for phone number and address change handle phone number and handle address let's copy const we need to declare a Handler value and set name as value let's copy this paste handle phone handle address in phone Handler set phone and address set address save so we are done so here to hit the API or to connect with the API we need to use a package axios so npm I axios so it will install your axios package so we'll use here so let's declare a click event so on click handle save const handle save so here first we need to declare a data so declare data is equal to name or name is okay Capital so Cuba identical property name and name so this name is your web API property name and this name is your react.js State variable name this one okay so don't get confused now phone number phone number address address and is active so for every new employee I am giving a static value 1 considering every new employee is a active employee okay so we are done with an employee data now let's improve one more namespace import access from axios so now axios dot post we will use post so first if you see the intelligence we need to use a URL and then data so let's give a variable URL we'll use a URL here so URL comma data dot then result so if result dot data equal equal to test controller registration then alert data saved else alert result dot data or for any case we can alert data because we are getting the correct message from the web API dot catch error alert error save so go to your web API project we need to add one package so right click on your project manage new get packages in the browse type course try to install it and meanwhile it is installing go to your app start web API dot config we need to use one more namespace Dot course so enable cos attribute cos equal new course so here if you see origin headers methods so for everything let's give star star means it will allow all the requests without any additional information so config Dot enable course and give the object name course save so let's build the project will succeeded so now we need to give a URL here so before giving URL let's try to give a route for our controller so out prefix so here the route will be API slash test you can give any name but I am giving the name as controller so save try to run this project so we'll use the base URL and then the controller route and then the method route so let's copy this base URL go to vs code so paste it here and after that go to your Visual Studio copy your controller route and paste it here and then your method paste save so go to browser run the react.js project so let's try to give a name let's give any name phone number address click on Save so now we are in little Studio as I put a breakpoint so let's click on continue so you can see data inserted perfect now go to your SQL Server try to select this command perfect so we are having our data nice so our registration is completed now let's go to business code again in the login.js so let's quickly copy these two input fields copy and paste inside the fragment similarly copy your button so let's change it to login and copy these two packages and also copy the dates on change and the Handler copy this and paste it here so let's change the name first of all handle login so for login if you see your web API method we only need name and phone so in the data let's remove other two properties and change your route to login save and yeah that's it go to browser oops let me give an a label also here save so let's copy the name phone number login so we are here in let me remove the breakpoint click on continue so user is valid let's say if I try to give any random number which is not present so user is invalid perfect so this is about today's video and I have an announcement let's say if you are looking for a project for your College assignment or if you are doing any internship and your Mentor has assigned some project to submit then I do the paid projects for interns and for students so if you have any kind of requirement related to this you can contact me on my Instagram my Instagram handle is open programmer you can also find the contact details in Channel description so that's it for today I'll see you in the next one thanks for watching take care bye

Channel: Manoj Kumar

Views: 37,538

Keywords: login web api, register with web api, web api registraion, login with webapi, login with web api, login with api, web api login, c# webapi login, login in web api, webapi login using c#, web api login example c#, asp.net web api login sample, login and registration web api, how to login using webapi, how to login using C# webapi, how to use web api, web api tutorial, web api, web api c#, manoj deshwal, connected programmer, yt:cc=on, js, login and registration using react js

Id: wZfCIw5y5j8

Length: 38min 27sec (2307 seconds)

Published: Mon Jul 18 2022