Transcripts
1. Introduction to The Course: and welcome back to my new course. So in these courts will learn how to make on rest ful of quantification system using re exists. And a lot of So by the end of this course, we learn how to make a really process. The hometown navigators were joyous component like this. You will learn how to make a resistor system like this. You resisted it successfully. No, if we profess your looked in. So now we're trying to look go toe in toe, Logan or resistor. We can't go because we already, Logan. So let's try soul. Okay, now it's tactless. Deal it you case in the lead for now. And let's try to Logan, read the image that will just resistor with 23456 You're looked in successfully. Okay, so let's refresh so and they will know
2. Installing Reactjs : and welcome to my new course. So in this course, we're gonna learn how to make a rest for a P I or identification system using Lara of a lot of a passport. And we at Jess. So first of all, I make a folder called a T i o. We're gonna I will put it to get her for you. So first of all, we're gonna set up our react project to set up a reactor project Trust. Open a terminal in the folder. Let's type nt x create react. Uh, and the ex create react up and the name off the application you want. I will name its A PR out for intent or don't Ricketson front enter. So we're wait until his Penis. So a za court editor amusing VF qod You can don't know it by typing V s code by Microsoft. We have our very cool extensions. I will show you in a minute. So our front and project don't know the half finished. No, let's often it. Let's go to visual studio code. So react is our fault and library. It's a single place application. I will show you there is one single place that render our whole application. So in our index dot html, we're under just one def called idee route Idea, which in our fourth here we're well, we will work the whole time in the fourth door in door dress. We have react dorm don't render. That's the function that render to us all the component that we're going to make in our application documents about to get element of my idea. This is a JavaScript expression that point in on I D. And the idea is in public index index as chairman four on your ah readdressed project, just going terminal type in PM start. It's it's noshing on local host. Three doesn't it's white. So this is our react up. So it its source slash abdo dress and save to really let's give it a test source upto jf. And here we have a diff Let's remove all this. Okay, you need to know that all elements need to be wrapped into a death or if a diff or react fragment also you later diff. If we remove the death, it's going to show us on air. Oh, see this? The devil is type each one and no war. The typical Lord. Hello. So in the next lecture, I will show you how to create enough are component navigate between Logan and register and home. I learned we create a Logan component resistor component on the home. Come porridge. So stay tuned.
3. Intro To Components : combat guys. So in this video, I'm gonna teach you what is really a component. So imagine this is a world. Okay? This is a broad we have in what you have in a brother. We have a nevermore product, products component, contacts component serves component. So every every thanks is a component. Let's imagine this network is a This is enough. So we'll call this a component. We make it in. Ah, single five that we called components. This is a search search components. Okay, so we have ah whole component that have this second component as a child. And the second component has the fourth component as a child. So And the train, this is called a child. And this a marriage. Okay, destroyed this a pair. So this is ah, the components in a natural. No. Let's work on our project here on UPD. Audrey s We'll go next. All our components will be in up to dress. So this is what we have make in the previous video. Let's make now enough for components. Okay, let's make enough work on college. So to make another component has to go into source, make a new folder. Let's call it components. Components enter and make a new fight. Call it the first letter Must be in uppercase. Remember this first later in uppercase. Never bore Dutch. You see someone do extension? Osama script I prefer do. Which is a s X. Okay. I have Ah, an extension called which for two. Cool. I have the stuff. Nine. Ah, it's a Nimet. Its auto complete. And I have Aria sa seven react readers. It's ah on auto completion also. Why? To create a class just it r r c e react close export in Turkey. And it generated tow us or so I will work with would strap just to make think fest. No, I will work with material design would stop. Okay. Ah, well, drop this is us. And get a bit Okay. That's not the official with Rob. Get started. Let's stick to see the end. F f good public index. Best it it. Okay, Enter. Burst it. So Ah, as a youth off the four matter is prettier. It's also an extension called prettier. Let me show it. Great year. Okay. Put your coat for matter. Okay, go. Go to settings sitting thieve, uh, or for much own safe in a minute. Okay. To form our horses. Now, let's go to our never component Goto type Neff board steak. Of course. Let's check this one. Okay. A copy. Best are not need is one this deserve lead one. Okay, Kourtney, death. Okay, that's good. Align. Need is the hole lists. Make it Logan. Logan. Look. And And roses, we're a gesture, okay? No, no, we want to. It's nothing shown in our reacts up. See? It's nothing. So But if you want to display our component in our page, as I told you, go toe up there dressed who? We need toe. Put it in up to three. As S T. M l components. Okay. What type? Never bar here. We have auto import from slash components now for Okay, we're gonna import no or, ah, components it imported in our after jails where you don't need toe. Make it like this. It's force. Okay, this expression is force. This is our fourth express tape. It like this. Okay, lets you know. So this is our nevermore just necid in our application. So in the next video, we'll show we want to navigate in resistor Logan using reactor outer dome. So stay tuned
4. introduction to React Router : green guys. So in the previous video, we talk about the components. How? Witness him in our application. So in this video, I will talk to you about the reactor out. Okay. If we Ah, click on register, we need to render our resistor application. If you click on Logan. No bar on home. Okay, so this is not Make it with normal. Ask em, like, now for plus a through F we type slash logging flash. That's not gonna work. So to make it work, we need to install react reactor after dough. Okay? Type NPM install. Did he act? Router, don't. This is our pockets. Dust will make us navigate in our application. OK, let's wait until his Penis aren't anything ist okay, You can find the document even off react. Roger in. Ah, the tape react rotor The first link. Sorry. The first link. Ok, NPM install. Ah, here hotel Make our react up. NPM install reactor after dome and you need to import some stuff. I was okay. Let's see. So the buckeyes had just finished. So let's go to our up the dresses we need to import Let me show you when it import brother a router. Fluids. Oh, route and link. Okay, let's take this. It's a copy and passes our best. So old element that we have in our up must be erupt in route. OK, this is the first to navigate between the Phil. Let's make router. Okay, take this copy like no all our element of ah wrapped into Roger. So the second thing you want to make is create a path. Okay. About first let's type switch. So, in this place where we want toe display our component ease in this place. OK, switch here. Let's make our components. Okay. So Ah, the first thing we need is route. OK? Rouch thought it broach are out is a component. Good. That tick as bro? Yeah, so the first. But that watch is a Logan. Okay, Logan Logan, let's make this. And the 2nd 1 that we want is a register, and the 3rd 1 is home. Okay, this'll processor on this. Let's make it empty looking for her. Let's make it empty and toe specified. It's so exact. Exact. So no, this But we need to link this part to the to the Logan component. Okay, so let's create a Logan component, Logan dot Dre Ethics. This is ah, Logan component. Other throw you in the previous video. Just type at sea. And OK, let's start, um, on Logan. Okay, let's make a resistor components, You know, foil resistor dot j s sex. Create a close. And let's type on what resistance? It's nice. Now let's create a home component. Dot is eggs. Also, it's a class. Let's time I'm on home. Good school. Okay. So now there is a two method to link your component toe your path. Okay, The first is to type component here. Components, Okay, components and the name off the component. Okay. And the 2nd 1 is for a pit like the network. I like it. Enough. What tough type. Uh, Logan and import it. And that's older. Great. This make it decision register. Important on finally the whole Oh, so let's try. Let's try now. What? Okay, now water. I'm on home. Okay. Just start looking. Let's Logan, uh, we didn't set up a lot enough, Lord. Okay. Outside the 1st 20 to import. Let me show you a quick Well, let's remove this to show you that is working. So slash is oh, Okay, Flush. Logan, I'm on Logan and slash register. I'm on residents. Good. So it's to make our enough for work. Just import link, OK, import link from from, uh what, uh, Sodi. We are router, though. Okay, That's so now we don't We don't need a Uncle Doug. Just remove it and type link Nick and H, ref, the type two. Okay, true to flush. This is the point of true home awful in the Logan. Yes. Removed this very and other anchor tag type link. Okay, Nick. And this too. That's good to flush, Logan. And here, class just Nick is not the point. Let me see, Uh, a copy of it. So don't go to No, I'm on home. Um, on Logan. Oh, Ruth. So in the next sector, we're gonna create our logging components and our resistor components, so stay tuned
5. Creating Login and register Components: so in a private letter were learn how toe create direct route of rhythm to navigate between our components. So if you are wondering watches and it's Ah Orender Richard and we have, ah, in return some some HTML expression that it's called some JSX React work with J sex expressions. So Dre six stand for Jarvis Courage exam it so we can't write some html in in droves. Correct. That's an obvious thing. We can't type HTML expressions in the HTML. So we work with is a six. J six is ah ah in while it's compiling its render our ah javascript code into each human 06 helped us write some javascript into our html without making a script. A script, Doug. Okay, I don't need any type of correct, Doc. You type your ah reserves grift called into your issue. So this is ah, the ethics in a natural. So now let's make our Logan components. Okay, let's make it with would stop give. Let's so well. Ah, I want to show you that in dress X. We don't have class glove. We have a last name. Okay? Clustering the container. Fontaine with 50. That's all Some uh, bootstrap glasses. Okay. Would this mean with 50%? Okay, let's start. Give Dutch rule. Okay. What? To make a room. And if with Colon m d, it's type. So we want to one corner. Okay. In welcoming were worth a court. Give dot card div. This type. It's tree. Make a title. Last name, this card. Heather. Carving hair there. That. Let's name it. Uh, let's name it, uh, walk. Okay. No good. It's, you know, No, that's let's make it to be good. Type 12. Okay, that's good. Let's make a margin toe off. Three. Why? Off to order. That's so now let's take Dave card Body. Okay, in the card. What you gonna have before? Before? For great on. Finally, let's see. And finally, in the form we have a deal with card food. That's good. Okay, card. Future What we have. We have a button, uh, wrong me in to and the water is the bloke. That's me. Look, um bt end with color off success, it's That's good. Let's go to war, Jake. Inputs for for four. One group. Let's see input. Here we have some normal in porch. It's a form form mystic this one. Okay, that's good. Okay, well, I'm happy to be here on toe off guard. Future, it's Show us an error. Why? No missile. Cool. You need to close the in push. Okay. Input must be close looking component to work. Fine. Okay, so let's work on the religious component. Let's take the thing cool before. Okay? Comfortable city into resistor. Goingto No. What is his tour? Which please? It was Easter. Sorry, we have Ah, email and password. Okay, let's up a new one. Call it too. Type me me name. Okay, I fixed. Let's removed youth to internally Chiefs building. But Regester, that's good in the next look, for we will work on our abarca. Let's generate some 80 artists. Bring a lot of a passport and a lot of so stay tuned
6. Setting Up Laravel 12: and welcome back again. In the previous lectures, we will. We worked on our front and we make our novel component make our resistor our Logan using our front and library which sees react. I will push toe, get hurt discord for you if you are stuck on something. Okay, so in these electors we set up our back end. Sorry, our back and with a lot of So So it's Ah, stop. December 1st. Okay, so the first thing you need, it's to have PHP my sq it Okay, We need to have these students first. Let's work on a Macintosh. Okay? For use a Mac user, you need to install home brew. Okay. Homebrew did this one on Copy this comment and passes in your terminal. Okay, You will until ah, it's anti laziness. Then the second Think open your terminal type, bro. Install the beach. Okay, I already and solid, so I'm not gonna run it again, bro. Itself PHP and brew install my fuel. Okay, that's good. Death District moments will install PHP and my sequel and the certain you need to install composer. Okay, composer, go go on. Getting sources and Cokie dis comment. Okay? corporate into your terminal and could be off this one. So now let's move in tow. Ah ah! Windows Youth. So for Windows users is simple. Just click on download, click on download on around the set ups and its sinister. So when it's status Goto novel A lot of it. Documentation, boys. No, you need to go on. This is the recorder, which that you have if you want. I already have a court on. Ah, the basics off Lauraville. How to make a crowd create, read, update the late or using the data ways. I'm creating a to do list application. If you want it, just go check my last course. Okay, so in discourse, we work just on a p I a fortification system. Okay, Rest ful. Quantification system. Cool. The next step. Copy this. Common. Go on. Peace it for ah, Mark and user windows for okay. We have a true command of for creating a new lot of l product. Lauraville new and the name or this one. I don't have a disc. Amanda for Mark. I just use this one. Let's make this one. Okay. Open a terminal and basit. Okay, let's make it Ah, ap I Let's name. It's a P. I beckon. Okay, Slip enter. Excuse me, my English. I'm not having a good English. This is not my primary language. So I'm sorry if I am struggling with endless from let's wait until this finish. - So our back and project has addressed. Finished? No. Let's open our visual surgical foil open. I have back 80 I back in. OK, open. You can work on your front end and back end in the same project a lot of ah ah Come with that. Come with views of earth Me so well. Buckets there is ah view dependencies here you can insult on ah view or react or anything in the dependencies On work Ege on resources Javascript You will find your component in this section. Anyway, we want to make just a p I from the lot of so the for Just to run your ah, a lot of products type each be artisan. So I forgot something that you will really, really need for Ah, for Windows users. You need to windows and mark both You need to have exams. This is our server. When we have ah, the back end we'll have, Ah, the data vase and apart itself. You need to install this. Okay? I already install it. This is my example. Over. You can don't notice for Windows Re Lennox or Mark with Okay. We already have it here. Good. So our server just started on this link. That's open it open. I don't think they will open. Okay, this is our project. That's the, uh if you wonder where if the file is located, I'm so go in. Resource is okay. If youth were conducted li dot PHP on here is the link. Its trip. My name off. Sorry. Doing with my name. Okay. This this, this we're not gonna work on our front end here, so we don't need this. Okay? So, no, we just learned how to set up our project, our back and project in the previous lecture. We're going to set up our data days. Okay, So stay tuned.
7. Install Laravel Passport and create Database: again to this new electoral. So in deflector, we're gonna install our lot of a passport, not generic. Tow us our access token, and then we're gonna create our database. So the first thing go to a lot of a looking man, Jason type a lot of it. Passport type. A lot of it. Passports. OK, copy this. Command copy. Go Truth. E m d. Best. Okay, who is until this comment finished, he will upgrade and install our Lauraville lauraville passport. Phil, this just finished? No. Before we run this comment, okay? The SP artisan. My great. We need to set up our database. We can't run the migration just to go back to my previous listen on a lot of it and we'll understand. What's my great really mean? Okay, so, no, we need to set up our daughter is just open my example. I just told you in the previous video to this song exam for Mark or Windows User trapping my password. Okay, this is our self apart server. Let's click on stores all we don't need pro If gpd just Okay, run. That's good. No, let's type open. PHP my admin. This is the address connection refused. That's no stuffed in court. Okay, To access to your PHP my admin server type local holes or Ah, this address last he eats. Keep my admit. Okay, that's good. Okay, let's type new click on new. We create a new that a bit its name it FBI, FBI ought create. So, no, I will not create any table. Ok, let's leave it for no empty Go on your it's or ah, a lot of back and go to your boat e n v o k e N v No, you have your that obvious connection. My sequel, the host. Now we need to change that. That a reasoning. Okay, the death of his name. We call it F B I. Mark. Okay, it's easy to receive. Now let's run this comment. BHP artisan, my guage. Good. No, the migration is successfully. It's very fresh. We have ah, our tables. No. Okay. You that? No. Let's insult the next comment. Best tip. Okay, that's good on our user model. We need toe have used has a p. I took in a much safer. Okay, let's go with this one. Okay. Controversy. So the user modern is in up use. Okay, this is our users. Let's has a PR talking his ap. I took it and import this one. Okay, That's good for now. What? Okay. No, I need to go to our conflict or okay. Gothic conflict. Well, okay. His on the a p I driver, remove talking type bath portion. Okay. I think that's all good. Okay, that's all good for now. So the next thing we need, if to create our controller Okay, go to my previous course. If you want to learn the controllers, the models, the M V c. Okay, so now let's create a controller. PHP or Jason make controller the name of controller. Let's name it controller or comptroller does stuff resource. So we created our controller up each TCP controller or quantification control. So in the previous on the next lifter, we will work on our Logan function and register function so soon
8. Create Login And Register Functions : And so in the previous video, we forgot something. If on the authentication service provider, we forgot this policy and disrupt passport, so let's make it now. Ah, the old service provider is in. Ah, Well, this Oh, it up here provider or no? What? Service provider. Okay, so let's go be the stooling, Okay? I think this one it's this Look, Nordea's okay? Do someone it's committed or you You can't delete this one. And on comment this. Okay. And passport A routes. This one? No, it's all set up. So, no, let's work on our Logan and register sanctions on our each CCP. Where is controllers or quantification control? That's good. Let's ah, type. Also, public function roost would have a parameter request. All right. Request. Okay. No, we need to validate our that. Okay. First type request request of our lead. Each validates. Okay. What? We have a parameter? No, we have the name, the email and the passport. Okay, it's time. Name. Okay. It's required. Okay. It's required. Now the email. You mean it's also required, and it has to be an email. Okay. What's happening here? Required or start You made. It's so quiet. What's happening here. Let's go with the Let's copy this one. Okay. I already done it. Okay, let's go pay it. I don't know what's the problem here. Okay, That's so the name must be required. If the user didn't enter his name, it's sewn the name email. The name field is required. So the email must be required email. And it's an email. Its unique for a user. Okay, It's unique. The path forward. It's also required. And the minimum length off the password Air six characters. Okay, so, no, let's create the user, okay? Yeah. Type user. We need the important to you. Okay, so let's go. Also this one. I already done it before, and I will explain to you user is equal. User creates. This is an eloquent expression. So it's with us an error because we did it import up. It's less user. Okay. When it import the motor user. Dodge. Pete, I don't need this one phone. Okay. The name. Ah, the field name in our database. Name. Name. We're gonna fill it with Eric with Told me email request dutch email, the email that we will have in from the front end and the password hash does make. This is creeped. Our path war. So let's type Now I want to save it in our that I with just a computer. Okay, Safe. That's good. Now we want to Richard response with a token. So, Richard, first, let's create the talk. It. Okay, token. Equal user. I want to create a talker for a user. Use it. What? I have some source to anybody. Lost. You create token. Okay. We want to create a token for a youth. Create talk. I don't I don't think I write it like this brings time. Let's copy. Just a little too old This explained to okay? Use oak. That's so the token is user. It's for a user create for this user. Okay, that's we just created Create token uber email does. Now, Now it's the specific time. It's ah, no time. Okay, Richard response dot Rezone user. We're gonna have as a response a user and a token. A token is an axis toe. Okay, so, no, we need to go to the route. E p I. We need to create our A p I for this function. Okay. Make roach. Okay. Bulls flash register. Okay, on the function is Oh, I don't think it's a old control owner. Oh, my God. Controller I don't have I don't have for Saudi. I always lets it out of this world. It's all good on dysfunction called register. Okay, All set up now. So now let's create the Logan function. Okay, Public. Thanks, Logan Logan. It's also have a request type requests because estimated So it a quest. It's We also want to validate this valid age. Okay? Have to feel the email and the possible Let's take Let's check those two. Okay, But it's not unique. Now it exists. It's exist. Users exist, OK, the email must be existed on the table. Let me show you exist. Use earth image. The email must be existed on the tube. It's a gift. You mean it? I thought we did. Disown exists. No gonna make attempts, thanks in that attempt to connect email and password to our databases. Great that this is the function. If your attempt you may request in may and possible request password, we're gonna let let me copy this for a certain produce. Good. That's good. No, we attempt to Logan with the female and password is Ah, check function to the that of his If we have ah ah, user with the female and disperse Lord, we're gonna take the auto auto protested user creates a token, and Richard a response. The dress on with the took this joke. Okay, token. And the Logan use l's. If there is another, we're gonna have a response. Air or unauthorized. Okay, that's good for No, let's make another out. Great. Called Logan on this culture is Look, I know there will be another. Is the error called course gross or in resource share? Also. How true it off it. Okay, let me do a demonstration first in the next looked.
9. Get Data From Components : So in the previous lectures we create to resist their function. And the Logan. Thanks. So I forgot to tell you that you need to import this Jew for food or Teoh. Because the boat that user and old ah, attempt is not gonna work if you don't import for Fargo and House to house the path forward or to crypt it unit import for fad heart. Okay, No good. No. We need to let that our back and toe our front and no, let's open both Prozac's. See, I thought Let's open our fronton. Yeah, let's start. Start the surfer impedance torch kids. No, let's work on our river historical bullet. Okay, so gets close. This that's good. Now we want to take the e mail. The name email and the path world feel. Okay, So what? What doing it we need on stairs on the text chains. We need toe. Get the text. Okay, so on the name input on saves Okay. On the text trends when the text cheer, we want this dot handle change. It's a thinks OK name, and we give it a name. The name is it stopped me. Okay, let's hope you know this the same thing for email? Immediate and the same thing for the past. Bath work. That's good. No above the let's step air cools to get the state and the props. Okay, now let's type handled the function that would just type it. Quit. It's, but I think so. Okay, that take an average. This is an even when the text change that's uneven. Okay, that's in. Leave it. Let's let's locus. Okay, let's look that even it Look, he the target dot value it's picked over the council. Okay, She now we look all things we Raj. Okay, now we want cool said the value in the state. Okay, let's make estates called name. It's no you made. I also know on the same thing for plus World it's also No, that's no, was it stitch? Let's make name Coast name. There. You equal to e don't target. I show you what that means. Okay? No, let's look different. Well, we look this name. We'll have this. Lee. OK, email name and possible. Okay, it's now. Look, name she. It's a PR. It won't have an enemy e me. Okay, pass one. Now we want to have the value. Okay, now we have the name off the input field. Now. Want to have the value value? Look, it's value E total target. No value. Let's step. Now. Let's look the name, log, name and value. Okay. Name. Okay. See, the name is Dennis. This that's all? Good for now. Now, let's sit this states. Okay? You want to affect this value to the States? Okay, this dot Said state, This is how we set a stage on reax. Fifth stage? No, this Dutch said stage, it's a sanction. Okay, That's having no drift Now, the name they wanted to check the name and the volume. Let new for email would take the value off image for password were check the value off possible. So now we want to submit. Okay, it's let's step on submit So we won't submit. Well said Mitch. Type So it this Dutch handle sub Mitch. That's good for now. Handle, submit. It's also Hey, thanks. Okay, lets Logue this door church stage. That's good for now. This story some. OK, but the beads, it's reloaded. Well, don't depends to reload. So this is an event e dot Our gauge. No, no, you don't revenge default to prevent the past from note. Okay. It's, you know, didn't name my Mr Look. I think there is a letter. Mary fresh. What? It? Okay, so this is our that okay. This is the teller. Just you just take Now we want to send it to our databases. So in the next lecture, I will show you how to set up access to send that data to your daughter. So thank you.
10. Handling Register : in the previous lecture, We show how to get the data. What is this one? No, just one. So, you guys, we check the data from the input well, and save which on our stage. Okay, so in this lecture, we want to call me Communicate over that. So there is a lot off library, like carjacks. I'm using actions. Okay. Sorry. Toe install. Actually, just type in PM install, actually. Good accused. Actually, the problem is with us still typically it. Okay, you'll find here all the documentation for issues, how to install it. How toe important with cdn. All the things you need. Okay, actually not good dot Post good. No. So it is sold this type templates imported first in porch. Actually from, uh, that's good for No, no, we want on submit. You want to send his daughter to over back. Okay, so type excuse dot Post we want This is a post function. Okay, actually, those pools What is? Okay. So here is the others. Our bucket. It's got a PR. This is the route. It's lost. Register resistor. Its local local hosts close. I need the full leg. Like commute slash E p. I don't forget 80 I When you put your full your wrote in a p I you have a perfect off e p i this resistor. I want the data. So I let the constant daughter equal death Dutch stitch. Okay, that's good. And we send Is that don't if true if the other path successfully we look, it is dot Did a lot of dust. Okay, each whistle us an error. Just wait you high. It's around the server also. Okay, it's a running. That's well, let's see. What's the error that we will You need to run the server first in PM start. It is just a warnings. Don't my death. Um e made on past Mr See the reason there watches error. It's what I called you in. Where were set up in our book? Is the court cruise or living resource share? So to fix this problem, you need to go to our work in creates what we called a medal work. Okay. PSP or chizen make middleware. Name is course. Oh, it off. Who knows? Well, we need to import something. I forgot to import passport. A lot of it. Bon sport. I did this report um, this one. Yes. This one. Okay, in does provider what provider issues? I didn't use this. No, let's make our middle world. I mean, where? It was a function that execute when we send Eric with to our doctor. Okay. Like we have Ah, here. Middleware or or pontificate? Change check and career through direct. Like if do you That is all already pontificated. We have this middle work, Roderick. If the contributed, you don't need to type your email or password. This is what is middle. So now we have a middle. Where course, Um, I need to give you some gold desktop back. I already have this middle. We're here. Goto made Where? Course so just copy. Difficult. Okay. On places around here, it will access older users to take the data from Or isn't it a terror to our that always. The metals a load gatch post poured village and the heather. We have X token authentication authorizes. Let's, uh let's try again. No. Any act we make that centers in our database spoke and oh, register. It's very Ferres for now. Way. Need something else? Anyone But we see President Bucket on Colonel, we need toe. Yes. Well, minuto at this one to our middle. Okay, court. Just go to Colonel your middle work at this court. Good. What did a course? Let me see public. I think it's C course. I think that's good. Let's close this one. Close this one, and let's start over to the river. Okay. This again? No, you may. Okay, now that's passed successfully, and we have as a response, the user does just totally dedicated and the token kid. So no, if you owe for the next lecture. So in the next lecture, who will check if do that? If pontificated wound to redirect him toe the password or another pitch? Okay, so since you
11. Finishing the Auth Systeme: guys on our what we were doing the last time. So here's the user is resisted successfully. Let's go check on our batteries users. This is our daughter weighs 80 Iook. Either we have a new year, so that's good. But we don't get redirected when the user is logged in. So first we need to, um ah, make token and user on our local storage. Okay, so let's go toe our fronton resistor one, the user is successfully looked in. Okay, we went toe. No, come stories. You want to sit the token on over local storage? Okay. Talking on Ray's Dutch data Doetsch joke the same thing for the user. Local storage user breath the data dot you was that then we want let's create another component school. That's water. Okay, if the user of the Christian look did we want to redirect him to the does? Let's type after me and death. It's like you. That's for the moment. We need toe disrupt toe are dot address, score, produce. Um, it's a dashboard, and the component is there's board we need to import. That's good for we have, uh, a function called Ready Rex. Great. We're direct radiator plus does board expression, I think. Let's see. Stir direct. Okay, First, you know we imported this one. Uh, resistor. We're direct. Okay, redirect toe. We need this doubly. Corey braces, I think. What's ah ah for three feature Eddie, do you truly? Why do you do it to I think it's like this flows. Yes. I thought God the right direction. Okay, just again. The name but cheesed Beth War, Mr. But we didn't go to the desperate. Okay, we need to search it. You did that after render. If no, we we need to check if the token is there or not. Comes token. If we go stoke equal toe local a storage door. Good item. I want to get watch the token school. But if we checked in Ah ah stop education. We have the token and deals. See, we have the token and do check if if token is there, it's not the it is talking to. If if there is no token Richard, we re direct him to the local Derik Look slash. Logan, we need to import through direction in court already. Wretch from we act out, though. No, it's if there is no token. Ready? True log. Let's check again. We need toe on the resistor here. This is the same thing that's really there on the day s work. If there is the if, if there is talking, forget it, Toe dashboard. Okay. Resistor. You are logged in. See if we have. If we have a new token, we are logged in. We don't We can't go to fluster register again because we have a choker in our, uh, inspect application. I don't want to use Redox because if you're just starting using react, it's ah, little bit hard. Okay, so let's use the normal token in the local storage. OK, so now let's deal it this and go to slash dashboard We'll go to the Logan pitch. So I think we didn't handle the logon page. If this, uh, no, it's the same thing for register. Okay, I think it's the same thing. Let's go to Logan Logan. We need toe handle inputs, name, school he made and on tears, these dots 100 checks. Okay, that's good. We handle the change or email And the four password, That's what Let's take the same things from here. A Let's take this soon. Nice. It's descending. Let's pass this. But we don't need a name. Okay? We need to import access in court, accuse from accuse. And when it import right direction read Direct from react router. No, no, it's okay. That's good. What? No. We need to change from mirrors. Easter to log in. Okay, that's good looking. Did it to this world. That's good. We want all sorts of sick. If there is a token, if there is a token, if token is that we want to redirect toe the dust war else, we wouldn't say in the look. Okay, that's good. Let's see. No, God didn't to make I need to make, uh 123 456 Maybe we need to do for us because we did it. Use It. Looks OK, Logan. Morgan, it's all ready. It's already We have a token, so we can't go to Logan. Okay, here's that is already loaded. Okay, so let's delete. Ah, that's the lead. The talking from our local storage. Okay, application it, That's what. Oh, go back to look. OK, that's good. Now let's say the performed 123456 Look me in. Uh didn't let me see then then yeah, I forgot something. We didn't end in the public. Oh, my God, This dot handle submit. It's the turned. Submit. Forgot this one. Let's check. No. 3456 Logmein we have Jeffress, you are looking So this is Ah, how to make a restaurant E p I or gentrification using a lot of Andrea. If you want to refresh the speed automatically, you need to use route. I think I will make a redox in the next lecture or ah, in the in the next scores. So if you have any question, just let me know in this section below. Thank you.
Hamza Ahmoud, FULL-Stack web devlopper
