NestJS & Angular: Establish JWT secured Socket.io Realtime Connection | Realtime Chat App | 07/17

hi and welcome back to the next video this is video number seven where we establish a secure circuit io connection between our ns3s backend and our angular front end so basically we are establishing a secure socket io connection so that we have like everything set up for our real-time communication later for our chat service and so on um we also validate the connection by tracking or by adding in the front end to every handle connection with our socket io like our jwt in the headers so that we can track this in our nest gateway in our back end and validate the jwt look if it's valid and see if the user is existing and if it is okay then we uh establish the connection if not we disconnect directly um and we also to do this we update in sqs to version eight so this is like in alpha mode but it works correctly here and we have now like the applications used so far so this is all right because only ns3s in version 8 supports socket io and version 4 because nest3s and version 7 support socket io just in version 2 and we want to make sure that we are you know always like up to date then we come here to our um video structure this is as always first we look at our video outcome when we read the user story for this and then we implement everything and close the story so let's have a short look to the outcome of this video here so you can see we have here our log in pages two times so one times in normal mode the other in private mode and when we log in then we come to our dashboard where we listen to like our websockets of socket io and every time we connect someone connects we add like here a value and a random number so this is being returned or emitted as an event from our backend sjs gateway to every um yeah client from our website io so when i log in here with my second account then on login it has directly created another value and you see it here this is automatically embedded as an event also to here and if i for example just reload the right page then we have like another value and it gets automatically added here and you can also see we make some validation so if i make here like vf5 request then you can see that we make our requests and we also adhere our authorization so this here is our bureau token that is um and then we in our back end on handle connection so when we establish a new connection we check that this jwt is valid and if not we disconnect and if it's valid um then the user is able to connect and can like later eventually everyone or make custom rooms and so on so let's have a short overview of the story for this video here so this is about implementing something in sds and angular so we will add socket io so that we can establish like a secure um connection between our front and back end with websockets so like for real-time communication so our story is as a developer i want to implement web sockets with socket i o so that we can later have real-time chat rooms for our users for this we need to update nestges to version eight this is at the moment in alpha stratos so it's not released but we need this because nestle as web sockets are on socket i o version two which is not compatible with the new circuit io version 4 and also skips version 3. um so we have to also make sure to update extras to the most recent version and because only nesquis version 8 will support socket i o version 4 so you can also see this here i think as a warning in sgs platform circuit io currently depends on socket io version 2.3 and they are not backward compatible so you want to update an s3s to version 8 and then everything should be fine so then we also want to establish a connection between our front and back end and we want also to validate our user by clicking his 3wt token so we have to attach this to the um socket request to make sure that with the connection works you want to display some simple array value in angular so you want just to have some display that our real-time communication works and then in the next videos we have to implement something like chat rooms messages and so on so our acceptance criteria is here and then stress dependencies are updated to version eight alpha where available and we have also to update extras we want to establish a connection between front and back end with socket io you want to validate the user with adding with a wt and checking it on handle and need nest gateway and we want to display simple array value in angular so that we return by a socket so we can now go into our api folder and yeah first we can have a quick read here so for gateways [Music] but most of the concepts all here in this documentation like dependency injection decorators filters pipes and so on all require equally applied to gateways so we just have to annotate our class with websocket gateway [Music] and we can either use this with docker socket io or web sockets and so on or we could also build our own so you can see it here we have been our own gateway where we can work with our websockets so for beginning we have to install vcr and normally all server types but actually we don't need to install the types because in version 4 because we update this um this is already included so you can see it here this is like the changelog for the version 8 release of an s3s and here they update where is it socket io2 version 4 um and we can also have like a look into the documentation for the update documentation for version 8. um so you can also add you know open the syrian github and then we can go i think it's content then it's web sockets and we can go to the gateways and then you see here before it was this and then we have the switch and then so now you only need websockets and platform socket i o so we can install both of these so simply we are in our api folder and we can open our package json here and just have a look here and this would install it in version 7 so when we do this because this is the latest released version but if we go to s3s web sockets and we have a look in npm for example then you can see it here with the versions but there are like this 7.6 versus the latest but here for version 8 versus alpha version 5 which we can get with that next so we now could for example say we want to have the web sockets at next and then you see here we have 7.6 and then this should go to version 8 alpha so just give it some time now you see we have here version 8 iphone [Music] and we want to do the same for the platform socket io so we want to say here at next and then we can have a look what else so we need to update also in s3s common the core and platform express to v8 alpha release and then we are good to go because from what we've implemented so far there are no changes needed um so and i probably in the last video of the series i can update this to the then most recent version of version 8 and everything should be fine so this works so now we have to update mrs common so we say nsjs common and we say also at next and you see you also have v8 alpha we can do the same with core and the platform express and then also you have to make sure that we update express because axles is in the latest version uh being used by ns3s and um the sovereign s3s version 8 relies on x2s and version 7. so um here we are still in version 6 so we have to update this also so we can say npm install nx ks and then this should be updated because otherwise like the imports because some imports i think changed or something trained so we don't get any errors here [Music] why was it not updating well then let's just change it seven point one to zero call npm install and then we should have it and then we can have a look that everything still works fine from our api so we can try to start it before we implement like all the web socket and socket io stuff so we can say now docker compose build to build everything and while this we can also you know have like a quick look into the gateways so we now installed all here um yes so basically with the websocket gateway you can specify our gateway um the port we don't need because um our default port is three thousand so we can say on this and we don't also need to name space for this at the moment and so we can just make it like empty so we just don't need this here and then we can for example do something like events we can return data um let's have a quick look here so our socket we can emit to like namespace like values um you can console lock something out we can return multiple responses [Music] we can listen for incoming um stuff um and also we have some lifecycle hooks so like on gateway init on gateway connection and on gateway disconnect so like here on the connection we can check run with jwt from the user if this is valid or not um and when we disconnect we can also so we say here basically um if we we just extract like the jwt from the header then where we add it to the socket request and if this is valid then we allow him to to go further but if it's not valid and the user is not existing database for example we will like disable or [Music] how do you say yeah like like disconnect the user so let's see so this is then we can say docker compose up and let's see if everything works in our api as before before we go on so this is postgres we have postgres miner our front end so let's give it some time so this seems quite good so now we can have a quick look in our local host if angular is here but i think it's not all generated at the moment so let's wait a bit more so now it's here so here we have our login page let's just open our console to see if there are any errors so when i try to log in with thomas thomas.com and uh type in my password when i get logged in i'm having like hopefully a t here in my local storage and here it is service seems all fine working we can also call [Music] postman and see if we can get all the users this is at the moment just implemented in postman so we can later do this here also in angular so let's wait till it's here so here we have like our request to get all users so if we try to send and we don't have valid trade wt we get unauthorized so this seems good if we try to log in user not found i think this here is the user at the moment we get like a valid trade wt that we can just add to our get all users request and then we get in return our users so i think the update here worked so now we can go and implement like our websocket gateway in our backend so our socket gateway and here we can just go to the documentation so we need like our chat gateway and we have a look and we need to annotate it with web socket gateway so let's uh go to cli go into our api and we say nest generate module let's call it threat module and then we have here our chat module at the moment there are no imports but now we also want to generate like a gateway and this should be in our thread then we should have a folder gateway and this should be our chat gateway so later that where we are able to handle everything for our room real-time communication so now you see we have here our chat module we have one provider our chat gateway um our chat gateway is like websocket gateway and we have subscribed message so this is like a namespace or an event that we can subscribe to um so we can see or we can already try if we can connect to it so for this we can use something uh here like hopscotch so they have also socket io implementation so we can go against our localhost 3000 and it should be on socket io so we feel like an error so we have to check what's going wrong so this is like uh course error so sorry this is enjoyment but this is like a simple course error so what we can do is we can also specify here like options and for this we can say course and we can say we want to allow origin and this could be https hop scotch dot io and then see if it then works so you see now we are connected and we say here our event name is here this message so we send our event name message and send the request when you see we get returned hello world so what is specified here so at the moment i think this seems quite good so we can go to the next stuff and we can start yeah i like to implement this in angular and try to connect with angular to our backend also so let's stop this here because we have to install some stuff in angular so that's a cd out of our folder and you have already seen here that this is going around our nest middleware for authentication so we have to implement this later also follow this thread gateway here but right now we just focus on the connection between angular and this and in our back end and then we handle and also in this video the authentication so all step by step so then we cd into our front-end folder and we can uh let's have a quick look so for this socket io client so this is like the socket io client implementation and i think for angular there is like a package how was it nvx socket io i think yeah so you see here it's also working for and since we are now we're using on the server version 4 of socket io we also have to use here version 4 of socket io so we can just install this here into our front end and then we should have it added here to our package location so here's our socket i o and here this should be working now so now we can say docker compose build and let it run and then we can start implementing our connection to our backend so now we can go into our app.module and we can have a quick look here so we need the socket io module for root so where is it here from socket io we also need like the config and we can just also copy and paste here the socket io config from here and report it and of course our local host here should be like the localhost 3000 and then we can also specify some options this we can here like we can add later our jwt token just have to wait till everything is built here um yeah and then we could all really like implement like a new service so we are here in our application so and then we have our public module where we have the register and login pages and now we have our private module where we get route after logged in and here we have just our components and there we also want to have like a service that handles everything related to the chat so we say env generate service and then we want to go to the private module we want to generate like a folder services then we can say chat service folder and the track service and then we should have here like a new services folder thread service folder where we can then handle everything that we need and then we can also we can remove the engine in it above the dashboard component because we don't need it at the moment then we could in our constructor get our credit service let's have a look at our docker compose so it's still working running here so then we can like display some values there we can for example let's first make sure that we can connect so we have here now to call docker compose up and then we can also add some stuff to our threat service so we have like at the moment two things so send message maybe and get message and here we can say we want to return from our socket that we need to interact so we say private socket from socket i think it should be this and then we can just say in the get message so we want to turn our vista socket dot from event and there we are listening to the message event and you can see um in our gateway we were having like our message we went here and then we could for example get data here like we say for example title when we get our chat service we get the message and then we can just get this value here so we say title and then we have the async pipe which will just subscribe to this year since this isn't observable um and now we can look how far we get here let's just open our console here so we are on dashboard so here also course error so you yeah this is correct because you see here not with hopscotch io so yeah because we're in localhost and you see in our chat gateway i was just i added trust here hopscotch.io so we can also try to extend our proxy configuration a bit in angular so that we also rewrite this um and we can have a look and you see when we make like um the requests they are all against slash socket io so this is like the base path from socket io and then we have like um here some query parameters um so we can add here like a new object um for and then we have to say for slash socket dot io and then we can add like our target and this should be like the same as above we can say we are cure false and we want to change origin to true and we can i think we have to rebuild it we have to look if this will work maybe we have to test some stuff so maybe this is also here for vs for web sockets but let's see yeah so then basically our dashboard component will subscribe to our chat service get message here and we initialized this in our app.module for root with config localhost 3000 and for example in our where is our gateway our chat gateway we can here also implement like it's not on gateway i think it was on gate oh yeah on gateway connection and then we need to implement handle connection and this is like being called on connect and then we can like here validate the user and we can also adhere on gateway disconnect and we can also implement handle disconnect and say console.log on this connect and then we have to do like some stuff now this takes that quite a while let's have a look what else we can do at the moment for example we are here like in our middleware we can also use some stuff here from so we can also make on our tread gateway like a tri cat and now we are starting up here now we can try again if we can handle the connection so we can have a look here and we have to wait till everything starts and we have to wait until angular is also finished always takes a time bit of time longer so here it is so now we can go back to localhost 4200 we can go on login we can say password and now we can see but we are still having like some some issues so we can try to make this like an area to it and also so let's clear everything here and reload completely to see if there are any more errors so but this seems quite nice so here we make the request again socket io first so this seems okay so we have seen here connect disconnect connect and here we could for example then say we emit the value to all our clients so we can say server and here we can use server from socket io we have to import this but we can also annotate this with that web socket server and then we can say this dot server dot emit now better we can and then this year on connection and now you can see we have here display test this comes because we are subscribing them to the message event in our front end so in our chat service here in our front and we subscribe to the event message our backend we emit this and with the value test so we could also emit here more values or something different and now we can start by moving this here maybe first and then we can also import socket io so that we have here like some type trackings so we can switch to our api folder and we can npm install socket io quick look socket io let's just set and then we also we have to rerun it again yeah i'm sorry that we have to do like a little bit more of much insulation here so far [Music] so now we can start by implementing all the other stuff that we want to do so basically in our chat gateway on handle connection we want to also check the user so we can make here also like a make this async and we can make it dry catch here this will be basically the same from the logic than we did in our last video with the of middleware so first we want to get our token so we can say we have like our decoded token here and this should be our authentication service so we have to make a constructor here and use our authentication service and here we just call the verified jwt and then we can extract it from our socket connection so we have to see where is the socket io package i think it should be import socket from socket i o and then we can use the socket here so this is like our socket connection to our client so from this socket then we can go against the handshake then we get the headers and we can get the authorization so this is what we will need to add in our client then we can get the user or we can try to get the user and here we basically do the same as before i'm in our of middleware so we get um we try to get our user if not we will throw an error so we use this function here our user service get one so for this we also need our user service and we also have to import here our modules where we have like the user service and we're off servers so we need our authentication module and we need our user module and then we have to make sure that in our authentication module we are exporting like the off service because we need this and in our user module we have to make sure that we export the user service so this seems good so then we can check the user if there's like phone error then we catch it and then we can for example say if our user not there then we want to disconnect the connection and else yeah we want to we could for example um yeah like push a value or a middle value so we could at this time here we first we can say import server from socket io and then we can have like here like a basic string array so we have lucky a string area and then if we are like um everything's valid we can like push a new value to our array so this could be like let's say value and then we generate like a map dot random to string so that we see that actually something happening and then we could say this dot server dot emit and then we emit like our message event and then we just return like the whole array so every time someone is connecting with the correct authentication we will emit a message event with the whole array so every time someone connects there's getting added a value or if you reload the page you also add value to this within our cache we also want to disconnect and remove this so we can basically say here we make like a private function let's say this connect and we take in like a connection so a socket and then we just say socket dot emit and we can emit like an error and we say new unauthorized exception and the second what we want to do is like socket dot disconnect and then we can just call it from here so we say return this dot disconnect and then we can give it like our socket here from the connection and the same goes for the catch so if we try now to connect and make a f5 here so you say yes so you see here we are like still are we getting like returns but here we say unauthorized and then the connection gets um this emit so we try to make a new one and so on but they are not getting like here any data so now we have to add like or we can also track this here with the hopscotch so if we try to connect you see we get like our error response and yeah this seems good so far and we can also in the disconnect here disconnect yeah so i think this should be it and now we have to add our stuff here our um token in our angular module so let's close everything here let's go to our front end let's go to our add module and here in the options we can add like our jwt token and now we have to look a bit how we can do this let's have a look in the documentation socket i o headers trade wt i think it was extra headers socket or extra headers so let's go to version four of the ip of docs and here we can see extra headers yeah so we can pass them for each request and we can use them during handshake so we can just say we have here like our options then we have our extra headers and then we give it our for realization so that we can get this value and here we simply use our token getter from our twt where we get the capability from the local storage in the browser so now you see we have here our value we get it returned we can have a look and always if i make an f5 um we add like in value and if i think when we just make this like this and i log in here and secret mode again and then i make a 5 here you see and now i'll make a 5 here on the right class then you see here and here we get a value so directly added um so but i was just wondering because when i go into private mode and localhost and then i log in so right now i'm not having a token i try to log in then i get nothing displayed and we have to look if we make a fight when it works so here we probably attach we see it here our bureau token to as authorization so that we can get like the values here but this is here yeah i think yeah so i think that on an initialization of our app module um that um it tries to get the token and then there is no token at this moment so we have like nine and so our first request is not being authorized so um we can have a look um so we can say angryx socket io like factory if we can then inject something but this doesn't seem like it um so what we probably can do is we can refactor everything a bit because we just want to call this in our private module which is protected by our authentication guard so you can only access it if you have like a valid trade wt so for example we can [Music] yeah let's say we make here like a new folder let's say sockets and then we make like a new file um custom socket dot type script and then we export our class custom socket and we extend the socket from socket io where is it and then we can say we want to make a call to super and we inject here our config so let's move this from there to here and import the token getter and the socket config and then we should be able to use the config here then we can com remove this here completely from the module and in our chat service we don't use the socket but we use our custom socket and then this should only be initialized when we hit this stuff and tries to get the token when there is actually one so let's have a quick look and we go into private mode and try this again and we log in then nothing happens let's make it yeah i think no oh yeah i have to make this injectable and we make provided in root then try again let's open another private window go to localhost thomas thomas.com password yeah this seems good so now you see um we directly have the values so we directly have access to all the values that were emitted um so you see it here and these are like our things we have our authorization we have everything here so now we have our connection between our front and back end we can also try the seal in normal mode so we are here and we can like register another user so we say thomas at thomas2.com thomas2 password and password and register so we have created a new user then we log in here with the first user maybe we can just clear this here let's go to our back end and let's just reload this so then our area here from title is again empty so that we can see it better so when we now reload we don't have like a value here so now nest is there then we have our value directly then we open like another private window we go to our localhost page then we log in with our second user we login when you see we have directly here then the second value and also here so web separate scene the connection seems to work and we also have like here we are validating like the token we can also cut the lock with token house out for example and you can see it here we don't we just have to to wait and then automatically they realize here our clients that the back end is back up the silver um the the gateway and it automatically tries to connect and then we lock out here the tokens in our on handle connection function so we can remove this here again and now we can here basically we are already done and we can check our user story if everything that we wanted to do is implemented so let's go to story seven so here we have our update our sjs dependencies and we also updated extras we have like established a secure connection between our front and back end with socket i o we will enhance this in the next video so for creating for room creation probably and so on so that nearly all inside a private module then is handled in real time yeah and we are validating the user with adding with a wt and we track it on handle in our nest gateway and we display like the simple array value in angular to return power sockets so that we can make sure that the connection works you can see now we have set file here changed 17 files and we can commit it so we stick it at r get commit minus m and now we are in video 7. and we can say like establish a secure socket dot io connection between angular and nest layers also validate [Music] the requests by tracking the jwt and if the user exists and we push it and then this should be all

Channel: Thomas Oliver

Views: 1,344

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: eMc9EsD4uqI

Length: 52min 40sec (3160 seconds)

Published: Sat Jul 10 2021