Flutter Login & Register with Node JS Rest API

[Music] welcome back to snippet coder and we are back in our video in this video we will integrate the node.js jwt token api with our flutter application so this is our application so here you can see we have the username password then we have the forget password button then we have the login button then here we have the don't have the account signup button if we click here it will direct us to the register page so here if we click on the login we will also get the validations also if i put here invalid username so here we will get the api message invalid username password and here if i put the value username and password so now if i click on the login you can see here we have been redirected to the home page and the home page is restricted with the logged in user home page we are just calling the user profile api which required our jwd token so on the base of the logged in user we are just passing the jwt token also and on the basis of that we are just getting here authorized user message from the api so before starting the video if you are new to our channel subscribe the channel by clicking the subscribe button and click the bell icon to get notified about our latest videos thank you [Music] so first of all we have to add the packages so we are using two packages first one is the api caching manager to store the login details that is token and all and the second one we are using here snippet code utils for designing a ui and all and here we will go to the prospect and here we will add api underscore cachet underscore manager and version we have to put here 1.0.2 then we are using a snippet underscore coder underscore utils and the version we are using here 1.0.9 so make sure we are using the latest version so now we will move further to design our pages [Music] so here we will get the new folder under left folder that is pages inside that we will create new file that is login underscore base dot dot file before that we will modify our main. file and here we will remove all the unnecessary code and here we will add the routing routes then here we have first one slash that will be the home page print text so here we are using a flatter navigation 2.0 for the navigation and all constant and here we will create the login page this one we will create a stateful visit login page and here we will import in the same way we will do for the other pages also and we will copy this and we will paste here slash register and here we will create the register page and here we will create one new page that is register underscore page dot dot file this one also will make stateful widget register page and this one we will link here so now we will go to our login page and here we will design our login page here we have to add some variables first one will be the boolean type of is api call process is equal to false and this will be used for overshowing our loader and all when we click on the login button then we have the boolean type of height password is equal to true then we have to create a global key here for the form so that it can maintain the state of the form whenever there will be any set state change so it will maintain the state form state global form key is equal to global key and here we will pass form state then we will create two variables nullable type of username then we have another type of password then here in the build context we will add here safe area here we have the child scaffold widget then we have to add the background color and here we are passing the hex color utility from our snippet kodi details and here we will pass the color which we want to use we are using a blue color so you can see here whatever the hex color we will put here it will show the color of that also then we have the body here and we are using a progress hod and say we have to pass a child and we are using a form so now here in the inside the form we have to add the key here and the key will be global form key and then we have a child here and for that we will create one visit here and we will name it as a underscore login ui and here we will get the visit visit underscore login ui and here we have build context context and here we will get that visit and from here we will call it here and we will pass the context here so now here we have to pass our key also and we have to put a unique key then we have to pass a in async call and we will pass here the variable that is api call process then we have to pass the opacity we are using a 0.3 so from the here in the login ui we have to return here single child scroll view and here we have the child and the child will be our column visit then we have to pass your children's here before that we have to pass here main excess alignment and we are using a main x alignment dot start then we have the cross axis alignment when we are using a cross access alignment dot start so now let's run the application also so that we can design the ui side by side so here you can see here we are getting the form here login form with the background of blue color so now we will design our ui here inside our children we will create one container and that container will be used for showing our logo with the background of white with some edging of that border radius and all and here we have the container and here we will put width and we are using a media query dot of context and we will get the size of our screen and then here we have the visit width then we have the height here and we have the media query dot of context dot size dot width then we will put here decoration part and we are using here box decoration and here we are using the gradient linear gradient and here we will put begin alignment dot top center then we have the end alignment dot bottom center then we have the colors here and we are using a color start white color then we have the colors dot same white color if we want to make two different color we can use that also but in our case we are just using a white color so now you can see here that white color is coming here but now we have to put some border radius and all and here we will pass border radius and we are using a border radius dot only and j will pass bottom left radius dot circular 100 then we have our bottom right radius dot circular 100 so now you can see here we are getting the bottom radius of both the left and right hand side then here we will add the child here and there we are using the column visit and here we have main x alignment and we are using a main x alignment dot center then we have the children's here in the children we are just using our image logo but if you want to use other images or other visit in the children's we can also use that and here we are using align visit then we have the alignment and we are using alignment dot center then we have a child here and we are using here image dot assets then we have the child here then we have to pass the image path and we are picking from our asset folder asset slash images slash shopping app logo dot png and to access that we have to go to our pub spec to add the path also and here we will uncommand the code and here we have the asset and slash images so here we have the asset folder inside that we have the images folder then we have the image here shopping app so now let's reload the application to see you can see here we are getting the image also and we are getting our background so now we have to add some width also and we are putting here 250 then we have to put your fit and we are using a box fit dot contain so now you can see here image is coming properly fine in the center so after this container we will add one label here and here we have text visit login then we have the style layer and we are using a text style here we have the font weight and we are using a font weight dot bold then we have the font size and we are using it 25 then we have the color here and we are using a color dot white color so here you can see here text is coming but there is a padding issue so now we will wrap it with our padding and here we will add only and from here we will pass left 20 then we have the bottom 30 then we have top 50 so now you can see we're getting properly fine so here there is a size issue with our logo now here we have to modify some code so here we are not passing the height we have to pass the height here then we will divide it further with our 5.2 to have a small size if we want to increase it we can also increase it by lower the size and it will increase the height so now you can see it looking perfectly fine here so now we will add our controls here first one we are we are going to add the username and for that we are using here form helper dot input field visit and here we have the context and here we have the icon here and we are using here icons dot person icon then we have a key name and we are putting a username then we have the end text and we using a username then we have the on validate and we will check here if on validate value dot is empty then we will return here return username can't be empty and else condition we will return here null in case there is no validation issue then here we have the onset value so whenever we put any data in the textbox it will get saved when we click on the button on that event we have to pass on the value to our variable and here we have username is equal to unsafe value then we have our border focus color and we are using here color start white color then we have the prefix icon color and we are using a color start white color then we have the border color and we're using a color dot white white color and then we have our text color we are using it text dot white color and in the latest update of snippet quarter util we have introduced two new variables that is text color and hint color so make sure you are using the latest version of the snippet kodi utils and here we have the colors dot white color so now you can see that text box is coming here so in the hint text that is coming very white so we have to put some opacity here and we will put here 0.7 here we have with opacity you can see here that color has been light so now here we will add border radius and we are using it 10 so now you can see here textbook is coming properly fine here so for the password we will just copy this code and we will paste here you can see that is coming properly fine but there is a padding issue so for that we have to wrap this one with the padding here and we will put here only and here we have top 10. so now you can see it is the no issue of the padding here so here we will add the key here we will change it to password then we will add the label here in text that is password this one we will change it to password and this variable also will change it to password so now here in the password field we have to put some suffix icon to show or write a password for that we will put here and here we have the property obscure text and we will pass the variable which we have created that is height password and we will set that value of the variable from our suffix icon click event and here we have the suffix icon icon button and we are using here and here we have the on press event then we have the icon here and we're using a icon and we are showing the icon on the base of the variable that is height password if it is height password we will show here icons dot visibility off else we will use a icon start visibility then we have the color here for the icon we are using a color start white icon with opacity 0.7 you can see here icon is coming here but that click event is not working for that we have to add the code here and here we will put set state height password is equal to not of height password so now if we click here you can see here icon is getting change here in the same way if we put here some value and if i click here it will show the password if i click again it will hide the password so now we will add the link for the forget password so the forget password link we have to show in the right hand side for that we will use here align visit and here we have the alignment and we are using alignment dot bottom right then we have the child here and we are using a rich text because we have to give the feel of the hyperlink so for that purpose we will use a rich text and here we have the style here inside that wrist text we have the text visit and we are using a text pane inside that we have the children's here before that we will put some styling here and here we have constant textile and a color we are using here color start gray color then we have the font size and we're using a 14.0 and then we have the children's here and we're using a text pants and here we have the first text pane and the text we are using here forget password then we have the question mark here then we have the style here and we are using here textile and the color we are using here colors dot white color then we have the decoration and we have to show the underline text decoration dot underline then we have the click event for this hyperlink so you can see here we are getting that hyperlink type text so there seem to be the padding issue so we will wrap it with our padding and here we will wrap it with our padding and here we'll put only because the padding issues from the right hand side and we have the right 25 so now you can see here that is coming properly fine but it is touching to our text box also for that we have to put here top 10 so now you can see here it is looking better now so if you want to make the click event for this foreground password so for that we have to put here recognizer and here we have the tab gesture recognizer dot dot on tab is equal to and inside that we will put the event whatever we want to do suppose if i put a print forget password so now if i open the console so now if i click on the forget password so we have to reload the application so now if i click on the forget password you can see here we are getting the text here so now let's add some spacing so that we can add after that we will add the button login button and here we have the size box and the height we are using at 20 and this one we will add after align visit so now we will add here button for our login and here we are using form helper dot submit button text will be login and then we have our ontap event that we will cover later on you can see here button is coming but design is not as per our theme so now we will change the design here here we will add the b in color button color that will be we are using the same color x color 2 8 3 b 7 1 and then we have the border color and we are using a color start white color then we have the text color and we're using here color start white color then we have a border radius and we're using a 10. so now you can see a button is coming as per our theme so now let's make this button in the center we will use a center visit you can see here button is coming center so now we will add the link for our sign up also if user don't have the account and then here we will put here size box and the height we're using it 20 then we will use it text visit here we have or then we have the style layer we have the text style we will put your font weight and we are using a font weight dot bold then we have the font size and we are 18 then we have the color and we're using a color start white color you can see here or is coming but we want to make it in the center we will use a center visit so now you can see here so again we will add the size box we will copy this and we will paste here so now we have to put the link so for that we have to copy this code which we have added here we will copy from here and we will paste here so we have to modify this link first of all we have to make it as a center so here we will add the multiple text pane first one will be the text pane and here we have the text don't have an account then we will show here link sign up you can see here so here we will put some space so now you can see here so from here we will redirect user to the register page and for that we will add the code here navigator dot push name we have the context and here we will put the route name that will be the register so if i click here and before that we have to reload the application so now if i click on the sign up you can see we are coming to the register page because we don't have any content in the register page that's why it is coming as a blank page so our login page is ready so now we will move further to design our register page also so now we will design our registry page for doing that we have to copy paste our login page to our register page and we will copy all code then we will go to restore page and we will paste here and from here we will extract our code and we will paste here same we will go do for this one also and we will paste it and we will remove the unnecessary code which is not required here we'll copy paste over import files also then we will modify our register page and here we will rename to register ui we'll copy and we'll paste here and here we will add one more variable string type of email because in the registration we are just getting three input from the user first one is username then we have the password then we have the email id and here we will change it to register then we will copy this one and we will paste here for our email id and here we have email email then we will remove some of the code first one we have to remove is this one forget password this is not required then we have to remove this one also and here instead of putting login we will put a register so now let's reload the application to see is it working or not so now if i click on the sign up page you can see here we are getting a username password then we have the email then we have the register here so now let's move further to have the implementation of the apa and all before that we have to create the model file [Music] so for creating the model file we are just using the utility third party utility i will put the link in the description so here we have to just copy waste the json and that will convert our model file with the null safety feature so first one we have to create the login request model and here i will just paste the json and json will be the same which we have covered in our previous video if you have not watched that video for creating the node.js api with the jwt token and i will request you to please watch the video before implementing the api indication with the flutter so here the username password which is required for the login request model and we will name it as a login underscore request underscore model dot dot file and now here we will click on the convert to dot so here you can see we are getting the content here we will copy this one so now we will go to our flutter application so here we will create a new folder in the lift folder and we will name it as a models first one we have to create here login request underscore model dot dot file and we will paste here second mod file we will create here login underscore response underscore model dot dot file then we have here register underscore request underscore model dot dot file then same we have to do for our response also and here we will create register underscore response underscore model dot dot file so now we will go back to the website to generate the other model files and here we click on edit one and we will paste here the json now we will change it to a response and from here we will remove dot dot file so now we click on the convert to dot we will copy and we will paste in our flutter application and here we have login underscore response model so now we will go back for the register request model and we will add it and we will rename it as a register a request model and we will take a convert we will copy this and we will paste here so now we'll go back for the response here we'll change it to this response and we will rename it as a response model we will click on the convert dot we will copy this and we will go to our flutter application and from here we click on the register response and we will paste here so now our model file is ready so now we have to do some small modification in this file we will go to our login response model from here we will create small method and we will put a login response model login response model and we will pass here the json and here we have login response from json and here we will do json dot decode and he will pass str so now we will go to our response register response and there also we have to do the same we will copy this and we will go to our register response model and here we will paste here and we will rename to restore response model here we will import that convert so here we have to do some small modification because in case of the email address already registered we will not get any success or you can say any data from the server in that case only we will get the validation message for that we have to put the condition here and we will check here if json data is not equal to null then it will call this one else it will be null and we would make it as a level object and here we have to pass here pipe so our model files are ready so now we will move further to implement our aps service and all before that we have to create one config file and that config file will include our api url and endpoints and all and here we have config.file and here we create the class class config and here we have static constant string app name shopping app then we have the static constraint string api url and our api is on the this ipa desk so make sure you are not putting here local host because we are using a local apis from our localhost and but in the flutter application that localhost will not work to make it work we have to put the ip here for that our local machine ip where our node.js aps are running for that purpose we are putting your ip address with the port number and apis are running on this port and then we have to put three endpoints first one is a static constraint string login api and we will copy this paste here paste here second one we will change it to register and the third one will be user profile and here we have slash users slash login here we have slash users slash register then we have slash users slash user hyphen profile so now let's move further to have our aps service file [Music] and you will get the folder here services and here we get new file that is api underscore service dot dot file here we create the class class api service and here we get a static where client is equal to http dot client and we have to import here import and the package we are using a package http slash http dot dot as http and j will get our first method that will be static future type of boolean login and here we will pass our login request model and here we have to create the request headers map string string request headers is equal to content type application slash json then we have to create the url here where url is equal to uri dot http and here we will put the epa link from our config dot api url then we have the endpoint here config dot login api and here we will get one variable where response is equal to await client dot post request and here we have to pass the url then we have the headers and we are passing a request headers then we have the body here the body we are calling here json in code and here we will pass the object here model dot to json and we will make this function as async here then we will check here if response dot status code is equal to 200 that means login successfully then we will store the information in the shared service that we will cover later on and from here we will return true else we will return here false so what we are doing here we have created one function here and the name of the function is login and we are passing parameter as a login response model then we have creating here request address and then we are creating a url from the apur plus our login endpoint then we have our response here and the response we are just passing the url then we have the headers here then we have the body here and the body we are just calling here json encode with our model.2.json then we are checking here if the status code is equal to 200 that means user is successfully logged in then we are returning it true as we are retaining it false and here before the true we have to store the information of the token that will be covered later on so now let's copy this function and paste here and this one will be register and this model will change with double register request model and endpoint we will change it with our register api and here we will just return over and we will call a register response json and we have to go to our register response model and here we have to rename it to register we will change it register response json and here we will pass response dot body and here we have to change it to register response model so now let's move further and here we will get one more a service file that will be a shared service and that will be used to store our information of our token and all [Music] and here we will get new file shared underscore service dot dot file and here we get the class class shared service then we have to create some functions here first one we have static type of future bool then we have is logged in and we will make it as async here and here we will check is key exists is equal to await api cache manager dot is api key exists and here we will pass the key name and the key name will be anything you can provide and here we are providing login underscore details and we will return here is key access so what it will do it will check in our api cache manager if this key exists that means user is logged in as user not logged in then we will create one more function to fetch the detail of the login details and here we have static future login response model as a return type login details and we will make it as async here then here also we will create check for the key and we will copy this code and we'll paste here and here we will check if key exists then only we will proceed further and here we have where cache data is equal to await eps service api cache manager dot get cache data and here we have to pass the login detail that will be a key name to face that token detail from our database then we will return here return login response json and she will pass cached data dot sync data and this one we have to import and here we have to rename it and we will go to our this model file and we will rename it to login response and here we have login response json and we will make it as a nullifer here so what we are doing here we are checking if that login underscore detail key is exist in our system or not if it is exists then we will fetch the data so in our local database we are just storing the token detail in the json and now we have to convert that json to our login response model file that's why we are calling here this function that is login response json this will decode the data from our database to the model file so now we will create one more function that will be static future type of void set login details this and we will make it as a async here and from here we will pass login response model and this function will call from our aps service here we will get the object for our api cache a db model is equal to api cache db model here we'll pass the key key name will be the same one login underscore details make sure you are using the same key everywhere else it will not work then we have the sync data sync data we have to call here json encode and we have to pass here model dot to json and it will convert our model into the json in the string format from here we will call await api cache manager dot add cache data and here we will call cacheddb model so it will save our token detail and all in our database so what we are doing here we have created one function that is set login detail and that we will call from our aps service and here we are passing the parameter as a login response model then we are creating one object here for the api cache adb model and there we are passing over two values that is key key name and on the basis of that key name the data will be stored and the data we are storing here that login response model then after that we are just calling here api cachingmanager.add cachedata and this will save our data into a database so let's create a last method here that will be for the logout and here we have static future white logout then we have the build context because from here we have to redirect user to the login page that's why we need the build context also and from here we will call await we will make this function as async here await api cache manager dot delete cache and we will pass the key name here so it will delete the data for that particular key then from here we will call our navigator dot push name remove until and here we will pass the route name where we have to redirect user slash login so what we are doing here we are just calling it delete cache with the name of that keyname and this will delete all the information that logged in user and whenever we login to the application it will ask for the login page instead of showing our data so now we have to call this one set login detail and we have to go to the ips service and we will go here we will put here this is the function for our login and here in the status code 200 we will put here await shared service dot set login details and here will pass login response json and here we will pass response dot body so what it will do it will pass this json to our set login detail and from there we will save in our database so now let's move further to add the implementation of the eps service in our ui [Music] so now we will integrate our aps service with our login and register page so now we will go to our login page and from here we have to create one small function for the validation and all and here we will write bool validate and save final form is equal to global form key dot current state and here we will check if form dot validate then we'll call here form dot save and from here we will return true else we will return here false so now we will go to our button click and here we have the login button from here we will call if validate and save that means form is valid and then we will call here set state is api call process true it will start our loader then we will create here model file login request model model is equal to login request model and here we have to pass the username then we have the password here then we will call here apa service dot login here we will pass the model then we have that then and this one we will change it to response here we will check if response means true then we'll call here navigator dot push name and remove until that means we are successfully logged in and we will remove all the previous routes and we will redirect to user to the home page slash home and we will add this one in our main.file also later on from here we will remove this arrow in the else condition we will show the pop-up to the user form helper dot show simple alert dialer here we have the title and the title we are picking as a config dot app name then we will show the message here invalid username slash password and the button text will be ok and here we have the on press event of the ok button and we will remove the popup here navigator dot pop then we will go to our main.file and here we have to add the entry for the home also slash home and from here we will open the home page so now we will get the homepage also we will go to our pages and here we have home underscore paste dot dot file here we have to create a stateful visit home page here we will import so now we will copy the same code in our register also we will go to our login page we will copy this code and we will paste in our register page same one we will do for our button click also and we will paste here and here we will change it to register request model same here and here we will just pass email email then here we will pass this model and this one we will change it to register and here we will check if response data is not equal to null that means user is successfully logged in then we will copy this one and we will paste here and here we will show the success message here to the user registration successful please login to the account and here we will read that user to the login page this one will change it to login and we will go to our main.file to see we have to put here for the login also because this one we are going to replace very soon with the conditional one if the user is logged in then we will show here home page else we will show your login page that we will cover later on now let's go back to the register page in else condition we will show here the message which is coming from our api here we have response dot message so now let's reload the application to see is it working or not so here we have our application so now if i click on the login button you can see here we are getting the validation message so now if i put any invalid username password now if i click on the login before that i need to verify one thing so here in the login page we have to go to the login page and we have to copy this one and we have to paste here and we will change it to false that means after the successful login register we will remove the loader and we will copy this one and we will paste in the register page also so now reload the application to see so here if i click on the login we are getting a validation message so now if i put the invalid username password so you can see here load is loading here and we are getting here invalid username password so in case if i put your valid one raman password we are using here one two three four five six if i click on the login so you can see here we are redirect to our home page so now let's go back now we will rerun our application and we will do the registration part also so now if i click on a sign up page and here i will put username as a raman and if i click on the register we are getting the validation also if i put the password here and here i will put the same email id to get the validation message so now if i click on the register so we are getting some error okay so we forgot to assign the value for the email so now here we will go and this one is for the email and here we will assign the value so now reload the application here i will put roman 123456 and here we have brahman 15 added gmail.com this email id already registered if i click on the restart you can see here we are getting the validation message which is coming from the api user validation field email email already in use if i click on the ok so here if i put a new email id if i click again on the register you can see here registration successful and we are getting here please login to the account so here we are getting the login so now let's move further for the last step of the tutorial that is we will integrate our home page and on the base of the login user we will store the information that we have already covered in our shared service after the login it will check if that user is logged in or not if it is login it will open the home page else it will redirect user to the login page and also we are going to test our user profile api with our token which is stored in our database and that will be sent in our user profile request so now we will modify our main.file to have an implementation of if the user is logged in then it will redirect the user to the home page as it will redirect user to the login page so for doing that we have to go to our main.file and here we have to add visit underscore default home is equal to constant login page then here we will call visit flutterbinding.ensure in this life and we will make it as a async then here we will create one variable bool type of underscore result and here we will call await shared service dot is logged in so it will check if the user is logged in or not on the basis of that key save in our api cache manager then here we will check if underscore result that means usually logged in then we will make the default home is equal to constraint home page and here we will change home page with our this variable underscore default home so what we did we have created one variable of visit type of default home and we will make the default home as a login page and here we will check in the main function that is we are checking here with the shared service dot is logged in and here we are checking if the result that means we are getting the user as a logged in in our local database then we are just assigning our default home with our home page then we are assigning in the routes we are assigning our home page with this variable default home so now let's move further and we will modify our aps service to include one new function api method for calling our user profile page and here we will go to the service folder then we have the ips service and here we will go to the bottom for doing that we have to copy this function we will copy our login pattern and we will paste here then we will modify this function we will make the return type as a string we are just showing the json which is coming from the api we are not going in the end-type detail of that user profile page and here we will change the metric name as a get user profile then here in the request header we will pass one new variable that is authorization and before that we have to make one variable where logging details is equal to await shared service dot login details and here we will pass the token basic dollar then we will call this login detail variable dot data dot token and it is in a label type so here we have to put the accelerometer then here we have to call our user profile api which we have added here in the config here this one user slash user profile then here we have to remove the body part because we are not passing anything in the body and this is a get type and here we will check if the response dot status code is 200 then we will just return here response dot body in the else condition we will pass here empty so what we did here we have created one function get to user profiles and here we have created one variable login details and then we are just calling here shared service dot login details so make sure we are using the await here so that it will block that execution once the data is received in the login drill then only it will proceed further else we will not get that token here after that we are passing a request header with the content type then we have the authorization then we are passing here basic and then here we are passing the token then here we have the url here we have the ips url then we have the user profile api then we have the response here and we are calling here client.getrequest and here we are passing the url then we have the headers here and here we are passing the request address if the response status is 200 that means data is successfully fetched from the server then we are just passing our response dot body else in the else condition we are just passing it empty so now we will go to our home page and we will modify that page and here we will make it as a scaffold widget and here we are using app bar app bar and here we have the title text wizard we are using here here we have letter node.js plus jwt title we are putting here then we have the elevation we're using it zero then we have the actions here because we have to put the logout button also and here we are using the icon button then we have the icon here and the icon we're using here i can start lower then we have the color here and the color we're using a colors dot black color then we have the on press event and here we will call share service dot logout and here we wash the context so that in if we go to the logout button and here you can see we are calling here delete cache and it will delete that login detail from our api cache manager then after that we are just calling here navigation so that we will redirect user to the login page after the logout then here we have the background color and we are using a color start in gray color 200 and then we have the body here and the body we will create one visit here name as a user profile and we will create this visit here visit user profile and from here we will return future builder and here we are the future and we are calling aps service dot get user profile then we have the builder here we have here build context context async snapshot and from here we will return the string model and here we will check if model dot has data then we will show the data here we will return center visit here we are the child and we are showing it text visit model model dot data so here we will show our text visit with the model dot data and here we have to pass our pipe because this is the null level type then in the else we will just show here circular burgers indicator constant center and here we show child circular progress indicator so now we will just reload our application to see is it working or not so here we have our application so now we will log into the application raman and here we will put the password so now if i click on the login you can see here we are in the home page and this response we are getting from the api that is authorized user so in case if i remove that token part so let's see what will happen over there so now if i go to the ips service if i comment this line and here we will reload the application so now you can see here we are not getting anything if i put debugger here and if i reload the application so here you can see status code we are getting 401 that is unauthorized here you can see we are getting under threads because the token we have not passed so if we pass the token and if we reload the application so now you can see here we are getting status code 200 and in the response we are getting the body which is coming from our user profile api also if we reload the application you can see here so we are not going to the login page because token detail are saved in our device and that's why we are going to the home page so if i click logout from the here you can see here we are in the login page if we reload the application you can see here we are still in the login page because that token detail has been deleted from the device so that's all in this video i hope you liked the video don't forget to subscribe to the channel like comment share i will come back soon with another awesome videos thank you for watching the video [Music]

Channel: Snippet Coder

Views: 5,391

Keywords: flutter jwt authentication, flutter jwt token, nodejs jwt token based authentication, flutter jwt node js, flutter login register ui, flutter register and login api, node js login register mongodb, node js tutorial, node js jwt login, node js token authentication mysql, nodejs and express js tutorial, node js jwt api, node js api authentication with jwt, node js login api, flutter tutorial, flutter widgets, flutter app development, jwt authentication node js mongodb

Id: czed-wa21IU

Length: 44min 35sec (2675 seconds)

Published: Sun Oct 17 2021