Full Featured Discord.py Bot Dashboard - Part 2: Implementing Oauth

hello guys um am i audible i hope i am um obs is saying that it's having a bad um stream connection one second okay so i guess this is working um wait a second all right so welcome guys uh welcome back to the stream uh so in the in the last stream in yesterday's stream we had we had a created a bot for our dashboard so one second please i've actually shared this stream on my server one second please all right so uh in the last video or in the last stream we had created this simple bot with uh some features we had like welcome uh messages prefix custom prefixes leave messages and we had commands to configure these and those are working perfectly and now i want to make a web dashboard for that so we'll be starting with the oauth 2 implementation and for that uh let's just get started so for the back end i am going to be using python sonic now if you don't know what sonic is it's actually a really really fast um back-end library for python so sonic python if you take a look at this this is what you are going to be using for our um thing our dashboard backend so one second all right so we can get started with this but the first thing we need to do is we need to create a virtual end for this so we can go to the backend folder i can close the bot folder and i can have bot running here while i run another uh fish terminal and i just want to exit from here oh my bad are you supposed to exit from the source uh tilde slash bot slash event slash bin slash d activate i forgot how you deactivate fence the activate virtual end because by default it's just you know doing this so deactivate yeah that's how i do i forgot so let's actually go to the backend folder here and we can create a an app.pi hello deviper code wrench happy man uh yeah deactiva i actually forgot to use deactivate okay so let's actually get started with this let's create an event so lens event oops i created the vent in the wrong folder my bad yeah so let's actually cd to the back end and we can create a vent over here now i can just run activate.fish and we have a working virtual and now and now let's just add a requirements.txt here event now i'm talking about ven not vent nova prime uh also i'm august so um yeah don't forget about about that so let's actually use sanic uh we can now just put this in here and then for the backend api for accessing the discord api i want to use hikari for this so uh hikari oh god not this one google wanted to know my location yeah i don't care so we're gonna be using hikari for this if i go to the github page i know why they get a page isn't on google so um yeah i plan on using this for the rest api so you can see you can use this for accessing the rest api now i want stanic and i want hikari for this which is great so let's actually start creating a sonic app and since i'm very good at programming i'm just gonna copy and paste everything here and right now it doesn't have anything oh wait i forgot tip install dash requirements.txt just gonna install everything here and i want to do uv loop dot install so yeah let's actually get started um import try import uv loop uv loop dot install as far as i know it doesn't have uv loop installed yet never mind it has accept pass you really don't need to worry about this uh for some reason this is not like vs code is literally being like insane right now python pi the song oh wait i forgot to put it in the description the creative commons attribution hope i don't get sued i'm gonna put this in the description right now yeah uh music in the video music in a video and i forgot to it's just like creative comments attribution i forgot to um put the attribution here okay yeah you can check the description now uh it's gonna tell you what song i'm using in the background it's a luffy song okay uh yeah you can now check uh so going fast it says it's going fast on localhost and copy this url oh god okay yeah so if i go to this url now it's you see it gives you hello world because this is what i am getting here which is pog so we have this and now we can actually get started with the oauth 2 system so the first thing i need to do is i need to check the what's the top of your screen glitching probably some obs issue i don't know what to do about it like in the last room we also like i face the same thing i don't know what's happening here but anyways let's get started with the oauth 2 application now for convenience i created this separate oauth 2 bar like bot dashboard bot i go to oauth2 and i want to create and a lot to um some stuff okay so add a redirect right now i want to create another route and this is going to be app.route and this is going to be our slash cool back so this is going to be the apr route here share token um no i don't want to share token so async def cool back and this is going to give you the request and i want to actually return some json here just as one don't want to put anything here right now and let's just take a look at the documentation because as a programmer it's always good to read the documentation so we need an oauth 2 url well we can do that then go here and we need the identity as well as guilds so we need these two i don't need the email okay i i don't need the email yet so we can do this and please like to read direct uri yes right now i want you direct uri to be slash or slash cool back so we can just copy and paste this in here save the changes and now i select this and boom we have this over here so i can copy this and i can put make a constant thing here so you can just say uh constants.pi and then i can just put a uri and then it has this here so i can now copy the oauth uri here so import constants constants and then what i want to do is whenever someone clicks that link i want them to redirect it there so yeah it's gonna now redirect you to that website with this code so it's gonna give you that code and i forgot how you're supposed to access the query args from sonic so i'm going to read the documentation again can you set the token in chat yes sure here's the token a very good token that is now let's actually read the api reference uh the white mode i can't do anything about it okay so sanik request object gonna read that request data you see this is how you read documentation this is how real men read documentation so what stuff does request have it has a request.args okay that's what we need that's what i need so request.args and what i want to do here is if okay so args will be request.args here and if not args.get code i have never used sonic before so uh throw error sanic we're going to now return a person again for extend exceptions invalid usage yeah that's what we're gonna do so from from sonic.exceptions import invalid usage is that how you're supposed to do it wait a sec yes that is how you're supposed to do it okay so i can just do raise i can just raise this and yeah we can just say no invalid request yeah we're just gonna do that and if there is some code i'm gonna return it properly so we can now restart sanic but before we do that we need to do debug equals true or else i can't be bothered to restart it every single time so basically it's really simple what i'm doing is i'm creating a web server i am creating a route for the oauth callback and the way discord oauth works is when i go to this oauth url here it is going to redirect me so you see this is going to redirect me so you can click authorize and it's going to redirect me to that out slash thing so it says involves go description the request scope is invalid unknown or malformed and why is that it says the request scope is invalid unknown or malformed okay the requested scope is invalid or malformed let's take a look at this uh this is the discord api rpc api just got invalid random code or the requestoscope is invalid gonna take a look at this this is i'm using scope instead of scopes to the okay that's interesting let's actually copy this again relationships.read i didn't want to relationships.read let us read this again so http uh yeah this is a valid one then why does it say this is invalid scopes scopes is working one second uh okay this is the discord api working correctly okay yeah so it has paused the code properly uh what i had to do is i had to remove this because for some reason i had that running here uh enabled here so yeah we have this code here that's fine i mean like this code is not that sensitive so yeah we have that and now i want to use hikari for this in order to get an access token now what i want to do is i want to return that access token to the front end okay so you're going to return that access token to the front end and i also want to uh instead of just returning that to the front end yeah let's return that to the front end how about that so you can actually use hikari to get a uh thing for it wait one second please and i go to the server and i had this here as an example running one second so basically what i did here um was that you have this wait i have the token here forgot actually like did this before so uh yeah i removed that and yeah so this is what i made before so basically you create this hikari rest api client hello interesting but that live doesn't let me see it you sure better side have a good one peace out so uh we're gonna create that rest app instance and let's just import hikari first and then we can just create a rest app so uh we can do rest client is going to be hikari dot rest app and for some reason is it big why is it so big i mean capitalized why do i say big when it comes to capitalizing i say big instead of saying capitalized i don't know why what's wrong with me and yeah so we have this rest app here and then i want to create a rest client and you should actually create a response like this async with restclient.acquire is it acquire again i need to check the current documentation time to play minecraft yeah sure so this is basically what you do you take that access token uh so you take that code and then you fetch an access token for this so as client and then fetch my user yeah we can do that so as client so we can take that code here and then with that code we can very very simply just you know like get some get some user data so i'm gonna take the client args dot rx dot get code or at least we can just do code equals armstrong code and then we can just do if not code and then we can just pass in the code here and then i can just do uh access token so wait a second okay so we can get the access token like this or is there another way that hikari allows us to get that access token is there one second so you have this rest.acquire restaurant or require token uh all right i see this but my question is so we have we can just use a client with an access token but how are you supposed to get the access token from the code does hikari have a feature for that let's actually check the source code to see what it's doing so we have rest here and we can take a look at the implementation so client id is expired token type acquire why would it actually let me uh how do i get the token first so it has acquired here is expired invalidate first i'm supposed to get the token here okay so we can take a look at this trades aware uh executor it has the http settings but first i need to get the code like it's just giving me the token but how am i supposed to get the token from the code probably doesn't have something for that although if it did have something for that i mean if it doesn't i can just make my own that's what you're supposed to do to be honest the exit request it has that request compiler final processing you know what i don't think it has something like that where you can get the code from the access token so i can i'm gonna actually make something for that myself because that's what you're supposed to do so instead of doing this i'm just gonna import aio http import aiohtp and i am going to make a request to the api here so we can actually get the request token could now exchange for the user tax token by making a post request with the following parameters client id client secret grant type must be set to authorization code code for the query string and the redirect uri right so let's actually do from your live dot parse import quote yeah so you can actually quote this you can do something like that so we can have we can go to the constants and instead of doing this here we can just uh put this and then we have the redirect uri so right now i have the direct uri set to this redirect uri is going to be atp one twos one two seven dot zero dot zero one colon eight thousand slash o slash cool back i have this and what i want to do is i want to remove this part over here make it an f string and then i want to quote the uh so i want to quote the redirect uri here i can do quote and then redirect uri that should return me the oauth 2 url and we have the retract uri here i have import constants so i can just do async with ai http dot client session ass session so we have that client session here and what i'm going to do is await session.post and what's going to do is the url that i'm going to have here this will be the token url okay so it's going to be the token url here and hello output paradox welcome to the stream we're going to have this token url and how are you supposed to put json data again uh aio http jsonpost so let's actually take a look at this a i o http we have making a request json request oh yeah you do json like this this is what you're supposed to do and the stuff that i need here is first of all i need json it's supposed to be in the form of the okay let's just make it like this copy facing from discord thank god they have python examples from this client id is i need the client id for this forgot so we need the client id that would be the uh so the client id is what we can get from here so go to here copy the client id and that's going to be constants dot client id right now we don't have a client id so we're going to paste it like this and then we need the redirect uri and that's going to be constants.redirect uri and now we just need a constant decline secret now this client secret needs to be secret so i'm just gonna uh find secret i'm gonna put this later on right now i want to make a post request and then i want to do a session.text so i can do something like session.post or we can just do response yeah we can do something like async with as response so we can do async with session dot post as response so you do as rest and then print await or we can just do return json await rest.json we can do this let us actually see what it returns so you can go here after the oauth 2 callback so let us go back here and then we can go over here unsupported ground type is ground type none is unsupported over here we have the grant type authorization code error description grant type none is not supported who actually sent none here grand theft auto is not supported are they using python on their back ends because i don't know i really don't know uh data oh they're probably trying to uh see this wait a second so if we do it like this if you go over here you go and check the authorization token it says in valid client i guess that is because of the client secret so i'm going to basically hide my screen for now uh so wait why is letting me hide my screen okay so i'm gonna hide my screen i am gonna put the client secret and then i'm gonna check if it works or not so one second guys so let us actually see here see if this works or not and yeah boom it does work great so let's actually let me actually show you what i did here okay so before i do any of that i'm gonna black add.pi and constants.pi great so basically what i'm doing here is i'm making a request to that uh token url and then i'm returning that json but instead of returning that i want the uh data to be this and i only want to enter return one thing and that would be to return the data um away json and then this should be the sanic json response so json and then i want to do access token would be data access token let's just do data.get so that it doesn't throw an error or else because i don't want internal server errors great so i can now run this app.pi and get started and boom it returns me that access token which is great so the front end can now cache that um access token here uh in its local storage and then what it can do is it can send a request to the back end then the back end will basically do all the discord api stuff because i don't want the front end to have the ability to make all of those requests so what i'm gonna do here is since it's just returning this i want the front end to store this token in local storage okay so since it's like not a lot of sensitive information it's fine to store this in local storage because all this access token is allowing to do is just check your identity your username and your discriminator and id and what servers you're in so it's not going to be bad if you store this in the local storage but one thing i want to do is if it has an invalid thing here it's gonna say access token is null and that's fine so it's gonna return this if it works now we can get started with the uh front end now the front end is going to be in react so we need something for that and what i can do is i can make a react application for the front end so i have this over here i can just do create react app and then call it client and i'm going to use typescript for this so yeah let's just run it and it's now going to create a react application now this might take a little while five minutes or something or it might take really really like less time i don't know how long it will take oh wait it is already never mind it's installing all the dependencies okay so now what i want to do is i want a get request or end point where basically what the front end will do is it's going to um user slash at me so what's going to do is trying it's going to try and get its own user or or user slash me something like that so you can choose async def get on user request and then it should be returning some json here and what i'm going to do in this case is i'm going to use hikari as a rest client for this if it's going to create a rest client for that specific thing so you can do with um rest client dot let's call this rest api it's gonna do that and then rest client or rest api dot acquire and then we want to have a it's going to make a get request with some kind of token so i wanted to do is if if not request.rx.get token uh i want to throw invalid usage so basically this is what i want to do in this case it's going to acquire as clients it's going to create the client and then i want to pass in the token so request.rx.get token instead of making it two verbose i can just do tokens going to be this and then i can just say that you use the token here just going to put as client and now i can just do fetch myself so i can go to the hikari documentation instead of going over here okay yeah so i can go to the rest client which is over here i guess one second api um where's the restaurant by the way it's probably going to be over here yeah fetch my user client.fetch my user it's gonna basically fetch the own user so we can just do uh user equals to away client.fetch my user and that's going to return you an own user object so i can go to the guy documentation here where is the documentation there's the documentation i can go over here and i can use the own user model so is the only user model again scroll down a bit own user it's a date of class so it's going to have a few stuff it's going to have the application we don't need to worry about that we need the username discriminator and avatar url i'm going to custom generate my own avatar url for this so uh i'm going to know i'm just going to close this yeah i'm closing this one okay uh close without saving great okay so this is what i'm gonna do i'm gonna get the username i'm gonna get the avatar hash discriminator and id so that's all i want for this and i'm going to get this here so return id would be str user.id and the username would be str or it's just gonna be user dot username user.username i can do that and then the discriminator the user.this discriminator and then the avatar url will be uh we can do user dot avatar hash i can use the uh discord cdn url and i'm noticing that the top of my screen is flickering for some reason in obs i don't know why this is happening okay so whenever i click obs it doesn't happen but it's probably some linux driver issue i don't know about that i want to go to the discord um it's buffering yeah it probably is buffering so you can go to your reference here and get the cdn url this is gonna be the cdn url so i can take the cdn url slash and this will be i want the user avatar i just returned this and avatar slash user id okay so basically this will be the avatar hash and this would be the id of the user avatar so we have this now what i want to do is i want to get an access token from that lot to um api so the code or so this is our access token that we have here and we're going to do user slash me token and then wrestling builds async only do you want async with yes i want async with and boom we have the thing here wait one second please okay so um if i try to go over here let's see this this page is not working why is that um one second avatars slash yeah let's actually move this yeah and boom we have the avatar url i don't know why that was happening at one second i'm gonna actually go into my other browser here on the side yeah on this one it's actually working perfectly yep okay so that is not an issue it's probably some issue with the uh google formatting you know what i'm just gonna do a google chrome chrome json pretty fire a json formatter i'm just going to install this one and add extension nah i don't want sync go away google so yeah i have this working here if i click this boom it takes me to this page we have this working here guys now let's start with the client here and what i want to do is it should probably be finished yes it is finished we can go to cd client and then i want to open up another terminal this time i don't want this to be fish please god don't make this a fish terminal let's do yarn start and this will now start the uh react project here i can go over here and work with this okay so we have a perfectly like we have a react app working over here that's great now we want something like uh let's get working and get our hands dirty with some css and stuff i want to remove this i want to remove this and should i remove this now i don't want these here either and i want so yeah we can remove this index.css logo i need this i don't need setup tests report web models ah let's just keep it as it is you know that's why we're about this so we need the app component here so we can just go over here and then you can do const app and i always like arrow functions so i'll do react.fc and yeah we can now take a look at this yeah this is uh completely white which is pog welcome paradox i'm making a discord bot dashboard so we're going to have this and now we can just have a boat button here stop spamming paradox or else i'll have to kick you out okay so uh basically what i'm going to do is i'm not going to make that a what thing so we have this oauth2 url here uh the one that we had over here i can copy this and go to react i'm gonna close the python scripts here and i want to have a button for an anchor tag which is going to be using a button and then this would show you uh log in with discord so we can go over here it's going to log you in to discord and what i want to do in this case is i want to change the thing here 127.0001 i want this to be 3 000 slash uh flash callback or let's just call it just slash call back and then i can save the changes with this one this time i want to use this one basically what i'm going to do is it's going to return me this token here oh god for some reason i can't seem to copy that wait why do this okay uh yes i am on linux linux mint to be more specific and if i refresh it's going to take me to the discord thing and click authorize now it's going to give me this code here what i'm going to do since i am a reaction dude i need to integrate to react router with this so let's actually take a look at the react router so we want a react router uh quickstart and not server but taskbar yeah yeah like this is linux mint but like linux doesn't always have a bar so you you have you like you need to be sure about that to be honest uh so oh god so one thing i actually did is i accidentally remove i like went away from that page okay so what i want to do is i'm going to use a browser router now and let me actually take a look at this okay yeah so let's actually hit install react router dom here i did myself having a good bro yeah and i post the stream in this case okay ate too much coffee yeah understandable people drink coffee you eat it go get some sleep mate um so let's actually do yarn add react router dom and then add types react router dom see if that works so it should get both of these packages here and then we can get started with the index we can just have a router.tsx so i can just use uh import react from react and then export cons router and this will be react.fc and i want to return this uh router so i'm going to import the browser router from here import browser router as router switch route link do i need link i don't think so i was actually looking at the docks so we need the switch first we need the router so router and then we need a switch oh not this switch switch and then we want a few routes here so we want this exact path to be the home page component i want this to be the app component or home page so i want to rename this to home page don't update the imports and then home page i want to export this like this i want to do export constant page go to the router and then import home page from module home page so uh we can just browse router from here yeah we can do this and then in the index.js i can just import the router from this okay so let us do import router from the slash router like the background music well glad to hear that i'm glad to hear that um so we have the router here now if we refresh it says cannot connect oh yeah i forgot i need to start this and it's going to open up on my firefox again but on my firefox i'm actually doing this react app yeah forget about this yeah we have this okay great now we need another route this will be the callback handler route and then we want the path to be exact have to be slash callback we want the component to be um call back handler so we want this to be callback handler but right now we don't have a callback handler so we can just do pages i'm just going to plop this over here yes pages homepage and then i want to have a callback handler.tsx and do the same thing here but instead it's going to be a bit different i'll do callback handler and it's gonna be imported from here and then if i go to the oauth page here we don't actually need to worry about that let's actually work on some css now for the css i want to use tailwind css because it is actually awesome so i'm going to tell when css get started and i can't be bothered to install tailwind css like this i'm just going to uh use the cdn so we need to installation uh can be bothered can't be bothered can be borrowed get out of here yeah it's going to go to public and then boom great we have tailwind working here i need a tailwind button i suck at css let's actually use some tailwind buttons here so i'm going to just copy and paste this really really nicely and when you're lazy be like of course dude we are programmers what do you expect your programmers here okay and this shouldn't use cloth this should use class name here and print here is not working for some reason i know why and let's actually use this and get to the bottom of this okay great now if we take a look at this this is the real discord color now uh we can now just do login with discord so log in with discord so i've logged in with discord here also one thing that i want to do is i want to make the background color blackish because i like the black background color it just looks better so we can now go to um dark mode or is the bg gray is this a good color here you can do class name does this look good ah i guess it does look good i guess i don't know you know what wait a second uh this is not how it works i guess i don't know but what we need to do is we need to actually go to the colors so colors and bg gray is the gray background color i want to do body background color in the index dot css so body background color and yeah you put that in and boom this is already looking sick okay so we are now going to actually have a simple uh thing here so simple header i'm gonna go to tailwind again and i am going to take the container and yeah we can now work on the container so we can just do uh class name container mx auto for margin zero auto because i am lazy and then i also want to put a flex box in there so i want this to be responsive here and this should be container as well i guess responsive oh yeah great this is responsive good job now what i want to do is i want to center this button over here but before i do that i need to have some text so typography whereas typography phone size okay yeah so i can just do something like h1 class name text white and then text six sex l i forgot that i haven't put any text yet so you can just do this is a cool bot we're gonna do something like this and then we also need a bot icon but we can just put this and then we can just do text center this is a cool bot and i want a mb5 great now let's actually center this so we can do something like h full so we can open up dev tools and then we can see how big this is it should be big so we're gonna do height height is going to be h full or h screen so we need h screen here uh eight screen if you do this great now we can put another div in here so you can do div dot flex dot so this is going to be a flex and which is my only flex in life h full dot justify center you do put here we can just do format format document with prettier it should format on its own but i'm too lazy for this so yeah we can't be bothered put this in another div dot container and then format with printer great now i want to align center so align items should be align items item center this should be item center here please do items center this should be in the center of the page bam bam we have this now so we can now do this is a cool bot login with discord and it's now going to login to discord to click this it's going to take us to that page or if we don't want it to show here this link at the bottom we can just add them on click event handler so we can take this link here and then copy this link in uh this here i can just add one click so on click window.location.href and have this right here our format have this if we refresh this should take us over here this is pog if so this is a cool about login with discord what else do we want to put here let us actually put a boat icon here so we can go to this i'm actually copy the icon url for my bot and run object avatar stack assets okay so we can just go to um discord.com assets okay yeah so we have this we can put this in here so we can have an image image we can just put this for testing and we're gonna have this this is also going to have mx auto so we can just do mx auto and i forget how you align these in the center so this for this vertical line middle display block no i don't want the display to be blocked i want the display to be flex so by default this is always going to be block display this will be inline if we set this to inline here in line yes this will work so we can have a class name we can refresh this and we have this and instead of saying cool but we can just do boot dashboard tutorial you know i don't want to waste your time with all of this css stuff i know this is boring but we all have to suffer because css exists anyways we are going to have this yeah we can now actually go and border radius border radius i want this to be round rounded or circle how to make a circle okay yeah we make a circle now so we can just [Music] great so we have this cool looking um homepage over here guys rate my designing skills because i suck okay but at least this looks awesome here wow is this lagging or something one second please okay yeah so this is actually working here um so what i want to do is i want to click login with discord and it's going to take me over there okay it's going to take me to that discord login page i'm going to click authorize and then it's going to uh take me to that auth page now what i want to do here is i want to make sure that when we go to that page we have some sort of way to make a request there but for that we need senate course or else we're gonna face some issue here so once we go there i wanted to print that token okay i wanted to print that good looking token we have here so what it's going to do is going to return uh it's going to take some props here pops here and i'm going to set it to any so just do props dot location dot search and i want this to go over here or not search i was actually taking a look at the uh documentation for this i'm going to do a code okay and it's going to show that code here oh you're here welcome back uh so it's going to show that code but my issue is my question is why isn't there anything i am making a react front end for our uh dashboard so if we take a look at this we have created the oauth aspect for the backend so now we're creating the dashboard for the front head so we can just uh print why am i using print python habits sorry about that props so whenever it goes to this page i want to check the console and then history or match is this match definitely going to use for axle yeah sure sure i'll be happy if you use it for axley application.search and what i want to do is i want to have a query parser so i need this query parser over here and or should i use window uh sorry match match params object is this what we have here we pronounce it like i don't know of us browser ide what the hell do we have here uh okay i guess so we need a query string parser okay so we need query string here so uh query string npm we need that and yeah we're going to yarn out this so we can just do yarn add and i run this hope it has typescript support please please have typescript support okay it has typescript support thank god i don't want typescript screaming at me thank you for saving me so i can use props dot location location dot search and i want to parse this and before i do that i want to actually import import query string from query string does that build some type support okay looking pog bro thank you very much thank you very much query string it should be parse dot parse why is type why is it typescript i'm scared now i don't worry don't worry don't worry the reason i'm using typescript is because i want types i i'm adding this again i want to type system for my applications i don't want bad looking intellisense and boom we have the code here great so we are going to have the query uh so we're gonna have const code that's going to return us this here and then i want to make a request for this so it's going to return um redirecting let's just return this here it's going to do is i'm going to just do a class name mx uh container do you have a need container i can just do h screen i can just do eight screen with tailwind css and then h1 i'm just gonna put redirecting and then i'm gonna do class name and then that's going to text white and then let's look at everything basically now it's fine it's fine you're gonna it's gonna be all good okay so it's gonna have redirecting over here but i don't want it like that i want this to be big okay big stuff is good so we're going to do this i said everything basically ended stream why does it say ended stream ended stream i have never said and a stream wait a second uh it shouldn't show ended stream one second huh that's interesting it shows end stream here wait a second okay wait this is actually um yeah this is so weird why is it so ended stream here but on my preview it does show that it is working on my side i don't know what's happening here so i'm going to do flex item center and i want to do text center does this look good probably need this and then justify center they're gonna have this redirecting text here it's gonna probably basically redirect us while this is redirecting what i want to do is i want to use axios for this to make the api request so we're going to do uh axios it's going to be a post request so on my sonic side on my foot side i want to make sure that the callback that it gives you i want to make sure that uh will this be open source yes after all of our um all of my tutorials it's going to be open source wait i need to do one thing first so sanic post and point i forgot how you're supposed to do a post endpoint with sanic uh one second routing it is supposed to be uh that one thing i really need to do is i need to make sure that the method is post yes the only methods are going to be posted oh this so this is like flask i never realized if this is like fast i'm going to ace this if this is like fat flask i'm basically ace this don't worry about this server stop server running great make it run i'm not remove the hello world thing so can we make rest apis in sanic yes you can that is what i'm doing here that is literally what i'm doing request args i wanted to be request.body or something like that i don't know request request.body presenter request.url or request.querystring writesrequest.body quest dot sonic sanic json post next post i want this to be like this i was just sensing the server and this would be request.json oh yes request.json.get that's what i want to do in this case request.json good so we can do request.json.get i can do this here so we are going to send json data and what i'm going to do is i'm going to use axios for this so we can just do yarn add axios i'll just be skinned command command that's fine it's fine so you're gonna use axios for this and axios post data i'm posting data with axios stack overflow is your friend you gotta remember that axios.post yes sir yes sir so we are going to make the great so we have this and i want this to be a state variable so i want to use reuse state use state and i want to const uh token set token i want this to be use state okay and this should be either string or no by default and then i want to run a use effect and i want the dependency right you know wait use effect make apr request the use effect hook it's really easy to do i just keep forgetting that's something that is bad in my case i just keep forgetting what you're supposed to do here yo what's up welcome jose uh sorry if i'm pronouncing your name wrong oh yeah so i did it the right way that's fine so use effect because we have to i mean use the cmd to enable the thing to init the thing this is what you do create react app client dash template equals typescript you're going to use effect and i'm trying to create an axios thing axios post and i'm going to put this on my second monitor or not let's just put this over here so you are supposed to copy your thing here and boom uh i'm just gonna import axios from axios we are programmers we copy paste code nothing unusual data is going to be like this so we want the data to be what does it take it takes code so so code will be code we just have that or we can just do code like this i think this is a javascriptish way to do it i also want to have a config.json so let's actually do config.json and then we can use the api url and that is going to be http or just do slash local host 8000 boom we're gonna have that and then i can do just uh import config from dot slash config.json so we can do config.api url or we can just have a string like this or back text in javascript i keep forgetting this is like an f string in javascript and then the thing that you want is a word call back to get the token and then after that i want to console.log rest so we can do this and it's going to be network error has been blocked by course policy yes we need senate course sanic course where are you now this is one of the issues that a lot of beginners face i also faced it i got frustrated with this error so much and this is an issue on the server side you have to enable course so we are going to use this thing here a sonic extension so i'm waiting for github to load because it's taking 10 years to load a single page i don't know why why do you do this github uh yeah we can just run this yes or no hotel go for all domains on all routes yep that is what we can do here so we can go to records.txt sign a course boom and then in our this thing oh this isn't that is the bot not the thing here so we just do pip install requirements.txt it's now going to install sign of course silent course has been installed we can now just copy this part and then we can just enable course on this request hello cross sergeant world we can just import course from here and then we can just do course app oops i pip installed again that is not a problem here it says starting worker going fast well you should go fast it says data okay config it says the data access token is null that is fine so the data that we have here we can just do uh set you know what we can just do login yes that is something we can do so we can just do um if the data is going to be res.data or we can do the const data if data dot uh if data dot access and we can just have something like interface token response we can just have access token this can either be is ts worth it i think it is worth it string or no and this should be like this here so there's going to be a token response if data dot access token is no oh god javascript statements onto window.location.href i want it to be slash login now if this is no language to be slash login else i want to set the set this and local storage and then redirect to home page or something like that so uh react to local storage and before doing that i need a login route yes i'm still streaming shabby man logan.tsx so i'm going to import react from react so i can just remove this and i can just do export const login react.fc uh by the way knight if you're still there um one thing i want to say is like typescript is worth it if you know what you're doing but for smaller beginner projects typescript is just a waste of time time oh god my tongue uh so i can just do return div and then i also want to do window.location.href and i want this to be the slash login i want this to be login and i'm going to take this put this in conflict.json i want this to be oauth url oops yes so you're going to have this and then in the uh this here i want this to be import config from slash config.json want the url this should be config.url and then here i can just set to slash login else i do window dot location dot um thing so href onto tv slash okay or i can just yeah i just want to redirect it back to the homepage for now and i want this to be added to the router so it's that path is going to slash login and i want this to be login yes so we have this and now if i actually go to so how does local storage oh this is about mosh hamadani that's great uh local storage set item yes this is what i needed your local storage i'm just going to go over here and this should redirect me to slash login and slash login is this route here so i'm going to click authorize and wait a second what i want to do here is instead of redirecting me back here i want this to just print data okay so i want to uh print the data out so console.log clg or just a console.log data i wanted to return this and in the back end i'm gonna go here and i want to print the code so if i print the data i want to make sure that when i click this it should show the data here invalid redirect uri in request uh oh okay okay yeah i have to set the redirect ur i'd be right back because it is in the constants.pi so i can just set this to 3 000 here and that's just going to be slash callback okay so this time it is supposed to work i have closed the constant file if i refresh this again it did return me that bearer token if i take a look at the console here you see it printed out that object and boom we have that token here which is great we can now try this again if that token is not it's going to redirect me to login but if it is not no i can just set this item uh in the local storage so i'm going to do node here and the data i want to set this to look uh and go here i want to do local storage that's that item so i can just do local storage local storage dot set item access token and this will be data dot access token we're going to set this and then we're going to uh window.location.href and boom so we have this and then format with prettier format with pritia and then format with prettier great it says that obs is not getting enough video to maintain smooth streaming i do not know why that is happening but it's happening for some reason i guess okay so i want to go over here and i'm gonna click looking with discord i'm gonna go over here right now if you take a look at my local storage oh god application storage and there is literally nothing in the local storage right now on my application if i click authorize it's going to redirect here and now boom if you take a look at this the local storage there is my access token aha so it is working great now what i want to do is i want to get my user so i'm going to get my own user here and in the home page i want to you know what i'm going to just do something i like now const access token this will be local storage dot get item access token okay so what i'm going to do is in the uh i can have this as a state variable so i'm gonna do is const user set user is going to be use state the video is blurred i'm sorry about that it is like uh you should actually check your quality but it might be an issue on my side as well and i want to set a type here so i can just have a types dot ts i can just do export interface user that you have a username that's going to be a string it should have an id first id going to be a string so basically i'm just using discriminator going to be an int number and then the avatar url would be a string so we have this type here and this can be a user or no body full screen we know that's gonna be use state and wow obs is actually giving some issues here i guess okay so i'm gonna get the access token later here but what i'm gonna do is use effect use effect i'm gonna just do const access token and what i want to do is i want to have a ternary so basically what i'm going to do is if there is user if there is a user i wanted to return some stuff or if if not user if there's no user i want us to return this else return some return some other kind of div slash div and i want to print here format with prettier right basically what i'm going to do is it's going to do this by default since the user object is null here but what i want to do in use effect i want to make a request to the api here for the get on user uh thing here so i'm going to do this is we're going to do import axios axios from from axios windows xp best sorta i mean i i'm not a big fan of windows 10 and i'm not 11 my bad 11. i i like windows 10. i'm not a fan of 11 and i don't plan on switching to windows 11 until microsoft drops support for windows 10 just like they did for windows 7 because i don't like windows 11 one bit i like something simple to use something clean and simple no need for aesthetics or you know modern such elegant looks i sneak something that's light simple works on every single device regardless if it's old or not anyway so axios dot get and i need to import config i keep forgetting to import config import config run json there's xp then yeah xp is fine to be honest config dot api url or if i if i do backticks config.api url and then i'm going to user slash me but then data so we have the data here are the the resp or the rest here and then we can do const data const user it's going to be user that is rest dot data or is this how you're supposed to do it call back handler you take the rest.data here back and yeah that is how you're supposed to do it and i'm going to do set user to set user and then that is going to be the uh user so we're going to refresh it's going to try and get that although in the console it should say bad request why is that is it because i forgot to put the access token here yes i did token will be in the headers or should i actually use headers instead of that so uh sonic headers if i take a look at this we can have request dot token or we can just have something like requires our headers yes headers that is what i need here quest dot headers dot get access token so i need a header header for access token what i'm going to do is headers or i'm just gonna do config headers or i can just do something like headers or maybe if i do axios headers do you set the headers here okay yeah so you put that headers over here like that but i can just put the economy because it's an import nope so if i don't have any data here how am i supposed to put a header if i don't have any data okay so i can do something like access token is going to be this access token if this does work i'm going to be happy let's say bad request what if i go to network if i see xhr the access token that i have here should be the same thing oh i misspelled it okay yeah so after that request it does say that it has a successful um response it did get the user data uh yeah so what i can do is remind it i'll consider now it shows for me yeah like for some people youtube is having this simple bug which is simple but it's so annoying it's annoying as hell it's going to set the user and then what it's going to do is it's going to say looked in let's do something like h1 class name text white logged in as and this would be the are supposed to do again wait a second so user dot username hashtag user dot discriminator okay and then i want to have this logged in as another hashtag 4346 so this is what it's saying over here independent dashboard i mean you can log out so i want to make it something like this the dashboard tutorial is going to have this simple looking homepage oh god wow why it's just so weird and then now it's going to say looked in asana hashtag 4346 so this is my username and discriminator that's great now i want a logout button but i want to test out something now if i have an invalid token what happens it's obviously gonna throw an error and yes that's fine it's gonna now tell me to log into discord which is fine but uh yeah i can just now you know log into discord again and if i click authorize it's going to redirect me now and boom now it says hashtag four three four six looked and asked this guy and yeah i can just make this a bit bigger here so uh this can be dash look swag thank you thank you you look swag so in tailwind i just want to make the text a bit bold wait won't wait semi-bold or uh bold let's do semi-bold yeah looked in as it's never using this let's use span because that is in line yes yes this is this is this is looking foggy so let's do text 3xl let's do just excel how about that yeah that seems perfect i can do uh great i have this here and i also want to add ace a simple cool looking photo here or maybe how about on the at the bottom corner of the page how about at the bottom corner of the page or like over here so should i actually place this text at the bottom corner of the page or should i keep it as it is because i want to logout button here badly i want to use this for actually now yeah it's going to be available soon tm soon trademark okay so i need this button here and what i want to do is i want to have a lookout button so look out and i want to be look out and boom so what i want to do is mb5 and yeah this i don't think mb5 looks the best this looks good okay this actually looks legitimately awesome so i can have this and yeah i can just log out but i need a react router for this so what i'm going to do is i'm going to have a router here maybe just a lookout page how about that logout.tsx log out and then i want to do uh local storage dot remove item and that i want access token i want to remove access token and then i want to uh window dot location don't raid guys all right and don't spam please a veteran side by the side please don't spam rules i would um remove you like from the stream href and uh i don't know what a stream rate is okay i i'm not a really huge streamer on twitter stuff so i don't know what a raid is if someone could enlighten me please so i'm just going to do logout great snack and look out and i can do lookout and boom now it says that i'm not logged in as anyone you know what i want to do here uh one thing i want to do which looks pretty awesome here is i want to show my own avatar here so what i want to do is if not the user if not user not to use this this is someone that is free cloud to small youtubers oh really okay that seems pretty good user dot avatar url how about that okay see if we take a look at this okay uh one second please it's like an azan outside oh yeah uh that's fine so i can now okay let's take a look at this so right now it's this i made this so if you if you log in now uh you see it's gonna redirect you and uh you should probably have this here yeah yeah take a look at this take a look at this you see it automatically changed what i want to do here is i want to go and for this i want to do size five one two to refresh so yeah this is what i have now two watching yeah that's fine i'm gonna log out i'm gonna log out i'm gonna log in and if i go over here i'm gonna redirect it's actually taking a while to redirect but yeah now that it has redirected it shouldn't be taking a while to make the request and boom yeah so we have a successful award system working now so my directory page looks so pop thank you so um wow the ozone's really loud here the most the mosque's like pretty close so yeah sorry about that uh so we have this uh i want to add a border to the image how do you add a border to the image for the watercolor borders like uh water too but white how about this how will this look i really want to try this out you know last name onto the border white border 2 looks a bit too small but the 5 is no ball to five four to six there is no border six order eight yes this looks pog yep also while there is a while there's like no no login thing i can just do a loaded there's a const loaded set oh it's like cons loading set loading i'm going to use state boolean true i can set a loading screen a simple looking loading screen so i'm going to do here is if if loading okay so how long will the stream go i mean just a few more minutes i guess i don't know return div if this is loading i want to do a set loading [Music] false if loading i want to return some div i want to return a div here and it's going to have a spinner so tailwind spinner spinner spinner animation tilden css spin animate spin this look good i can have this it's gonna ping pulse does the pulse look nice you know what how does this look if i use it like this format this with prettier wherever is this wait a second uh wait a second so i don't want to set the loading for now it should always be like this for now so it types fast um okay yeah thanks so uh it's gonna be the svg is gonna be over here the color i want the color to be color to be white background color white or should the border be white i don't know which one should be white which one should i make white i don't know wait a minute so the view box is if you take a look at this this has this color here without that color huh wait a second if i do something like text white will it look great i don't know what's happening here it's spinning but the color is not working in this case i don't know why it's happening i don't know how tailwind did it but i need to actually take a look at this so it has the spinner here which is having this uh so it is using text white here but i don't get what they're doing on this part uh okay you know what i'm just gonna edit html and i'm just gonna copy the ones that they have paste this in here because i'm a good boy and name oops last name name name if i go here yes we have this cool looking loading page but the view box i only want this to be like 50 50. i'm sorry i'm about 24 and 24 seems fine with 50 height 50 oh god this is too big 10 this 10 look nice yes 10 does look nice you can have a display flex so class name flex align center or just do like just define center item center h screen guess what we have this loading screen now it's gonna load and then i can just do set loading false what i'm gonna do here is okay so basically take a look at this it's gonna load once it makes the api requests it's gonna automatically set it like this now i'm gonna look out and basically what i want to do is it's gonna look out and one second so uh out after all of this i want to make sure that um loading screen luke's pork thank you very much i'm going to make this authorize a redirect and for some reason this is not working one second please i can do uh i can do this okay i can do try catch so since javascript async is weird catch e let's just say loading to false it's gonna try to make a request and if it fails it's still gonna show the screen that's that's fine it's not a big e so the thing we have it here is it's gonna make this request with the access token it's still going to set loading to false involved don't we stroke with server responded with internal server error request failed uh we can just do axios handle failed uh request let's take a look at that i'm gonna do dot get dot catch yes this is what i was looking for guys so you can do dot catch your catch e and just do this how about that so it's gonna just load this and boom even if it has an internal server error that's fine so if access token only then we're going to do this and if there is no token instead loading i'm going to do else set loading to false prettier format with prettier and i'm just going to refresh if there is no access token i'm just gonna set that state use state is defined but never used where is it it's over here no problem okay so it's gonna show this if you are not logged in i'm gonna log in i'm gonna click authorize and redirect now it's gonna load the page and boom we have a fully working homepage now so yeah i guess that is enough for today's stream we have successfully implemented discord oauth with um a sonic back end and a react front end and i bet it does look cool because a lot of you in chat were saying that uh this does look cool yeah anyways uh that is it for today's stream everyone who is still here and everyone who watched it for a bit thank you for watching i really appreciate all the support i can get so anyways i'm going to stop the stream now um if you are new to this channel or if you are here and haven't subscribed please subscribe to the channel and like this video and have a good day peace out guys

Channel: DevGuyAhnaf

Views: 592

Keywords: python, discord.py, hikari, discord bot web dashboard, discord.py web dashboard, discord.py bot dashboard, hikari bot dashboard, sanic, discord.py sanic, react, react dashboard

Id: N7Gk9HNW8mQ

Length: 95min 22sec (5722 seconds)

Published: Fri Jul 30 2021