React and Golang JWT Authentication - Tutorial

in this tutorial we'll create an authentication system using react and go so this is up it shows you are not logged in and we can register our user so let me register one user right now test email will be tested test.com and the password is test when i register the user i will redirect to the sign-in form where here i can write the email that i just created and the password that i just created and i can go to the main page where i show hide test so test is the name and i have a logout button here where i can log out so this is the authentication that we will build also something to mention is that we will use http only cookies so once we log in we'll generate this cookie that shows that we are logged in once we remove it we are logged out so if you want to see how to make this page follow this tutorial before building the app i would like to remind you that my channel is a channel that combines multiple frontend frameworks with multiple backend frameworks this tutorial covers react and go but if you want to combine react with one of these backend frameworks or go with one of these fronted frameworks go to my channel and you will find the videos there i combined videos using playlist now let's build the apps now let's download and install go before i start make sure to know the basics of go so if you are a total beginner make sure to watch a tutorial about go basics first so with that being said let's get started click download go and download the right version for your machine also make sure to download mysql download the mysql community server and mysql workbench also the golf framework that we will be using is go fiber so the fiber framework fiber is a framework inspired by express.js so if you know express.js it it will be easier for you to learn fiber so i'll copy this code and in my project here which is an empty folder i'll create a go file main that go i'll call a package main and i'll create a function so paste the code actually so before i run this up first make sure to get this package so to get this package i already got it from my machine but if you don't have it you should run this command go get go fiber and this will install it in your machine also make sure to configure your go path i will use the version 1 here because the version 2 throws an error for some reason and we will listen to port 8000 to run this up run go run main.go and fiber will run on port 8000 let's go to port 8000 localhost port 8000 hello world so this is our first go up now let's connect with our database so i'll create a connection to my local database here to mysql so the user is root password is root root and the database is youtube go out so this is my local database which is empty now let's connect with this database to connect with the database we will be using gorm so let's copy this uh command here go get to install gorm i'll close the server and install this also make sure to install also the driver i won't be using sqlite but i will be using mysql so the driver is mysql so with this we can connect with gorm so here i will import so i can have multiple imports here if i use the brackets and here we need gorm io slash gorm and also gorm.io driver mysql we need those two now let's connect with the database so we have a connection and then errors because go returns can return multiple variables gorm open mysql open we need a string inside which i will add it later and the other parameter is gorm config so this is a connection if an error happens so if error is not nil we need we need to panic so could not connect to the database so panic will stop our app if an error happens now the connection for the moment we won't be using it so i will put an underscore there and uh if we don't panic here it means that the connection is successful so let's round up so we panicked because i forgot to add the dns here so let's do that so my user is root then i need to pass a password which is root and then i put a net here and now we need the database youtube go out so this is our local database connection now let's run the app again and now we can see that fiber is running it means that we successfully connected with the database now let's restructure the folders so create a folder here database one folder controllers and we need the routes and that's it for the moment so first let's create the database file so we need here to add the connection connection that go also the package is database so usually the package name is the name of the directory so i will cut this code i will go to connection.go and here i'll create a function i'll call it connect and i'll paste this code so we need also to import the driver so drivermysql and we will be using this function here in main.gov so first let's import the database so to import it we have to use dot slash database so we import the directory and to use the function we use the package first connect and this won't change anything now let's add the route so create here go file routes i'll create a function setup and inside i will cut this code and i will put it here so we need up here so the app should be passed as a property here so up is a star fiber up and uh let's pass up here so we need to import also the routes in the routes we'll set up the routes and we will pass up inside so we have we are done with this also now we need this function so this function should be added in the controller so let's create a go file i will call it house controller here i will create a function hello and this function so i will paste this function first and i will name it here hello and now let's use this function let's go to the routes and here we need to import the controllers and to call the function we have to call here controllers hello just like this and now let's run our app and this will return the same so we restructured our files and now let's create the register function so i will rename this to register and in the routes this will be the register function and this will be a post request to api slash register i'll stop the server for the moment and now let's go to the register function and for the moment let's return what the data we will send with the post request so to get the data from the post request i will declare a variable data here which will be a map string string so this is similar to a array with a string as a key and string as a value so to pass the data we have to call a function c body parser and we will pass the data as a reference this way we will get all the request data that we will send this returns an error so we should handle there there are two ways to end the layer one is to add an if condition here if error is not nil then we return the error or an an even shorter way which is uh i will add the if condition here and i will add an exclamation here and this looks uh shorter and cleaner now we got we handle the error we got the data and now let's return see json the data to see what we send so to see the data that we sent first make sure to install postman i already did it so now let's send a post request to http localhost port 8000 api register this is a post request and what we want to send is a raw request so we'll send a name name email aaa.com and the password which will be one send so i didn't start the server so we returned exactly what we sent so if i change this to a this will change now we got the data now we have to store this data in the database so let's create a user table in our database to do that we have to create a directory now models and inside this directory i'll create a go file called user and let's create a struct for the user so structs are similar to classes in other languages so type user struct and this user will have an id as an unsigned integer a name as a string an email as a string and a password as a string so this is our user struct now let's create a migration to create a table in our database so let's use the connection for our database here so get the connection and to migrate we have an option here connection auto migrate so let's import the models models and we need to auto migrate the user so we add and here models user with this we can auto migrate the users let's refresh here we don't have any tables and if i restart the server we can see a users table was created so we have this table with all the fields that we need so we can add also extra configuration for example i want this email to be unique so i add here gorm uniq with this this will make the email unique if i restart the server refresh and as we can see the email was generated unique so gorm is a pretty powerful library now let's create the user here so first let's create a user variable which is equal so first let's import the models here which is equal to models user and we need to pass the name which is data name like this we need to pass the email which is data email and we need to pass the password but the password we won't set the password directly like this because we need to hash the password so let's get a package to hash our password to search for gop packages go to go.dev and click discover packages here we need a package called bcrypt and this is a package that we want copy the link here so we can install it so go get bcrypt so i already did it and now we can add here bcrypt now let's use it so let's create a variable password and we return also an error which i won't handle it is equal to bcrypt generate from password and we need to pass our password so data password but this won't accept a string so what we need to do here is to convert these two in a slice of bytes so bite like this and the other parameter is a cost which i will put 14 here so the this is how we generate a password and we needed to make it as a byte array and this new password can be assigned here the problem is that this password is a byte array also so how do we convert it the best way is to make this password also a byte array like this so with this we can use this hashed password but also we need to auto migrate to the database so for the moment i will return the user here because every variable needs to be used and let's restart the server to see the changes here actually we won't see any changes because the byte array is you it will be still returned as a long text here so everything will work fine now if we send the request again like we did before we will see that the password is hashed and also we return an id here which is zero so we haven't assigned that id in the user model if we don't assign anything it will initialize it 0 for numbers and empty strings for strings so now let's insert this user to the database and we have to get this variable here so how do we share this variable from this folder to the auth controller we have to create a global variable right now where db is a pointer to gorm db and we have to assign it with this variable here so db is equal to the connection so these two pointers are referencing the same variable which is the database connection now we use this variable in our controller so let's get the database and to get the variable we have to use database db so with this we got this variable so the connection and we have to create now and we will pass the user as a reference like this so with this we can insert this user to the database let's try it send a request so this won't create because i forgot to restart the server send it again and now as we can see the id is one so we successfully inserted the user in the database let's see so this is our generated user so our user is created now let's login with this user so let's create a function login this will have the same parameters and let's add it also to the routes so this will post to api slash login and the function is controllers login so we added this now let's make the login work so we will get the data like the register function so we will send here an email and a password so by the email we want to get the user with that email so first let's get a variable user as a models user and now we need to call the database db where email is equal to question mark and the email value is data email and we want to get the first result and we want to assign it to this user variable so with this we will get the user based on the email if the user id is equal to zero this means that we haven't found the user so we have to set the status to fiber status not found 404 basically and we have to return here see json fiber map message user not found so if we don't find the user we return status not found and we return this message so fiber map is basically a map with a string and interface so we can put anything there if we got the user then we have to compare the password so to compare the password we have another function from bcrypt which is compare and hash password so the first parameter is the user password which is a hashed value and the second parameter is a byte so we have to convert it also to bytes of the password that we have so data password this returns an error and if an error happens so let's make it shorter so error is not nil here then we send the status so status fiber status bad request and we return c json fiber [Music] map message incorrect password so if we get an error here it means that the password is not correct if we go here it means that we successfully uh send the right email we retrieve the user and we got the right password so for the moment i will return see json the user and let's see if this works so i'll copy this url i'll paste it here and this will be login let's send a post request let's send the body so this will be an email a at a.com and the password is what is the password one so for the moment i'll send the wrong email so did i restart the server user not found so if i put the wrong email it means the user is not found if i put the wrong password incorrect password if i put the right one then we retrieve the user so we successfully retrieve the user here but we want to return a jwt token to return a jwt token we need to install another package jwt and this is a package that we want to use so let's copy the url and install it here go get this package i already have it so i can use here on top and now let's create a jwt token so first we need the claims variable which is equal to this package jwt new with claims so this is a function we need a method which we get it from jwt signing method hs2245 so there are a lot of methods but i will use this hs 2 5 6 and the second parameter is jwt standard claims and inside we will pass an issuer the issuer is our user so what we want to pass here is the user id unfortunately the user id is not a string so this accepts a string so let's convert the user id to a string so first we have to import here str conf and this can convert this to a string so we use strconf we use this function which i cannot pronounce it and this accepts an ins so user id is you in so this user id cannot be sent like this but we have to convert this to an int so like this we converted the user id to a string so this is claims and we need an expiry expired sat so let's import also time here and when we want to expire this token so we have to pass time now we need to add time hour times 24 so this means is one day and this needs to be converted to unix time so this is our claims so it will expire after 24 hours so now let's create a token and we will get also an error is equal to claims sign string and here we need to pass a byte array of secret so this secret is a secret key that we need to store it in our app so create a constant variable here on top so const secret key and this secret key should be stored in our app and now let's handle the error so if the error is not nil we return the error or we return a better message so i will do it like this we return internal server error and the message is could not log in so we got this now let's return the token and let's see it so let's login again so let's restart the server send the request and as we can see this is a token that we generated now we don't want to return it like this we want to store it in cookies so let's create a cookie is equal to fiber cookie so to create a cookie we need a name i'll name it jwt value the value is a token itself expires so let's copy this part here and this needs not a unix time this needs a time like this and the last one is http only it's important to add http only here because the front end cannot access this cookie so this cookie is meant only to be stored in the front end and stay and send it but the front end doesn't need to access it and to save it we need to add here c cookie cookie select this as a reference and that's it so in the end we can return fiber map message success because we don't want to return the cookie the front end will only have the cookie and nothing more so it won't be able to access it or use it so this is not enough we need to add here on main another configuration so first our front end will have course issues so we need to use up use we need to use course new so don't forget also to import this url here so course problems are the problems that uh our backend will run on port 8000 and the front end will run on different port so if we don't add this uh our browser won't allow the request and it will draw an error if we add this then it will ignore that and we will have the request still we need also one configuration which is course config allow credentials to true so this is really important and with this the front end can get the cookie that we sent and it can send it back so this is really important if we want to authenticate using http only cookies so with this let's test it we don't have any cookies and let's send the request so i forgot again to restart the server so message is success but we see here we have a cookie jwt which is http only so we need to use this cookie now to retrieve the logged in user so let's do it now function user i will copy this part and i will add this to the route so this is a get request api slash user and controllers user let's go to the functional and what do we want to do with this function first we have to get the cookie so the cookie is cookie is equal to c cookies and we need the name which is jwd with this we got the cookie now let's retrieve the token so the token and an error are equal to jwd pars with claims so this function accepts first the cookie because the cookie is a string right now we need the claims the claims are gwt standard claims so we need to pass it with reference and the third parameter is a function which accepts a token and the jwd token is a reference and this will return an interface and an error so inside this function we need to return the secret key that we generated here so we have to return a byte array of the secret key and the error is nil so we don't want to return an error and that's it so if the error is not nil then we want to return i'll copy this paste it here fiber status unauthorized and the message is unauthenticated so if this returns an error it means that the user is not logged in and now we got the token let's get the claims from the token so claims are equal to token claims and let's return them c json claims so let's test this function and i will copy this url paste it here and this is a get request to user send the request and as we can see we have an expiry time and also an issuer so this is the idea of our user so we got the issuer here and now let's retrieve the id but there is a problem claims has only a valid function it doesn't have an issuer function why is that the case because this claims is a is an interface that has only a valid function what do we want is to return a standard claims and this has our issue that we want so how do we convert these claims to a standard claims to convert it we have to use dot parenthesis and this will be converted to jwt standard claims so this is how we convert one type to another and now these claims will have the issuer that we want so now let's use this issuer in order to retrieve the user so let's first create a variable user is a type of models user and now let's query the database database db where id is equal to question mark and the id is claims issuer the first result is our user and in the end we want to return the user let's see so let's restart the server so we got an error so as we can see we converted this to a standard claims but this needs to be a pointer of standard claims let's restart again the server and we successfully retrieve the user so with this we don't send anything we only send the cookies and we treat the user i forgot to mention that if we open a new tab the cookie will be preserved that's why we retrieve the user here so we got the user and one thing before we log out i would like to change the format here of the attributes here so first i don't want to show the password and second i want this to be lowercase so how do i do this let's go to the user here we can add some configuration like how the json will return so this id will return like this the name will return like this email we can add it here like this so this can support multiple configurations and the password we put a minus here which means that we don't want to return the password with this let's restart the server send request again and this is our user so name email all lower case and the password is not returned now let's add the last function which is logout now let's copy this part and to log out now we have to remove the cookie that we just created here so how do we remove cookies to remove cookies is really strange because we don't actually remove it cookie to remove cookies we create another cookie and we set the expiry time in the past so let's create this cookie the name will be jwt the value will be an empty string the expiry so this is the part that we will remove our cookie so we set the expiry time to now and we will add here a time which is time hour with a minus so this cookie expired one hour ago and http only is equal to true so this is how we remove cookies there is no way to remove the cookies in the browser just we set the expiry time in the past so with this the cookie will be removed we have to set the cookie and to the response and let's return the response so return c json fiber map message success and that's it so let's add it to the routes logout logout so with this we completed the logout function let's send so first let's restart the server let's copy the url here paste it here this is logout and we need to send a post request so before i delete the cookie we have the cookie here so we retrieve the user and let's send a post request to the logout method not allowed so this is a post request let's restart send it again and we have message success and the cookie is removed here so if we send the request to the user now we get unauthenticated because we don't have the cookie if we log in again we generate another cookie then we retrieve the user so this is how authentication works in golang thank you for watching this video and make sure to like and subscribe now to install react make sure you have node.js installed if you have not js installed right open the terminal and write this command mpx create react app now we need the name of the app i'll call it react auth and i will add template typescript i like to use typescript on my projects now let's wait till it is completed so the project is created now let's go to the folder and run npm start react will run on port 3000 localhost port 3000 so this is our running react app now i will open the project with my ide also i will close the terminal here so let's use it directly in my ide here npm start so nothing has changed now i will delete the test file and let's add the template for our project so let's go to get bootstrap.com go to get started first and let's add the bootstrap link to our index.html i'll add it here so we added bootstrap now let's add a template so the template that we want is this sign-in form here let's inspect our viewpage source better and here i will copy the div here the main div and i will add it to up.tsx so i'll paste it here so i'll keep the class name up here now it's complaining because some tags are not closed i'll make some changes so i'll remove the image here i will add a closing tag here for the input i will remove all the labels i will remove this also and this so this needs also a closing tag also make sure to change class to class name so these are class here and i change it to class name my id automatically does it if yours doesn't make sure to change it this now will look like this still is not looking good we still have to add the styles here so go to sign in the css here copy all the code and add it to our app css i'll paste it here save it so it looks a little bit better so let's remove this body and html styles here and now it looks better so this is not a css tutorial so if you want to learn css you can watch other tutorials i will cover only the authentication part here now here in the form let's remove this id here and this out of focus i want to keep everything really simple and this won't change anything so it doesn't now i want to add here a menu so we can navigate to different pages so go again to get bootstrap.com examples and here i will get a navigation menu so which one is the simplest i'll pick this navbar static i'll view the paste source here and i will copy the navigation here and i will paste it here on top so still we need to close the tags that are not closed so we have a form here with a button so let's close first the input here and let's remove this tab index and i guess we don't have any problems so don't forget also to cl change the class with the class name so this is our menu now let's uh remove some stuff we don't need this button so we just need i will name this home here also i will remove this form and for the list items here i'll keep only one so i will remove the classes here and this will be login and i will add another one for the register so what is missing that is complaining maybe i forgot to close the ul here so it's working fine now let's split this into components so create a directory actually i'll call it pages and the pages that we want is the login dot tsx so tsx is the version of jsx the typescript version of jsx so create your component i have a shortcut for creating a component so you should write it yourself if you don't have that shortcut let's add the html here and this this login form so i'll cut this and i will add it to the login tsx for the moment i will just add here login make sure also to import it because my id dot does it automatically and i'll create a new component called navigation so components i'll call it a nav so this is a tsx file also i'll cut this code and i will paste it so let's create the component i'll paste it here navigation so i will add it like this it doesn't work so i will import it so nothing has changed so close the other tabs and now let's add other pages and let's add the router so we can move to other pages so we need a register so i'll just name it register for the moment and another page called home home here so let's add them these pages here but we cannot replace them because we have to add another package so let's install it npm install react router dom and the typescript version so react router done every time you install a package the typescript version has it types in front of it so the package now is installed now let's use it so let's wrap let's change this login here to browser router import also browser router from reactor router dom and to add the pages we have to add route we need to import also route here and this has a path so the main page so just slash will be the home component so here we will add home so import also home here slash login will be the login component and slash register will be the register component let's see if it works so we have home here so we are the home component now we cannot move because we haven't made the links work but we can go to other pages with login here we can see the login page but we see home here why do we see home there is because the path matches the path with the register here and if we want to distinguish we have to add here exact so this is the exact path and now we don't have home there register also that works so every component has been rendered now let's add the links to the navigation so we have to change this anchor links right now two links from react router dom so import link from react router dom and this will point to the main page let's change also this other parts so this will point to slash login and this is linked to slash register let's see and we get an error there is that you should not use links outside a router so the error is because the navigation is outside the browser router and we can fix that by moving the browser router here and using the navigation inside and now everything is correct we can navigate to other pages now let's complete the register because we have to register first so we can log in now let's go to the register and the form will be similar with a login and i will paste it here please register and this is submit the register form has an email has a password and also has a first a name just a name so name email and password i kept it really simple so this is the register form now let's make this form work first we have to for every input we have to get a variable and [Music] we have to use the state for every variable so we have to get here the name set name is equal to use state and inside is the default value which will be an empty string so this is how we handle state in react [Music] the first is a variable and the second one is an actual function that changes this variable so i will add two other states one is for the email and this is set email here and the last one is password set password so where do we use these variables so let's use the functions first and we will use the functions once we change the input so we will add here listener on change and what will happen when we change the input will fire an event and we'll set the name to event.target.value so every time we change the name we will set the name here we will use the function let's do the same for the other inputs set email and this is set password so we set all the variables now we need to submit the form so we have a non-submit function here and let's create a function called submit and we will use it here so this function accepts an event and since we are in typescript we have to define the type of this event and is a type of synthetic event so don't forget also to import it when we submit a form it usually refreshes the page so in our case i will just show it to you i'll console log here the name the email and the password so i'm keeping this short because this is the same as name and the name variable but since they are the same i can use it directly like this and let's see if we console log here so submit so we saw console.log here but the page was refreshed and to prevent that we have to add event.preventdefault and now if we try to login to register sorry we console.log the actual values so now we have to use this values and to send it to our backend so i will cut this and let's send a request to the server using fetch first i will make this function a synchronous and to get the response from the server is equal to await fetch we have to pass here the endpoint which is http localhost port slash api register so this is a get request but we have to make it a post request we have to add here the method which is post and we have to add also the body and the body is the json that we cut but we have to make it to a string so json stringify and we will paste the values we need also a header so headers here and the header that we want to send is content type application json and that's it basically so the content is equal to weight response json and let's log the content here so let's see what the server does return to us so i still have the form here i will try to console.log submit and we created a user right now so the response was successful and what do we want to do once we successfully register a user we we want to redirect to the login so we'll remove all this and add another state here so first to redirect we have to use redirect we need to import it also redirect from react router dom and we have to return it redirect to login so this is the way we redirect and as we can see we are at the login page but now we cannot go to the register because we automatically redirect so we have to add a condition here if i'll create a variable just like the other variables this will be redirect and set redirect is equal to use state and the default state will be false so by default if redirect we won't redirect because it is false and now we can stay to the register page when we want to redirect is when this fetch has finished so here we'll set redirect to true with this once we register with another user test.com and now i am at the login page so now let's login go to the login page and just like the register i'll get the email and the password here and i will paste them here also when they change so on change we want to set the email to event.target.value and same for the password set password now we need to submit the form on submit here let's create the submit function submit and this will have an event which is a synthetic event and event.prevent default here so everything is correct now we need to send a request to the login so i will copy this i'll paste it here and the end point so make this asynchronous then point now is api login and we don't have the name so that's it so we need to send the email and the password but this is not enough so we can send the credentials and they will be correct but we need to get the cookie from the server to get the cookie from the server we need to add another configuration another option which is credentials to true it's not true it's include so with this when we login we will get the cookies from the backend so let's see it in the application now we don't have any cookies and let's try to login ata.com a as we can see we generated a cookie which is http only so the request was successful we got to the message here but we don't do anything to set it to the cookies so we just send the request and nothing more but since we have these credentials include here it means that we will get this cookie now in every request and this is a cookie that we need to use to our home to get the authenticated user so just like the register right now when we log in we want to redirect so i will copy and paste the same thing and we want to redirect to the main page here and set redirect to true so let's try to login again and we are at the home page here we want to display the user so let's uh here we need to call the user and since we don't have anything we have to use another function which is use effect so here we need to call a backend and i will do it like this since user effect doesn't accept async functions so this is not allowed and we have to call the backend uh i would like to make my function asynchronous and we have i want to do it like this so this is short for executing this asynchronous function here so i like it like this and you can use a different way of calling the back end and i'll copy this send it to the home now we don't want to send a post request and this method is get by default is get and this will be user here and that's it basically now let's see if our request will get the user so we get the authenticated user here we just the request will get the user we don't send anything just a get request and everything is gotten from this cookie here and uh let's before test the cookie i want to set the name here so we'll create here a variable name and set name and i forgot this is use state by default is empty string here we'll say hi name so when we get the user here will get a response and the content is equal to weight response.json and the content in our in this case is our user so we'll set the name to content that's name let's see if this works hi a so this is our user that is authenticated i will make a question mark here for a so i'll do it like this a set we will say hi with the name otherwise we will say you are not authenticated also or not login so we have high a here if we remove the cookie i'll clear it we get you are not logged in because we don't have the cookie and the response is throwing an error so we have to login again and now we show the name again here now the last thing that is left to change is the logout here for the login and register when we are logged in we want to show the logout button but there is a problem here because we get the user here on the home component and the the buttons are in the nav component so how do we fix this problem this problem will be fixed if we move this function i will move it so i will also get the set names to the up.tsx because this up here will contain all the other components so i will paste it here so we will get the user here and we will set this user to the home component the way to do it is by extracting this home component to a function and we will call it like this home and we will set the name is equal to this name so this name now is a property we have to access it via props here and since it is typescript props need to be defined with the type and this will have a name which is a string so we add the props here and what is left is to use the props like this so props that name and props that name here so nothing has changed and also this component doesn't have any errors so this is how we pass values via the props so these props will be the same in the nav so we need to pass the same props and in the update esx we'll pass here the name as a name here so if the name is empty we will show this values so let's add a condition here i'll make a menu and this menu if the name is empty not name that but that name then the menu will be similar to this one so by default if the user is not logged in we'll display this html if the user is logged in so we have an else here then the menu is equal to i'll still copy this because i need the styles but i will remove this and now we need a link to login but this will be logout function and now we can see log out here now let's make this logout work so we have to add here and unclick and let's create a logout function so where should i create it i'll create it here on top and this function i'll call it here like this so we have to call again the backend so this is a post request also i'll copy this paste it here this is an asynchronous function this doesn't have to have a synthetic event we don't have to send the body because we don't want to send data and the function the endpoint is logout and that's it when we send this request we will clear our cookie and since we link to login when we click logout we will get redirected also to login so we will do two things at once let's log out and we are at the login page if we go there we still see our name and logout here but if we refresh everything will be normal but why this is happening uh also when we log in the same thing happens so i will see the cookies here ata.com here a so we got the cookies but still it says no you're not logged in and the only way to show it is by refreshing so the login and the logout work totally totally fine there is still a minor change that we have to make so when we log out we have to tell other components that we are actually logged out and i will do it the same with this name and now when we log out we have to emit an event to the other components and i will add another prop here i'll call it set name and this is a function that returns void and accepts a name as a string so once we finish the logout here we'll set the name prop sorry set name to empty and that's it so what did we do right now so now now in our app.esx we'll need a function set name and it will send an empty string so we want to set the name so we have another set name function here set name and this will work the same so when we log out we successfully log out but we don't reset the name to an empty string here so that is the solution so we have to reset the name right here and when we login we have to do the same so we have to set the name so let's first test the logout so now we have the jwt let's log out and now immediately we can see login and register here so it we successfully logged out but when we login still we have the same problem that you are not logged in so let's emit a set name also from the login let's go to login and we have to emit the same thing again here and we have to get the response and the content is equal to a weight response.json and let's emit the event so the props here i'll copy it from the navigation so let's go to the login we'll have props that this will have a function that will set the name like this props here set name content dot name and that's it and in the update dsx we have to use it just like home here uh not name actually is it name not home sorry is login the function is set name and we will call set name so i made a mistake somewhere and we have to close it so let's try to so everything is correct right now logout we don't see here the name let's login so we didn't redirect but we see the login and everything works fine maybe we should change the order here logout ata.com and everything works fine so we completed our login register and this is how login works in react so thank you for watching this video please like share and subscribe thank you

Channel: freeCodeCamp.org

Views: 125,293

Keywords:

Id: d4Y2DkKbxM0

Length: 81min 42sec (4902 seconds)

Published: Fri Feb 26 2021