Whats new in Laravel 7 - Sanctum/Airlock Authentication in Reactjs SPA on Server

[Music] hello and welcome to pit fumes this is level sanctum tutorial with react.js on the server so what we are going to do firstly we will install the level sanctum then we will install the level you my package on that then complete the login on local that means on the system here then we will upload level and react on the server but I'm not going to give every step to upload it because this itself is a long process so I will skip most of the part but after that the important thing is that how the level sanctum to be configured on the server this is very important step so you need to be with me till the end of the video so that we can really complete this ok so let's see what I have already done I have created the react application by using this create react app Maya so I have created a sanctum name app so here is the react and in this react I have already installed Axios so you can see accuses there cool then I have this level here and I have fresh installation of level seven and then I have configured the database with the sanctum database on my local so what we can do we can just quickly get started with this level sanctum so on this documentation of level you can see official package its sanctum now because it was before laravel airlock so let's call it sanctum and with which is actually so let's install this sanctum so I will say quickly composer installed level sanctum we also need to install larval UI package so that we will have the login information so all the authentication of login so I will say level UI package and maybe I can copy it from here UI package so installing yeah here we have larval UI package so now it is installed the sanctum is installed so in a new tab I can install the UI so this sanctum is turn so let's publish the configuration for sanctum and yeah it's published on config and sanctum is here we can define the domain and this will be very useful on the server and we need to Kate be careful about these things then it has also created the migration so here we have the migration ok so next what we need to do we need to run them my which person migrate command so I'll I already done that so that's why it's not going to migrate anything I'm going to actually publish the controller's only so if I say PHP artisan only PHP artisan you can see we can have a UI controller which scaffold the authentication controllers so here on our app HTTP controllers you can see we don't have any controller related to login and authentication so I can say PHP artisan UI : controllers and hit enter yeah now you can see we have this controllers this actually we need and that's why because we have done that we also have on the web dot PHP we have not done that so I think we need to use UI ought also so we can do UI earth and then we could have this auth routes also that means now we can have the HP Edison route list all the login and register routes are available very nice so what i did on react part is that i have added the tailwind CDN file from this tailwind CSS and here we have and that is because i want to have a login page which should look good so i have created these two input box one for email and one for a password ends submit button so you can see it looks like this now what we need to do we need to start the level sanctum so first we need to add this middleware also so go to app HTTP kernel and on this api part let's this and then save it we don't have to do anything else that's done and next we are on we are going to authenticate using the SPI authentication not using any kind of token that means now what we need to do we need to use this Axios so this is very important to use default with credential as true on Axios so here we are we are and this forms submits so when this form submits we have we have a on submit function so on submit function we are saying prevent default and then we will say axis default with credential true so import Axios from axis and then here we can say Axios dot and what we need to call first we need to call this sanctums CSRF cookies this is very important first you need to set the cookies so if you do this and if I say log of the response and then if I go here on the react application and what I will do I will just click login so what I can show you is on this application you can see we don't have any cookies here so now if I click on login first it's a 4 0 4 because it's requesting on the localhost 3000 so actually we need to firstly start the server on laravel and then make it HTTP equal and colon localhost colon 8080 srf cookies good this means what I will get here if I click on login now we have a error this error is because of the course policy to solve this problem we can just go to lateral search for course file or the file which is inside the config and course and here first you need to define the route you are trying to access and the route is sanctum slash CSRF cookie this one so I can paste this route also later we also going to access this /login route so let's add that inside the path so I am allowing all the origins so not a problem but this is very important that you need to make this support credentials true so you can see we are saying that support credentials and on the axis we are sending data with credentials that has to match so here we have true so here we should see true that's good and this means now if I go and if I hit login we are getting the response from the latter well that means it is now successful with the first step first step is this one that this one this step we have done now we need to perform the login after completing the CSRF cookies and this is vibe because application tab we should see we have two new cookies related to the level only ok so now we need to perform the login so it's very easy because we have axials we can say post and login on HTTP colon colon localhost colon 8080 top ok now if I go and if I try to hit login this time you can see it says unprocess eval entity and which means it says email and password field are required we are able to hit the login round that's very very important thing and let's quickly use the tinker to create a new user so that I can log in with the user so it has created with this email ID and password will be password so now let's use this and then use password and now if I try to hit enter still it says some problem because we are not sending the email and password from our Axios so because every input field has on change value which is going to handle the change here also and here also and handle change is setting the state we can easily provide the state here which will actually send email and the password okay once more we have this and then password hit login and now you can see we are successfully logged in and we don't have any error that's the thing we need and they have successfully logged in without using any kind of token it just everything with this level so this is very very important thing to keep in mind that you should configure this course directory which is this one this path and the credential these two are extremely important when you are setting it but now what we need we need to follow the next step up load level and react on the server and complete the login on the server this is actually we needed for that what I have done I have created two domain or actually sub domain called sanctum dot bit fumes dot home and calm and then sanctum API dot bit films.com on this API sanctum API I will upload the level and on this sanctum sub domain I will upload the react and then we will see how we can communicate between these two domains and now I have deployed the react and the level application on the server with these domain names so you can see the sanctum dot bit films.com is holding this react and this sanctum - epi dot between short comments holding this level application and now I have already added a new user here on the server with the use of tinker and the user hasn't have the this email but before logging into the user let's see whether this is working or not so one more thing I have already done is I added this dot env file inside this react with this react under school app under school API and a school URL so that I can change the URL on the server without changing it here on this actual so on this axis I just use this template literals so now let's go and hit login button so because it is on server localhost 8080 not available so let's first change this so on this react application we are on the build so on this let's open the door and we file which is having this localhost 8080 I the level is at this sanctum API dot bit films.com so this is the new URL on the server so sanctum API dot bit films.com so after this because we have changed the dot e and we need to say npm run build and now build is done quickly done so now if i refresh this page on the server sanctum dot becomes calm and hit login now you can see it says sanctum - API dot between dot-com slash login so first thing is you can see without doing anything I can easily interact with level but level it's not happy with these things it says CSRF token mismatch so here also you can see we have no cookies related to level it's having a problem directly with this CSRF mismatch so how we can solve this thing because we need to tell level that high level we are actually using this sanctum dot bit films.com as the domain now this happened because on our configuration of sanctum you can see a stateful domain we need to define witches are straight full domain so on the local it already has the localhost or 127.0.0.1 it already have that so that's why it's not given any error but on the production it's not localhost it's sanctum dot bit film.com so we need to create this env filled on the dot env file so go to the lateral part here we have and I will let's go from here so what CT www HTML laravel and then them dot E and V and here at the last what I will do I will say sanctum stateful domain is now provide the domain name which is sanctum dot bit films.com so it is the stateful domain that means from where you want the request to be stateful so that's why I am giving the react react domain so here we have sanctum dot bit films.com and let's save and quit and then let's dry here refresh this page on this react hit login it's still it says CSRF token mismatch so firstly it's having CSRF token mismatch so let's now go to the documentation and see what we are having here so we did this part now it says finally to ensure the application session cookie domain configuration and we are having really a problem with the session cookie because cookies are not able to set here so that's why we need to provide the session configuration domain as dot root domain actually dot and then the root domain so see this so in our case it will be dot and vitrines dot-com so how we can set that also again on this session dot PHP file once inside the configuration we have this domain here we have the domain and it's null for local but we want this to be with the dot bit films.com on the server so one more configuration we need to put on the server which is this one so now we need to say dot bit films.com very easy now quit and save let's now try it will going to work I think so now let's write login and this time it says unprocess eval entity unpossible and he means it's hitting the and it says email and password field are required and let's grab the login the only user I have on the server which is this one so password is password so password hit login and you can see no error successful locked in application having these cookies and this is how you need to make sure you provide these two configuration on otome file the sanctum stateful domain and session domain to make things work on the server so I'm sure you got the point how you need to use a level sanctum to authenticate user with the how do you think any kind of token so if you liked this episode please hit thumbs up share this video with your friends so that everyone know how you can use the sanctum on the server and you need to follow between us on Facebook Twitter Instagram LinkedIn we will meet in the next episode tonight goodbye

Channel: Bitfumes

Views: 10,515

Rating: 4.8426967 out of 5

Keywords: laravel 7 tutorial, laravel 7 tutorial for beginners step by step, new in laravel 7, new in laravel, what's new in laravel 7, what's new in laravel 7.0, laravel 7 project, laravel 7 authentication, laravel airlock, laravel 7 airlock, laravel 7 stub, laravel 7, airlock authentication, laravel sanctum, sanctum authentication, laravel 7 Sanctum, laravel sanctum reactjs, sanctum reactjs, sanctum spa reactjs, airlock reactjs, airlock spa reactjs, laravel sanctum domain

Id: dcwtEE3Nphc

Length: 16min 31sec (991 seconds)

Published: Sat Mar 21 2020