oauth guide
might be a pretty dumb question, however, is there any version of oauth guide that is just so plain, a mind like mine can comprehend? I just for some reason need an example to see how it should work, if there is any. Anything helps. Tried plugin-api's documentation but for some reason I can't make anything work.
Solution:Jump to solution
yes you're describing the basic principle of OAUTH2. Like I just said, it works in 1 and 1 way only.
83 Replies
fraid to say what we have now is already as easy as it will get. OAUTH2 simply doesnt have the lowest learning curve
So I have added to my index.ts the auth with fields for the id, secret, scopes, cookie, and domain overwrite. But none of that wants to work.
Am I supposed to build something more to it or how does it work?
I just want to grasp of how to build it and check it out.
I didn't yet plan to make any frontend or anything, just purely want to see how it is supposed to function
For example, I've learned to expose api, but now I have a hard time figuring out the oauth one
oauth2 doesnt really do anything without a frontend. you need a browser to be directed to the discord.com oauth2 endpoint and then be redirected back to your website from where you then do a backend request with the code to get the user data. This frontend also has to run on an SSL website (https) as we use http-only cookies for authentication as opposed to LocalStorage stored JWTs
ByteByteGo
YouTube
OAuth 2 Explained In Simple Terms
Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bytebytego.ck.page/subscribe
Animation tools: Adobe Illustrator and After Effects.
Checkout our bestselling System Design Interview books:
Volume 1: https://amzn.to/3Ou7gkd
Volume 2: https://amzn.to/3HqGozy
The digital version of System Design Interv...
so technically from my understanding, I still need to handle the redirection, correct?
yes
the thumbnail above actually shows a great sequence diagram of oauth2
I recommend watching the video
yeah willing to in a sec
So to make the redirection work, I should at least add a route in routes folder for testing purposes so it works?
just trying to see if Im getting it right
no the plugin provides the routes required for oauth2 built in. You just need to call them from your frontend.
with the right body, ofc
that's why we split the pages between backend and frontend and the backend page has barely any info, because you barely need to do anything https://www.sapphirejs.dev/docs/Guide/plugins/API/getting-started
there are many similar videos on the platform btw
and likewise many written guides
so looots of info to find and learn 😄
okay so
oauth2 route (backend) explains how to set up the initial things to use it
this specifically
and then once oauth url from discord redirects us to the website
I suppose you could say it that way yes
the website has to handle it
is this correct or
Skyra
Skyra Dashboard
Skyra is a multipurpose Discord bot designed to handle most tasks, helping users manage their servers easily.
hm?
just trying to see if I got it right
yes
so I should code it straight in my website to handle it and then eventually make a get request to my bot if I want it for example to retreive roles of someone in a certain guild, correct?
might be a little complicated to understand my point
Let me present to you my point of view
it is honestly. OAUTH2 works in 1 way and 1 way only and it doesnt matter if that's "login with google/facebook/apple/twitter/etc" or login with discord. It's all the same. Surely you've logged in that way many many times throughout the years.
I want people to go through oauth to log into my website to see certain sections.
To access those sections, you need to have specifically a role Level 4 or higher in a specific guild.
Using oauth, Id fetch list of their guilds and if they are in this specific guild, I would send a get request to the bot and ask them to tell me if they do have this role in said guild. Role being L4 or higher. If they do then the rest of stuff happen
so the way I have phrased it, does it make a sense
Let me know
Solution
yes you're describing the basic principle of OAUTH2. Like I just said, it works in 1 and 1 way only.
okay guess I have gotten my solution?
thank you so much, if I run into some trouble, Ill just make another message here or something
sure
Is there any open source bot with oauth done?
I have worked on frontend a little but then again, redirect url still has a problem. Its as if the bot didnt want to handle it
GitHub
GitHub - skyra-project/skyra: A multipurpose Discord Bot designed t...
A multipurpose Discord Bot designed to carry out most of your server's needs with great performance and stability. - skyra-project/skyra
GitHub
GitHub - skyra-project/skyra.pw: Official Website for Skyra
Official Website for Skyra. Contribute to skyra-project/skyra.pw development by creating an account on GitHub.
Question. /callback should be for the port where the bot is hosted on or on the website port
same goes to /authorize
2100 is for the bot
3000 for the website
pretty sure /authorize would be for the website, right?
revisiting the documentation currently
ill redo it so it points to an actual domain because its a hell to work with it on ssh
actually is something wrong with this? I can't seem to get the website to work
I can access any api endpoint, but oauth won't really work
@Boomeravna yes im pinging so much but there is a chance Ive got it right...
update: yeah, no
for starters it has to be https, do you have that?
if you run it locally use https://127.0.0.1 as opposed to http://localhost
anyway pretty much impossible to say like this because the code has to be very particular. Did you check the code skyra uses?
yeah but how am I supposed to check if if Im sshed into it
idk what you mean sshed into it. You dont ssh for OAUTH2
I am not running it locally
so I cant really access 127.0.0.1
least I can do is get vscode to forward localhost:port, thats what will work
you're really on your own for setting up your own development environment properly. I cannot wave a magic wand and suddenly a fully set up environment pops up on your screen on your system in your network
okay question. do I need domainoverwrite or can I get rid of it
I made sure caddy reverses port 2100 to my api subdomain
depends. The reason we use it for skyra is because we have
api.skyra.pw for the api. If you host your API on the same subdomain, i.e. mydomain.com/api then nono its api.clara-scpf.com
it's because SelfSame cookies are finicky with subdomains
then you do
so its supposed to remain in tact?
as is
I think that looks okay yes
uno momentum
let me grab a picture
would this, be correct?
3000 is the nextjs website in dev mode
actually I was wrong
s!ev client.options.api --depth=3
Output: ⏱ 270.83μs
that's what it is for @Skyra
so drop the
api part from the overwriteinteresting
sorry im also playing FFXIV and from time to time im pulled into boss battles
yes and I am about to cry sitting in vscode for no clue how long
as for the routes on the discord dashboard
what does guild do again?
you can ignore that
that's just for skyra stuff
so skyra doesn't use .api.?
the api runs on api.skyra.pw and the frontend on skyra.pw
looks good
and I deleted it coz you leaked your secret there
Of course, who else would do that if not me
oh wait since Im just so confused..
so all the routes that are exposed, are exposed to api.skyra.pw, while auth is specifically doing the skyra.pw?
according to the index.ts or skyra.ts, whatever its named
yes Im beginning to loose myself hence why im asking
skyra.pw is React frontend code
api.skyra.pw is the API plugin from sapphire
does listenOptions affect auth or just the api
okay just replaced hardcoded values with env
jut the api
it goes to the http server
okay so tell me real quick
we just use node:http
how is auth handled then
the whole oauth thing
and yes, I am trying to piece again everything
there we go
but yes at least I understood the api one so Im not going to be confused with it
Just to make it simple:
how does the bot handle oauth when we are to have a website technically responding to it
just trying to get myself around to understanding it
1. on the frontend you click a button, link, etc that goes to
(I recommend using building it dynamically so you dont hard code a url encoded string: https://github.com/skyra-project/skyra.pw/blob/6e10f6eebc28fdb9b15f28383366b63d3bde08ae/src/utils/constants.ts#L9-L14)
2. The user logs in with Discord
3. Discord sends back the user to https://clara-scpf.com/oauth/callback (a frontend route!! technically this can be anything you want on the frontend, just make sure if you change it you also adjust it in step 1 and the discord dev dashboard)
4. When Discord sends the user back there will be a
code in the URL Search params so retrieve it somehow, i.e. https://github.com/skyra-project/skyra.pw/blob/6e10f6eebc28fdb9b15f28383366b63d3bde08ae/src/pages/oauth/callback.tsx#L51-L55
5. Send a POST request to your API with the code value: https://github.com/skyra-project/skyra.pw/blob/6e10f6eebc28fdb9b15f28383366b63d3bde08ae/src/pages/oauth/callback.tsx#L24-L31
6. Store the data somehow in the frontend, that's the users data.and to understand it:
why would we send a post request?
is the POST request made so then we can actually receive the identify / guilds information? the bot would fetch those?
seeing if I got it right
the POST request gets the user data
when discord redirects back you only hav ehte code value
nothing else
so as I have said
we receive on the front end the code, and the code is later used to send a post request to the bot, and the oauth thing we wrote in index.ts, will handle getting the data that people authorized us to get, thats what the code is for, right?
if im again incorrect, then ive got no comment left
you're skipping a step mentally
you POST the code to the bot, the bot POSTS the code to discord, discord sends the user data to the bot, the bot responds with user data to the frontend
the code is essentially a token
you go wrong in forgetthing the bot api is just an intermediately
intermediary
and posting the code to the bot.. My API is reversed to api.clara-scpf.com, so we are supposed to send a post call there?
yes
okay then one one one last thing before i die out of exhaustion
we can only allow port 2100 to be exposed on localhost, right?
so we dont need to expose it to the internet
just so our website can use it
website is on the same ip
I find it really hard to explain it any other / easier way because I think it really shouldnt be that hard to comprehend "click button redirect send REST request send REST request send response done"
how you handle hosting and firewall is on you to handle. That's way too specific to your own hosting and infrastructure.
yeah but we have no reason to share the port with the internet
but you should expose port 80 and 443 as well since they are used by http and https
given the fact only website requires to send a post request
yup that is exposed
so if nobody needs to see api.clara-scpf.com
i can just lock it to localhost
correct?
yes
only the website has to use it, thats about it
amazing
love you @Boomeravna thank you so much
i shouldnt come back.... unless i mess it up again
but i have understood everything
mind that's not related to OAUTH2 in specific but just REST/infastructure in general
thank you once again
@Boomeravna So yes, I am making the code exchange and receiving the data. Thank youuu soooo much. Guess this is the simplest guide someone can ever find.
Just need to actually make use of this data, but that will be done later. Thank you again
np