Login and Registration with React Native and Laravel | Expo | Sanctum

hello everyone welcome back to my channel and this amazing video i am aditya in this video we are gonna see how to connect react native with laravel application or laravel backend so in the previous video if you haven't checked my previous video for react native please do check that because this video is continuation or just a modification of the previous video where we did login and registration with firebase now we'll take off the firebase aspect and do it with laravel so there are certain considerations before we first first consideration is the backend site so if you have a laravel project which is already there you're using it then please move forward with this laravel santim or passport whichever you prefer but if you are choosing laravel only for api purpose or only for serving apis then in that case i will suggest to go with lumen why because lumen it's very slick super light version variable and it will increase your response time when i say response time increase means not the delay but more okay it's not the correct word to put it but it will reduce your response time and it will be more faster actually so in that case lumen will increase your performance while for laravel the main problem here is the framework is kind of heavy and i say hey there are several files or several things getting loaded on each request so in that case for api even though the response time is not that visible or may may be visible in certain cases but it is good to have laravel apis when you have a laravel project because in that case you already have something there and you just need something to serve api and you can just integrate in laravel now another thing is if you're using lumen you cannot use sanctum or password because these are laravel packages and for human you have to use different api like it has its own authentication which is token based again so there are pros and cons but in this video we are gonna consider that we already have an application so last time i created this document editor i'll bring up the code so this editor this is react native code here so this editor was built in view where you can import document and just edit it if you haven't checked the video please do check that as well so [Music] we will just add things in this video sorry this project and then we will continue forwarding okay so let's go back over here i have already installed like as this already installed narrower project so in this we just need to install phantom because sanctum is an extremely amazing package if you are dealing with api authentication authorization or api tokens in laravel like super amazing lightweight package passport on the other hand is for oauth authentication or what that stuff which might get complicated so if you want something super easy solution but a robust solution sanctum is a good option forward now in this as we are using mobile app so spa authentication won't work for us but installation will definitely work so we just need to install with this command so i have already installed it as i said so once i once you install it uh i'm going to react native again we'll go there we'll go there so here uh composer.js and there so we have sanctum so once you have installed sanctum you should see something like this after that you need to go to kernel.php and here you need to in this line you should have it something like this and commented in the api middleware groups you just have to sorry commented you have to just uncomment it okay once it is uncommented then you go back we can go back again over here publish the assets with this command just copy paste this command in your command line and then just migrate the database so in our database we have the users table and this personal access token table so this table over here which store tokens for each user these tokens we will use to make sure that the user is a proper or the request is an authenticated request or a proper request so let's begin with our code now so if i let's set up the backend first then we'll come back to react native considerations as well because there are certain considerations to be done in react native as well now so we will go here we have a user controller which i just created with php artisan make controller user controller in this uh so in the previous video i dumped all the control code in the controller which is just a short code but in this case we will create a service and i will tell you how to connect a service so that you can reuse the code and we will see how to reduce our controller code so first thing we will need is a functions so first function is public function register then it will take the request option and then the other function would be login so public function login request object again once this is done let's go to helper here and oops create a new file so i'm going to say user service dot php let's put in the code so we'll start with php and then we will give a namespace so this will be app helper oops so this namespace is just to identify this file when we import it somewhere okay once this is done we will have class user service and then we will take two variables so now we are doing login and registration using email password so we'll just take that public dollar email and download password now you can use laravel's form request to validate user but when it comes to mobile if you want to customize your messages or something like that or if you want you have your custom login sorry custom validation in that case i'll tell you how to do it so here we will take a function public function okay we'll first create a constructor construct construct yeah now this thing will take our email and password which we will pass from our controller so let's write that so here will be distort email equal to email and this dot password oops this password equal to password okay now this is done let's create validation functions public function dot a variety input okay now here we will take a variable dollar validator and now we need to create a validation so we are going to say validator make and now this we just import foreign so over here now this make function takes three parameters one is the key value pair of array of input second is the rules which is again an array key values are added and thirds is the messages the third field is optional but the first two are mandatory so here we will do something like this and add it so this would be value pairs for email this email and password this password okay after this we go down over here and now we write our rules so this one our input as a first parameter now our rules are right our rules will be key value pair again so when i write here email and give an arrow and then the rules so this means this email corresponds to this email input okay or in other words this rule correspond to this thing so this and this should be same so here we write required because we want our email to be required then it should follow some standard so rfcc comma dns to make sure that our email oops it's correctly formatted and it's according to standards next we just need to make sure that the user is not doing a double entry so unique users now a unique is a validator and users is the table now if we don't provide uh any column over here so what it will do is it will go to users table search for email and if it will check if the email already exists then we have password same as uh email required string and we have to make sure that the password is minimum eight characters and this one comes with laravel's new version uh it comes from rules so password it's uh it is somewhat 8.50 or something above or if you're using laravel so you have password validators where you can validate password for uppercase lowercase all those things length everything so once we have this we'll save this so not save this go to semicolon and then say if dollar validator now if this validation fails this will be a function if this fails then we return an array you will come to know why we are returning an array with status as false and message just as dollar validator messages uh meditator messages yeah then else if everything is okay we will do the return status as true that's perfect now after validation let's create a register function so i'm here when i write public function register and this is gonna take so first we'll validate so we'll validate with this validate input then we will check if dollar validate has status so that means there was a validation error we just return the validate so that this can be sent to our server uh react native application else we will say here if everything is great perfect then we will create a user say dollar user equal to user create with email as dollar email and no no not email us dollar email but actually this which should be this email and password password yep now here we need to hash the password before we put it else it will go as a plain string plain text and we don't want a plain text password so let's say hash make this password perfect now we'll just import this hash class so it will be somewhere here it's a facade actually which is a class again and then once we have the user now we have to give a token or generate a token for that user so i'll go back over here and now we will go to sanctum and here we will go to mobile application issuing api tokens now if you see we created a user so it's a registration so we need to create a user and once we the user is created we just have to create a token over here and return that plain text token so that now what we will do is uh okay let's see what we can do here right let's do this so let's go over here we'll say dollar token equal to user create token okay and to create a token you need to make sure on your user dot php you have added this has api tokens right okay this is a thread that you are adding it as you won't be able to create okay so we have created a token which goes over here again and okay let's give a device name so we'll pass a device name over here device name let's give a device name we want a plain text token okay is it plain text token yeah plain text token perfect and then here we will say return as status everything was true so everything went well and broken [Music] now the thing here is if we go okay we need to call this again here so we're just going to say dollar response so let's finish this and then we'll go to the url set response equal to user service so there is a shorthand way to do this you do something like this new user service then you pass here dollar request email and dollar request password and then of this we want a function which is register and here we will pass our device name which we will pass from our react native okay then we just return the response that's json response perfect okay so what is this doing it's calling so we'll just include this class it's a user service input class here so user service when we pass this parameters it will go to the constructor and put this in our public private parameters then we call the register function in the user service which is this one with the device name passing inside it and that's good to go so we save this and next thing we need to do now we have two options we can have our register route in the web.php or we can have it in api.php okay now the problem with web.php is that our url is actually the request is going to be made from the mobile side okay so we have to first make a request to sanctum which would be nothing but uh on our server only there will be sanctum csrf cookie url which will be automatically generated once you install sanctum and publish the the files once you do it now there will be a double request so first to get the uh [Music] cookie and then attach it on your next request to the register request of your axios now the problem here is you can have this double request but you can have a more secure way of dealing with your application okay the other way is to use api.php route where register will be a public route and you can straightaway make a request to register and then you don't have to make a request to send a cookie or something what not why because web.php routes they follow the session card well api.php they follow the token card so if anything is public here as there won't be any problem of csrf or session mismatch what not so it will work here but for web.php you put it as a public route here you need to make sure that you are passing the xsrf token okay so we will put here as a public route post post register and we will have user controller that's class register so we want to target the register function of the user controller okay for this register route now if you see this middlewares of sanctum make sure that whatever routes are passed through this middleware they should have an api token but our register route don't have that middleware because before the person registered they won't have that token so we need to make sure that register and login are public routes in order for the user to receive a token okay now we'll go back over here and run our server so here i have to do php artisan sir let it run and then the next thing we need to do is go to our react native side so now let's switch to react native and then let me bring the terminal here yeah score as well now few considerations on react native site first thing i have installed this react native dot env package okay it's simply by doing npm install react native dot env okay once you install this you need to go to babelconfig.js in your project and add this line of plugins of module react native dot env don't worry you will you will find these steps on the react native.env uh package page auto github page so don't worry on this so in the plugins all you have to do is i have this module and next thing you need to do if you want to include dot env file just create a dot envy file in the root of your folder so it would be here in the root of your folder or in the root folder actually and then you can have your urls over here so in this case we have a base url for http localhost 888 000. now i have removed the firebase aspect so i just uncommented this line and here so i will tell you what exactly we did here okay so i tried this before and that's why i'm confidently saying that localhost 8000 won't work in this case definitely won't work why because we are making requests especially on ios we are making requests from our mobile or even if it's a simulator or which is running on your own device or it's your laptop as a sim as an emulator or simulator it will still throw an error of network when you go to localhost why because localhost it's kind of like only uh limited for your laptop ecosystem while your mobile cannot access that localhost ecosystem okay so to make it connect we need to expose your local host on ngrok or using ngrok or something equivalent service and you need to make sure your service you're serving this on https for ios okay once you serve this one https using ngrow your everything here will work fine okay so let's try this out so for this i need to first start and block so let me bring and drop over here so if you haven't installed and grab please to install it and then after you install in the nbc folder you just need to type in grock http http and the url that i want to serve publicly or over the internet so in this case i want to serve local sorry 127. 0 0.1 colon 8000 okay we hit enter and it will open our local host on this address okay so let's copy this address so let's do enter and let's go and paste it in our dot env file over here now you will see that this https address and this one oh where is it yeah here this one they are different because ngrok will create a new url on each instance if you are using a free version so if you want a static url you need to pay for it so now we will just use this one over here okay now how to include your env variables it's very simple so first thing you need to do so i have also installed axios by the way so make sure you have installed that as well so the first thing here you need to do is import then from this you need to import this base url so i'm going to say base url this url and i want to import it from a react native dot env okay but actually not this actually you have to install emp because the react native dot inv is the old version but the latest version you have to include it from android envy okay now once you have this base url you can use it in your project or component wherever you like now the problem here is why we are doing it like this it's actually not a problem but it's actually a solution of our problem why we are doing it like this because react native by default don't have the concept of global variables like env files or something like that but to make it work like an or and give it some environment variable we are using react native.env which will make sure that these dot enb file variables will be usable as an environment variables in other components or screens now we have this base url so we just include it over here so i'm just gonna remove it from here with tactics like this and here i'm gonna say dollar base url okay so this will make requests to whatever this url is forward slash api forwards that's registered now if you see this api is coming because we have our route here in api.php and this will be served on your url forward slash api and forward slash register so okay we are all good till here now now let's serve this project so what we are going to do in our react native command line we will say npm oops and pm run start till it starts i'm gonna okay it's already started so i'm gonna go and start our app power all right so we have our app here now let's go to register and what we will do is uh let's see if we are consoling our messages so if i go to register.js and yeah we are consoling our messages so let's try to open the console over here and our a power over here and let's make a request yeah yeah let's make a register request and it says okay we need to have something so let's type some random string here and let's see what we get request failed with status code 500 okay let's see what wrongly we did in laravel so if we go to storage app not tap actually here laravel logs so we have a log over here which says validate yes again another so user service validator validate validate here so this should be validated perfect now let's try again over here let's go to our react native request and we have a validation error so now the problem here is that the field is required so let's see if our data is passing correctly so if i go over here we yes we haven't passed the data so which is okay so let's now first fix the validation steps so here we have error message and success message now what i'm gonna do instead of error message being taken as a string i'm gonna modify it to an object which will have email message as a blank and which will have password message as blank then what i'm gonna do here is okay so here i'm just gonna copy this one and what we could do is pass props to our form to display that error inside each input field okay so what i'm going to do i'm going to say error not not again the view style so error equal to error message okay and then inside our form.js here we can have that prop so we have on submit we can have error and then [Music] inside each form group we can paste this line and all we have to say here is so we need to import this text and all we have to say here is if error message dot email then display error message of email else error message dot password and this not else but if and this will be password let's format it so it looks good so i'm using pretty for formatter so let's save this and let's go back so [Music] okay now this thing over here inside form they didn't finish something else okay so here instead of error message we have to do error because our prop is error and rpsi perfect now let's go back over here let's see if we are doing everything great perfect now let's go to register back again and we are passing this error message which is coming from here which is okay so far so [Music] error email this will be error email this oh wait wait wait i guess i've got the problem you don't need this over here yes why is this here actually okay that wasn't needed there but yes that might be the issue so if we let's see again so error email error password and error email okay do something like this and this should work oh now this this one here refresh and it worked all right so we have our thing up and running let's bring it here let's go back over here and let's go to console again to check everything is running well so let's go to register so we need to open this and let's try registers okay this is good let's try random stuffs and register and we get this object this object we have to display on our side so what we are going to do okay so we have this message and messages is an object so what we have to do here is go to register and here inside register once we have the data so we just need to check if response dot data dot status now this status here is if it's false then we cannot do anything so if this is true we do here or show the error in the else part so let's say here if there was an error so we will say set error and inside that set error we are going to sorry error email will be what is that so that will be our uh okay let me go back over here so we have to go in the email array and that's the zeroth index of it so email and the first yeah error of an email so messages so what i'm going to do is i'll do response.data.messages so response dot theta dot messages dot email actually it's message i guess where was it messages its messages on your email and in this email the zeroed index of that id then you will have a password error password error password it will be same but for possible let's go here and this to password let's see this works so what i'm going to do i'll go in the uh our app is here actually so let's register and we have email is required password went over there we can put it above the password so that's wrong position of password error yeah it went inside below the form button that's not the right thing we have to put it here okay that's great now next thing we have to do here is go back again and in our register let's pass our data so here with post we pass email as email password as password okay now this goes here and then let's try again so we go over here and we so register it says email must be a valid address now let's put password as eight character and let's see what we get register okay it just shows me the password okay let's see what we get here in the error so i'm just gonna put this over here in the console let's go back here undefined is not an object and we get this because of this password [Music] and then all we have to do is register still sharing undefined is not an object so this is this is definitely very undefined so we okay what we need to do here is we need to make sure that there is an error this then it will work so you just need to make sure that there are errors for these two if we go back again over here register and it works so we go back over here now i've just included password of eight character because of that secure entry it's not visible but if you put register it works and here all i have to do is just put an email so render it example.com [Music] just return and register so once we register we get the email must be a valid email address okay because example.com is not there so we need to let's do medinator.com register request failed with status code 500 that's perfect it's a model so let's import that and okay this will fail because this device name will go as a blank string because that request don't have that device name but obvious so let's pass the device the management so let's first save this and we have to do expo device because we are using expo so that's proven cons of using expo because expo and i just read yesterday that it cannot have access to your native modules so that's uh this might be a problem so that's why we need to go with this approach so let's paste it over here and once this is if this is installed we just have to get this one and there is this device that is brand and then there is a manufacturer there's model name so we'll go with the model name and yeah let's go with the model name and then we will go forward so what i'm going to do is i'm going to use this model name so let's go over here and see okay let's see if it's installed okay so we'll just do npm run start and here we will take import uh star as device from expo device perfect and then once we have this we pass our device name over here as device name to be device dot model name okay so let's go back again over here and see we are taking the same thing so that's coming over here yeah device name request device correct now let's try our app so let's go over here and also we need to add a success message so in our register when everything is set perfectly so we will go here and we will say set error and we will just copy this it will make it blank first back to normal and it's also back to normal like this and then here we will say set success as registrations successful perfect now let's go to our app if it's still up no we need to restart it again okay our app is up and running so register is here let's register and oh the device is disconnected from the metro server so starting project oh okay it's still starting so why is it taking so long so let's see okay let's start it again oh it was going well i terminated it so it's okay let's start it again so here we will do pm1 start and once it is started the next thing we have to do is reload the app then go back to our app over here let it reload new update available that's fine so it will push forward and there so now all the oops [Music] okay so next thing we have to do is go to register type in our email dot com password as one two three four five six seven eight nine register okay request failed with 500 let's see what's wrong if we go to our user controller laravel log and let's go all the way down and let's see what's the problem so the problem is [Music] general error field name oh yes we didn't put the name in our users table so there is our user controller we have user service but we didn't say anything for the name so let's put the name as well over here we can see [Music] name ads we could we can take that name actually let's take let's take it let's take the name actually name uh dollar request not dollar request but desktop name and our name will be here we'll just copy this part because of firebase we didn't take the name at that time but now as we have control under us so we can just put a name over here so let's do that quickly okay and let's go to our react native form so in the register form.js so that's why we are reusing the component and we just have to change at one place and it's good to go so here i can do something like this like this then i have to take here can remove this and take here name set name and use state of blank this will be for error name so let's take that error name name then error name error name then name will be name so this is done then we just need to go to the submit event so that will be in our register so we have to pass the name as well which was coming from a form so when we submit this so we should have that handle submit so on subnet it's going all the way here and it should go with the name as well then inside here we have name then and then so here we also pass the name name as name come here then we also do the same thing for error name [Music] here we do name name whatever [Music] [Music] and here we have our name perfect so this is set now we go back again to wrap and we should have the error name so here yes we have name not error name now let's put the names i'm going to add it there okay it's not allowing to me listen okay let's see what's the problem so inside of a form we have set name and this should be setting in yep it should work now so let's go back over here profit there then [Music] it's just a random address guys so password is random password and register okay so registration didn't went through let's see what's now everything 500 error so if we go again over here to the laravel logs let's see the error so it says too few arguments to come oh yes too much rush too much rush so maybe i forgot to pass in here dollar request me perfect register and the registration successful is shown over here now let's see in our so users first we have our registration personal access token so we have the device name and all those stuffs okay everything is set now let's try to make a login route so login is pretty simple so here all we have to do is go to user controller then here we have to do something like uh [Music] same thing we'll just copy paste this actually here we copy paste this instead of register we do login we don't need name in this case so we are going to pass like a blank value here so this would be blank like this and let's keep this as a last value so that can keep this value as optional so here i'm going to say dollar name equal to black and then here i'm just going to switch this to the last one over here like this and then use a service that's okay actually i could take a payload but that's fine so email goes over here email password login and this time we don't need a device name so that's fine and here in the user service we just say public function login same logic actually nothing different just validate it if it's true go to login if not just throw the error so here we do instead of user create we just do something like okay so we find a user so we find user find not user find user where email is this email is this whatever it is and we find the first one okay rest we don't need it so you can create a new token if you want on every login that's fine but if you want to do it like one time thing you can just save the token or actually let's do it let's create a token every time we do a login as well so this will come for the user who is authenticated so first thing we need to authenticate the user so here i'm gonna say if so if this user is not found then i'm gonna say this one not this one actually this uh okay now this thing is gonna throw an error because our user already exists so this validation we cannot reuse it okay all right so what i'm gonna do here is way around i'm gonna say log auth email and okay this is gonna make it complicated so what we can do is simply uh okay really good to okay okay we need to write separate validation for register now so in this case we have to do validate input and instead of validate input we have to do validate uh yeah so what we could do is so validate a user if it's login right register okay this is causing a bit of complication so we can just uh okay let's first copy paste this code and let's see how we can reuse it so validate input login the register is definitely a way to reuse it but we'll see that so email password password that's google nexus but it's just for one keyboard we have to do this all again so what i what i'm gonna do is okay and i said there is a way to reuse it so here i'm going to say validate input just remove this and i'm going to pass a flag auth validation which by default will be false and here i'm going to say over here dollar validation rule so if this is dollar off then this will be exists user else it's going to be oops unique user users perfect and then simply paste it over here dollar validation room perfect so if it's for auth validation let's see if the user exists if it's not then you need users so that's done next thing we need to do here we have today no we don't have to do this one and here we have to do two so it's for validating for the user and once the user is found we are going to do the password check we cannot do all the login because that's for session guide and for web routes but for api routes you have to do it with me sorry hash check so i'm gonna do if hash check so oops something went wrong okay so here we want the check and here we want to see the user sorry not user password with this password with our user password now this thing if it went through if it goes through then we send this if it doesn't goes to then we say this but as an error so here we do false token we just remove it and it's messages so because we are passing messages here we do uh okay so here we have to do something like password was incorrect password okay and this should go as an object so what we could do is we can either stringify both strings and then parse it over there on the front-end side or let's pass it as an object actually so okay let's do okay let's see if this goes through it should go through but let's see so now let's go to our okay we have to just do this all right so let's save this let's go over here yes this is login and we have to modify the login code so we go to uh where is that so home.js is our login login screen so here just go to register uh copy this stuff small changes here and there that will do not a problem so here we just paste it as it is and okay as [Music] we paste it with else actually and then we do login name is not required device not required this email and password is enough so these two goes and error you said the error if not let me just set the error for email message okay that's fine this is not required this will be blank always because we won't have error name so email message password message and what i am gonna do here is i'm gonna just so if it's a sign of form then i'm gonna hide that name field so inside my form here if it's a signup form over here then i want to hide this so how can i hide this one is by doing something like this so i'm going to do here [Music] sign up if this is sign up and then and then push this inside over here perfect [Music] like this so that's done the next thing we need to do is uh over here on submit we are passing name but name is always okay that's fine so this should be all good let's go to our app so we have our email and password so here i'm going to see okay i wanted to change is here it should be logged in successfully and our login route on our this thing so where is that api.php we need a login route okay perfect so let's go over here let's see without any error if we can make it so enter it made the later dot com one two three four five six seven eight nine yes uh account five oh we didn't import axios so let's go here and do import xcos from axios perfect and let's go back over here let's try again login base url we didn't import that as well so import base url wrong react native.ed let's try again go to rap dismiss this it says enable two oh sorry it's the same mistake i did here you should be activated now it should work we go back here login yay we have a password error see some error but we don't know what that error is so let's see if we are consoling it so it says incorrect password so it's an object coming over here so you just have to target the password of it so in this uh this time we are just saying that [Music] if it's password we just throw the error for password and let's see this might conflict actually because i'll tell you why it will conflict okay login incorrect password that's correct but it will conflict because here uh in our code we also have error for our this thing uh email as well so what we could do here is we can just pass this as an array of array like this one more like actually not area of array but more like this to be array of messages like this then it will work correctly now if i go back again [Music] over here now i can do a 0 so now this time it will show me the exact message so login yes it's going well now let's remove that and make it one two three four five six seven eight return and login okay what was my password let me see what's there incorrect password again right okay let's register again so right now let's do it with [Music] the attribute mediator.com that was my that should be supposed to be my name so i'll put it here so here aditya password i'm gonna just put password as one two three four five six seven eight nine okay that's my password registered okay and here and now here i'm gonna say death rate [Music] and my password is one two three four five six seven eight okay okay wow okay why is it going wrong let's see uh right so we have an incorrect password here so that means this is not going well so it says okay so this password so hash check this password oh yes uh wait wait so this password and that password is coming from requesting okay let's see what we get over here so i'm gonna do info and this password okay and let's remove this from here let me press login from my side so we get one two three four five six seven eight okay now [Music] so if this is coming over here that means it's not matching with this one so we have password here okay let's try it one two three four five six seven eight and nine so let's do one two three four five six seven eight nine and let's go over here to see again request paid with code okay that means the password was going to okay device name undefined variable device name so we didn't pass the device name so let's pass the device name from here as well so that would be device name then device name the dollar request device you can validate this device name against the list of devices or this string and all other validation but uh currently i'm not doing that so here same i don't know why but i'm repeating a code this code a lot or when i just try and login like i'm doing the same thing again and again and it's kind of not the right way to do it there must be a better way to do this so currently we'll just go like this so log in and we put it where is that uh yeah here just put it here like this save it go back over here to see if everything goes well and we have a login successful message yay let's see if we have a message open here and we have a token here as well yay perfect so that's all from me like hope you enjoyed this video and hope you like this video so if you like this video please hit the thumbs up button and if you feel this video is worth sharing with your network please share with your network and also if you haven't subscribed to my channel please do subscribe to my channel so that's all from me till the next time goodbye

Channel: WebDevWithArtisan

Views: 10,182

Keywords: react native, laravel, expo, login and registration, sanctum

Id: bS-593uukio

Length: 60min 33sec (3633 seconds)

Published: Tue Sep 28 2021