27. Save the User token data from Login in Ngrx State in Angular Ngrx Application

hi friends welcome to my channel in this video what we will try to do is we will try to save the token data whatever the token data we are come we are getting from the login authentication so we will try to save the token data in the date management so now if you go to the here the project so using the effects we are able to successfully log in so let's try to log in the data so now if i try to log in the data now here what i can do is test ratetest.com i can go testedretest.com123456 this is the actual username and password now if i click on login i'm able to get the successfully disall data right now let's try to uh design this data so just save this data in the state management now what we will try to do is so here the response thing what we are getting we are getting this is this is the response data right let's try to create a model for this one let's go to the models and i will create auth response data okay so auth response data dot model dot ts dot model dot ts and here what i will try to do is export interface auth response data okay so here what i can do is what are the data we read it id token it is of type string id token it is of type string and another one is the email refresh token email refresh token remember email of type string and refresh token of type string and another one what is that one so refresh token expires in locality expires in local id expire scene of type string and local id of type string and last but not least what is that one it is a registered it is a boolean so whether the email is existed or not so okay fine let's try to edit this one also registered of type boolean okay so this is the response data what we'll be trying to get now let's go to the earth service okay we know that the data what we will be getting from the request so here what i can do is i can write add a generic of type auth response data okay and also we can write something like it will be returning of type observable strong type we can make it of auth response data okay so this is the thing what we have done now auth response data we are able to get successfully now let's go to the auth effects now if i go to the earth effects where is this auth effects in the state you will be having this earth effects and here you will be getting the data data it is of type what i can say it is of type auth response data so now what i can do is here let's format this data so how we can format this data we will try to create another new model that is nothing but the user model so you user dot model dot yes okay this one i will create it as a class export class user okay in this user what we will try to have is we will try to have one thing is a constructor okay in this constructor it will take one is the email of type string so we need the email and we need the token okay we need the user id private local id okay of type string and another one we need the expiration date of type date so these are the main required things so if you want you can add more so this is the constructor okay so these are the things what we need constructor implementation is missing okay not a problem so we private and this one is also a private okay so these are the data what we need to have expiration date we will keep it as capital okay chemical this is the data and now here in the earth effects we are getting the data now what i will try to do is i need to format the user so how we can format the user in our service dot ts what i will try to do is i will try to create one user that is nothing but the format user i will create from data so you will be getting the data of type auth response data okay and here what i will try to do is i will try to create a user is equal to new user of okay so new user is nothing but the model what we have created and in this one what we will try what we will be getting is email so we will be having this one data dot email and we need to get token data dot id token so you'll be getting it from the response right and local id data dot local id okay and we will be getting the expression date what we will try to do is constant so expiration date if you try to see here the expiration date we are getting as a string that the number of strings number of seconds in which the token expires id token so we will be getting the number of seconds how much time the token will be expired so if you try to see the output here if you try to see here oh yeah the output has gone so we will be getting 3600 seconds like that so we will we need to convert it into the date so what we can convert it into the date is expiration date is equal to new date of we will try to create new date dot get time okay so get time plus you will be getting the data dot expire scene okay we know that it will be getting the number for that one in 2000 so we are getting the seconds and we are converting into the milliseconds why because we will be getting the get time we will be getting the number of milliseconds so i'm adding so that i will be getting the future date here so this expiration date what i will try to do is i will try to add it to expiration date here and now what i can do i can return this user okay just i have written the logic here to format the date now this the written user so what i can do is in the auth effects what i can do here here i can use constant user is equal to this dot auth service dot format user i can use this format user and what i can do i can send the data here directly auth response data and i will be getting the user here so now what i can do i can send this user to here now in actions now what i can do is this is the login success right so here i can write the props of type user of type user it will take the user of type user now the login success will take the user data and now in the state what i can do here in the auth state you will be having now user data which is of type user or null first it will be it will be having null right so there is a reason i am keeping it as null so here you will be having user and the first time what i will try to do is user of type null okay so have added the user of type null now we have added auth state also so we are having one by one state we are having and now what i can do here in the reducer or thread user i can go here i can add on lo not login success okay login success so i'll be having the state here okay so now in the state what i need to do is i need to return the state first i need to immutably return the state and now what i need to do is i need to have the action also so action means why because we will be getting the user data from there so here spread operator we need to give three dots okay and on should be impo in should should be imported from the ngrx store so on so which is whether it is imported or not on ngrx store it is imported and here what i can do user it should be action.user right so now success so we have created the reducer also in the effects what we are getting we are getting the user and just send this user like this in the login success we need to format need to send the user right we need we have sent the user and now here what we did was in the other state yes okay fine everything i think hope it is perfect i think so if we see here we are getting a error in the auth service the auth service where is this odd service here here what is the error it is saying login email string password error expected where is that it is expected in the post here oh here okay why this one is coming like this are you unable to understand it's coming something like component base okay so now i hope this one is perfect it is executed without any problem book so many errors came this dot service dot format user auth service what effect property format user doesn't exist why is this one saying so these these type of errors will come nor commonly so what you can do is as my system is little bit of slow it will be able not able to detect if your system is fast and anything so it will be automatically it will be able to detect let's rerun this again okay let's rerun the code again then it will show you why because it is saying that this dot dot service that format user is not there but here we have a we have the format user all right which we are having right so this is the one method and this is another method yeah format user we are having and in the effects it is saying that in the auth effects is saying that auth format user auth service dot this dot author user format user is not present so sometimes it happens like this let it run now it is successfully compiled let's try to see the output here now the login we we get without any problems okay so now i am creating tested test dot com one two three four five six now if i click on login we are able to get the success okay so this one is not happening anything so we'll try to see afterwards and in the red x if you try to see here we are getting login start when i click login start and afterwards login success okay now here if you try to see the state the auth state is there and in this one user and we are able to get the data see expiration date local id token email everything we are able to save it in the redux so now we are we are successfully able to save the data for example if you want to see you can go to the auth reducer and here you can print you can console.log okay you can console.log the action.user or otherwise you can print a total complete actually try to print what will happen now it let it compile here see how it's compiling it's compiled successfully now here if you if you try to see sorry tested test.com one two three four five six and if you click on login now here i am able to get this data see auth page login success and here the this is the user data what we are able to get and if you try to see the redux also if i click if i if i refresh this one again i will show you how the effects is loading i will show you so here ngrx something is run so now here tested test.com so now one two three four five six now here if you click first login start will fail then our service after success of this one login successful action will fire so here login start after login success is firing taking that user data okay so this is the data if you try to see the action so this is the type login success and this is the data it is taking and in the state it is trying to save the auth okay now we are able to successfully store the data your token data in the in the state management so now we what we will try to do is now we are able to see the whether the data is submitted or not we are we are not able to see whether the api call is making or not we are not able to see right so what we will try to do is in the next video we will try to add the loading spinner okay loading spinner will try to add it in the next video so that that one also we will try to try to do it in from the state management so that what we can see is that loading spinner that one will make it as a global component why because forever forever tomorrow what we'll try to do is we'll try to get the post data also from the backend database so that here from getting the post data we will show that same loading spinner here updating the data also will show the same loading sphere loading spinner so whatever the spinner we are using here in the login page the same spinner will be common in all the modules we will try to make it as a shared component and we we'll use it everywhere so that means for that one we'll store it in the state management loading spinner whether to show or not so through the loadings through the state management we'll try to access the loading spinner okay so we'll try to do it in the next video and if you want this code everything the code everything will be stored in the ngrx counter this is the indirect counter project in this application we are having everything so the login authentication everything we are having so we can you can able to access in this great repository link okay so i will be providing this link in the description you can access that one if you have any doubts or any suggestions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 13,593

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx selectors, ngrx tutorial, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial, ngrx effects, angular ngrx effects

Id: VaUkAi14nKY

Length: 13min 16sec (796 seconds)

Published: Sun Dec 27 2020