herndonchung805281

Discord Bot Dashboard - Ep. 2 - setting up exhibit w/ Discord Loginokay guys so i will show you. how to establish the express app now so. we'll just create a new. directory. referred to as uh let's just call this lower back conclusion. we're going to run npm hyphen y to get. the package.json dossier and we will. set up a group of other. dependencies. so we're going to install express. and we are going to simply set up that for now and. let's set the express app that is the. leading point of this video. create a source folder. create the app.js file and we are gonna. do const. uh let's have a look at express this require. convey so we're gonna import exhibit. and we're going to create the app through. invokking the. function due to the fact convey itself is. in fact the operate once you require. it. okay this allows you to correctly use the. exhibit api so app.receives ok we will do a. bunch of different things now. i will set the port so actually.Allow me set up. dot n because we will be utilizing. this. for surroundings variables so i will. create a dot and dossier over here. and i'll do port we'll set it to 3001.. i'll later on want the customer identification. so i'm simply going to name this uh. dashboard client identity dashboard. client secret and then dashboard. uh callback your uri or url. so this is all going to be stuff that. we'll get from the discord. software so we are going to worry approximately that. later. ok so now i'll do const. port equals procedure.m.port and if port. 3001 is not available. then we will simply use port 3002. now we are able to do app.listen we will hearken to. port. and then we will say console.log. jogging on port. port ok. okay there we cross so i am not likely. going to explain everything in exhibit. i do have an instructional that does cross over. the basics of express yet i am going to clarify.The extra complex stuff inclusive of the. authentication while we really get to. it but the fundamentals inclusive of. establishing an show task i have. tutorials on that so be happy to envision. it on my channel. so if i uh go ahead and run this app i'm. going to go forward and set up about a. scripts so we are going to installed a dev script. or you are just going to use node you. haven't got to try this i'm just doing it. to make. it less complicated to run our app. okay and let me go forward and do this. rpm run dev it's aactually unlikely to. paintings good it will run port 2002. or wait what is going on. oh sorry it is uh i forgot it's dot. resource app.js due to the fact we are contained in the. source folder. ok so npm run dev okay so it's on. port 2002 and the explanation why it's not. going for walks on port 2001 it is left out the. surroundings variable. is we didn't import due to the fact we didn't.Import.n. so we have to name this operate there. you move that's 4001.. okay so it's important which you uh. import dot and okay. so next issue that we are gonna do is. we'll set up a few routes. okay so we are gonna move within over right here. we're gonna hooked up routes. and i'm gonna do two matters i'm gonna. create an index.js file and ii'm going to. go forward and create. the the auth.js file. so auth.js goes to be a dossier that is. going to take care of handling all of the. routes which have to do with. authentication. so for instance logging the user in. getting the user's credentials or. details now not credentials details. and etc so i will go ahead and. import express. and ii'm going to reference express dot. router clone of that. so we actually get the router okay. and we'll export the router. and then within index.js we're going to.check in. this auth.js direction and then inside. app.js we're going to sign in. all of the routes that are registered. inside index.js i do know it might be a. little bit puzzling yet. bear with me i will explain why we are. doing this so let's first start up with. router.get we will set up the. slash discord cut back uh. i believe that is that is it sure session. scored ok. and we are correctly going to wish a. passsport. yet we are going to fear about the later i am. going to establish an easy course for now. we will do exactly dot scale back res. we'll do rest ship 2 hundred only for. demonstration purposes so i'll. do an identical issue i'm going to import. router yet this time uh as opposed to. handling any routes what we'll. do is we do router.use. and for this auth path i would like the. prefix of this route to be. off ok and uh instead of uh.Doing this we additionally ought to import the. route so we're gonna import uh. auth the image of that aand then so this. path goes to be registered with. this router over here that is being. imported from auth.js. okay and now in app.js what we want to. do is we want to import. index.js from routes so when you consider that index.js. is the bottom call we need not. specify index we are able to just do. require dot slash routes and it'll. immediately search for index.js that is. simply how it really works. so now if i do router or no longer router. sorry it is. app.use and we're going to prefix all of. our routes with. scale down api okay now one reason why i want. to do it's because it correctly makes. a lot less complicated when you deploy. you've the base api url and many. apis actually try this. so i incredibly propose you try this and. follow the constitution because it's a lot.extra cleaner. due to the fact if you don't you are going to. need to have a gaggle of other. app.uses so you need to do. use auth and blah blah blah pass that during. there app.use. discord and then you need to pass in the. route over there and it simply takes plenty. of. strains of code in your access factor of. your app and we want to keep it as clean. as possible. ok so watch this i'll pass forward. and shop. and now we're going to visit so in order. to actually hit this. endpoint we need to go to lessen api. lower. off ok due to the fact this is the most url. of decrease auth so if i do minimize api. just auth it says it's okay if i attempt to. do. simply such auth it's not likely to paintings. ok permit me move ahead and simply create one. extra route just. to expose you guys how thiis really works. so we'll hooked up a discord path. so the same element i will do.Router.use curb discord. and we will import the discord. path later simply roll right now. this will require discord. ok so now i can simply modify this. index.js all i need it's aabstracted away. and by defau and automatically due to the fact. we are importing some of these routes over. right here. it will be registered for us so if. i do lessen api. discord see the way it says okay. works perfectly message discord keep. that. send there we go so with any luck that won't. too complicated. okay yet now uh the subsequent side with that. we need to do is we need to installed. passsport ok so we need to set up. passsport. so we're gonna move ahead and iinstall. passsport. we are gonna set up things passsport. and passport discord or in fact three. and one stop mongoose. ok so we have simply mounted all of our. dependencies over there. and what we will do is we're.Going to first import passsport. ok and all we'll do whoops. all we'll do is we'll. virtually just do that. so this is going to be the route is. going to be cut back api. scale down auth slash discord and we are going. to do passsport. dot authenticate we have to circulate in the. procedure the tactic is going to be. discord. ok and that should be it ok we don't. desire the. uh the callback function the request. handler function we don't need that. and the next factor we're gonna do is. we are gonna do an additional direction. discord redirect this is going to be the. callback url. that we'll specify later and we. additionally have got to do an identical aspect passsport. authenticate discord. yet this one goes to need the. request handler operate. this goes to send a reaction returned. once we've been authenticated. or if we fail to okay.So now that we have completed this we've. linked up passsport with this auth.js. dossier. the next factor that we need to do is we. desire to actually create the discord. strategy. okay and that is in which we're going to be. using passsport hyphen discord. so we're going to pass contained in the resource. folder and ii'm going to create a folder. referred to as strategies. i am simply going to create a file referred to as. discord.js. and we're going to pass forward and import. passsport. after which import discord technique well. we're going to call this discord. technique. so we're going to import passsport hyphen. discord. okay and what we're going to do is we're. going to say passsport.use. and this is basically simply going to take. in an example of discord technique so. you may create an instance of it. and then inside the constructor of the. example. we'll circulate in an object first.And. we're clearly going to move ahead and. pass in all of our homes that we. need . so we'd like the customer id so that's going. to be picked up from over here. so let me actually move forward and seize. that real speedy. so i'll grab the customer id i am. going to grab the secret so the key. is. very touchy so you wish to ensure. you don't share this with anyone. and we'll need the callback url. so the callback url is going to be. this route that we established over right here so. the full direction is going to be. decrease auth diminish oh no sorry it is cut down. api. discord redirect you want to make certain. on the actual. developer portal that you've got the. redirect url. established over right here otherwise it is not. going to work you'll find that i already. have it already. with ease so that's well okay. so that ought to be it so permit me just copy.All of the environment variables. so method dot end uh there we pass. purchaser secret procedure dot end and then. we are gonna do. dashboard client secret. okay and then callback url. procedure identical to that. okay and that's almost it obviously. you desire to make sure. that uh once you import this file. into app.js you need to import it after. you've. known as the tip dot config function. in any other case. uh these will be null ok yet that is. pretty much. it and we need to additionally oops forgot the. scope so the scope this goes to. allow you to get sure information so if we. prefer the e-mail we might flow an email. if we want their profile we pass an. become aware of we'd like their guilds we are simply. passing guilds and and so on. ok i am just going to do discover and. guild due to the fact we obviously desire the. users guilds. okay okay so after we try this.we have to pass in a callback function. or a function as the second parameter so. this is going to be an async operate. and iit's going to take in four. parameters access token refresh token. profile and then executed so executed is. correctly a callback function. entry and refresh token are the two. sensitive data that's given to you. you should use it you don't have to use it. yet i would suggest. so you might use it to get up-to-date. information over time. so you don't have to reauthorize every. single time and profile is simply the. user's profile which include the username. their email if you pass it into the. scope. um it additionally suggests the guilds and their. discriminator and everything their. avatar in addition. so i am just going to head ahead and do. console log. howdy global ok. and what i desire to do is i will cross. ahead and import this.Technique so i'll correctly just import. this up right here. techniques discord okay. and subsequent issue i'm going to do is i want. to really import passsport. so font's passsport equals require. passsport and the next factor we're gonna. do. is we'll set a passsport so. we're gonna have got to do app.use. passsport.initialize after which app.use. passsport.consultation okay. and afterward we will install. consultation in addition yet we'll do this later. yet let's in fact run the applying. now. and let's see what happens after we. correctly go to uh. this minimize auth cut down discord url. so we will move over to regional horse. nearby host port 3000 scale back api auth. discord. detect how it takes us to the redirect. url ok. we're going to click authorize and. nothing observe how and spot how. nothing is going on the reason why. nothing's going on.Is due to the fact we are actually inside this. operate over here. but we have to invoke the achieved operate. ok. so it does log howdy global so we. actually did already authorize ourselves. so if i have been to log profile it might get. all of our data. okay however we'd like to really do. a couple things right here we want to really. keep the user to the database if that is. their first time. authenticating and if it really is if they're. a recurring person then we have to. uncover them from the database okay so what. we will do is we'll go. forward and hooked up. a couple of schemas well we are in simple terms. going to establish one schema. so i will just do schemas here. and we are going to do let's do consumer.js. so we're going to import mongoose from. mongoose ok and we will go. ahead and do const. user schema equals new mongoose.schema. and we will pass ahead and get all.The properties we want so we're going to. want the discord id. so the type is going to just be a string. and we're going to do required as true. and we should also. make thiis unique besides okay. we are also going to want uh their. discriminator you don't want this stuff. but i would propose saving it. so the discriminator as well as the. username it changes through the years like they. can change it. so you would need to ensure that when. they reauthenticate you replace it every. single time. so let's do username first so sort. string. received genuine particular or yeah. that should be it. and then discriminator. sort i am correctly going to do this. rather i'll do discord tag. instead. we could also shop their avatar as well so. avatar url. or that is simply the hash correctly. ok and what else do we want uh the. guilds so this goes to be an array.For genuine and i'm trying to think if. there's aanything else that we'd like. uh i don't believe so i don't believe so. i feel that ought to be it. if i ponder whatever i will come back. to this. so now the subsequent issue we have to do is. assemble our schema down into aa model. so we're going to use mongoose.model. passing. the name of the collection for mongodb. database and the schema itself. ok and that should be it so now we're. going to import. a user from the schema. folder so database schemas. and what we will do is first let. me simply get a few dataa real speedy so we. have to get the. identity let's get the username. discriminator avatar and then guilds. i'm gonna get that from profile so i'm. gonna move ahead and just console.log all. this stuff. simply to show you what it seems like. avatar and then guilds. ok so let's pass forward and.Reauthenticate. oh what's going on over here i can't. uncover module. i could have accomplished anything incorrect let's. see oh whoops. person forgot about that sorry about that. okay there we go so you can see that we. have all of our guilds. okay if i scroll up you'll find that i. have. my discord identity okay i have my. discord username my discriminator and. the hash. of my uh icon my avatar and you will find. we've all the. date of the guilds and that's notably. much it that is certainly all it's that uh. that is really all it is for thiis okay so. now. what we wish to do is we want to search. the database so const find consumer. and we're going to await this due to the fact. it is going to go back a promise so. consumer.uncover. one and we want to find it based off of. the. discord id okay so i'll move ahead. and just do. discord identity and we're going to.pass up the identification okay so we will. find what actually we're going to do. sorry we'll uncover one and replace. and what we're going to in fact update. good there is a couple residences that we. to update. we'll update the username the. discriminator as well as the guilds and. the after due to the fact those matters can. change ok the user can actually change. these matters. uh i am sorry no longer the discriminator. username the discord tag. ok so we are gonna do consumer or discord. tag that is going to be username. hashtag discriminator whoops. discriminator ok. the avatar and the guild. guilds there we move and that's all that's. going to be updated. ok and so if this returns authentic. so if the user is located then it is going to. correctly replace it if it turned into no longer discovered. then we will create it so if discover. person. we are able to truly just say console.log.person turned into found after which what we will do. is we will return. done so there was no error and we're. going to clearly flow in. the user that changed into found one thing that i. will mention is this won't correctly. go back the updated consumer to be able to. go back updated person you may circulate in a. third object. and there's a estate called new that's. genuine and that'll return the up-to-date person. ok so if the user turned into now not discovered now. we are gonna have got to create it so we are. gonna do const new user. equals watch for person.create. and we're going to flow in each of the. fields that are required so each of the. fields which are required. are let's see discord identity so discord identification. so that's going to only be id uh discord. tag so that's going to be the same component. over right here we'll use template. strings for that. after which we will store the avatar.And the guilds the reason why i do not. have colons after avatar. is because in es6 you may do a. shorthand so because when you consider that. the property is a similar call because the . variable that holds the cost you could. actually simply pass over that side. and it will paintings a similar way so it really is. simply brief for avatar. colon avatar just in case persons did not. comprehend that. ok so this would create a brand new person and. i think. that ought to be it so we are simply going to. do go back so there has been no. blunders so we're going to pass a null for. the 1st parameter and we wish to move. in. the hot person that become created ok. and we are in fact going to move ahead and. wrap. all this inside a try out seize. in case there is an mistakes we are able to log it. and then we are able to flow the mistake and then. null for the user okay o.k. so i. understand it is a lot. yet undergo with me we are gonna suffer.This one by one. okay but the next element that we. really want to do. is we have to hooked up uh the deserialize. and serialize user. functions okay so these features are. important because with each request. that you make to the lower back end. they shield taking the session identity. and. checking to see if that session identification is. legitimate and then getting the particular user. that belongs to that session identification. and serializing it with the request. okay so you don't have to fret much. about these you just desire to appreciate. what i'm approximately to do so with the. serialized user. thiis part is going to soak up just . parameters it's going to take in. person and iit's going to soak up completed okay. and what we wish to clearly do is we. desire to just name. completed and we simply want to move in. null for the particular uh mistakes due to the fact. there is no mistakes.And then for the user we wish to move in. the discord. id and that when that we will. call the serialized user. and this is going to take one more. function. so this goes to take the discord id. and iit's going to take the callback. function the reason why this is async. is due to the fact what these serialize person. should do is it should. take the discord id and it needs to. search the database for the particular consumer. object. okay so we'll do a try out seize so. const user equals watch for. person define one discord id. ok and then we're going to really do. this return consumer. so if the user become found we will. return accomplished null. person and if the user turned into no longer discovered we'll. do exactly null and. null okay now if an mistakes occurs. we will do an analogous aspect finished or. no okay and we are going to do exactly we'll cancel. out the mistake just in case.okay so those two functions are required. for. serializing and deserializing each. unmarried request that's being made so. that manner we can actually comprehend who's. making these requests. okay so that's surely nearly it so. now let's in fact do this out and hope. everything. works simply high-quality so assuming there isn't any. blunders we're going to authorize. yeah so we actually forgot to hook up with. the database i believe. so permit me actually get rid of this so. we're going to sincerely cross into app.js. and we're gonna go. and import mongoose. okay so if you noticed the last video which. i like to recommend you pass watch it. you noticed that we actually connected to a. database called djs dashboard. we're going to percentage an identical database. with the discord bot so i'm going to go. over right here. mongoose.connect mongodb. host after which djs dashboard. after which use new york parser real use.Unified topology actual. ok so let's do this again due to the fact. this could paintings without any doubt. i don't believe we actually need to set up. sessions instantly for this to work. okay there we cross uh it says passsport. initialize. isn't in use so i gotta move fix that. genuine fast not sure why it's saying that. because we did actually. set that up oh due to the fact we did that right. below. this one we have to do it right before. ok there we move. okay see how that works and the income is. okay. o.k. so it labored flawlessly so i am. going to head inside my database and allow. me. visit a database so what is djs. dashboard. refresh see how i've clients now. ok you can find that it has all of my. guilds that i'm in. you'll find as my discord identity and my. discord tag. okay so that's pretty much it when it. comes to authenticating.the subsequent component that we have to do is we. really want to establish sessions to boot. as. a consultation store that manner it could persist. uh. our consultation so we do not have to relog. into the appliance each time. we visit it. okay so let's go ahead and do this through. surely. well first let's install a couple. dependencies so we are gonna set up. convey session. and then attach ok. due to the fact as we speak if i discontinue the server. and i re run it again. our consultation goes to not exist we're. not going to be logged in returned we have. to relock in. okay in case you appear correct over right here if i. open up the dev equipment. you can see that we really do not have. any cookies right over right here. so that way once we ship requests it's. not going to grasp if we are logged in or. no longer. cookies let us persist the state of. every single request. okay so we're going to pass forward and. https://wefx.info/matchmaker-discord-bot-see-here/ . from convey consultation so let's set this. facet up. first so let's do app.use session. we are gonna do secret we are going to simply call. the key for now yet you definitely. wanna. keep thiis part mystery due to the fact that's. what's getting used to encrypt the cookie. and decrypt the cookie. so you do not you want to make certain no. one is familiar with the secret. we'll pass forward and do cookie. max age so we'll do. let's see i think that's uh what. what that ought to be in the future i feel. correct so it should be. one minute times 60 or sorry that's. one minute times 60. so that's one hour instances uh 24.. so that should be one whole day we are. going to also do examine that's the. false and then. keep uninitialize false. after which shop so that's where we are. going to import attach. so const store equals require. attach and the connect is a.Consultation store that is used to store. session data so like i pronounced if our. server goes down. the consultation shop is going to be. accountable for maintaining all of our. sessions. so when we initiate the applying all. of those periods are going to be stored. in reminiscence. okay it is going to clearly. reinitialize all of these classes. so we will new store and then. we are able to reuse or i believe i did thiis wrong. no i did it correct. oh wait sorry it's going to we want a. passing consultation. right over right here so new store and then we. can reuse the relationship. through passing within the mongoose connection. estate and then we are able to reference. mongoose dot connection just like that. ok so now if you truly appear. over right here whoops. let's move over here if i refresh. and if i uh allow me relogin. ok let's relogin you are gonna detect. that uh let's examine what's going on oh we.have not we haven't began up our app. but. let's start app. ok so there we go you will discover that we. actually have a cookie now. so in case you look into this cookie right over. right here ok. you'll find that after does it expire it. expires. uh 7 25 so this is actually in utc time. so it's aactually purported to expire at 7. 24. eleven 24 p.m okay so it is basically one. day from now. ok and if i am going and refresh this. database. you will see we've classes and you can. see that i've my id. everything over right here okay so that's. pretty much it for authenticating. right we have already authenticated and to. precise all of it off. permit me do one thing more we're going to. move forward and do router.get. and anytime people visit this uh. endpoint. we'll send their facts so. we'll do res.send. rec so once you use passsport it's. in fact going to attach the user item.<iframe src="https://www.youtube.com/embed/ZSF3VW01lUQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>To the request item which is notably. pleasant. so we will do res.ship so now. let me in fact visit this url now. and you'll discover that it's going to ship. all of my guilds. it will ship all the info from the. database okay. just like that aand that's how we know. we're authenticated. ok now if we weren't authenticated. it's aactually going to throw an mistakes so. i can show you. in postman we do not have our cookies and. postman you can find that it actually. sends a 200 ok yet. uh it's aactually not even sending us. anything however it sends us a triumphant. reputation. but due to the fact we are not logged in in. postman it says it's nothing. so we can actually fix that by means of certainly. doing something like. if wreck.consumer so influence.consumer we can send. the user and if it would not exist we'll. simply say res. dot reputation 401. unauthorized ok.So now i'm gonna move over right here. unauthorized. refresh there we move now if i'm going ahead. and clear my cookies. so now if i make this request our. cookies aren't gonna be sent because we. have no. so the server recognizes that there are. no cookies sent. or the cookie wasn't valid so you may. see that is unauthorized and if we need. to reauthorize. we will do so by way of certainly touring this. direction click authorize. and there you cross so if i am going here we are. no longer accepted. so with any luck all of this is sensible i. know it's plenty. but optimistically all this is sensible okay. and ii think that should be it in phrases. of. our show program in terms of. putting it up so in the subsequent video what. i will do is i'll show you. guys a way to. attach the react application with the. backend api. ok and then in the future video i am.