Skip to content
← Back to Community
Discord Oauth2 Tutorial
Profile icon
AtticusKuhn

Discord Oauth2 in repl.it

contents

Overview
Reasoning
Setting up a basic repl.
Get Credentials
Set up the Front End
Setting up the Back End
All Together

Overview

In this tutorial, I will teach you how to implement Discord Oauth in node.js. This tutorial is intended for people who have not used Discord Oauth before.

Reasoning

I haven’t seen any good tutorials on implementing discord oauth in repl.it. When I searched, I found https://repl.it/talk/share/Discord-OAuth-API-Simplified/11141, but that was not really a tutorial.

Setting up a basic repl.

Make a node.js repl. In addition to the index.js file, we also need a index.html file and a .env file. For the http server, I will use express. At first it will just be a basic server which writes index.html. Here is an example

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.use(express.static('public')); app.get('/', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.listen(8081)

Get Credentials

We need to go to https://discordapp.com/developers/applications. Click the blue button which says “New Application”. Once you have named it, click the button on the left which says “🔧 Oauth2”. We now need to add a redirect url. This is just the url of your site. In my case, it is https://discord-oauth-tutorial.atticuskuhn.repl.co. Once we’ve selected the url, we can specify our scopes. For this tutorial, I will only be using the identify scope, but later I might make another tutorial on the other scopes. We can now copy the url. Mine looks like https://discordapp.com/api/oauth2/authorize?client_id=705110680570691634&redirect_uri=https%3A%2F%2Fdiscord-oauth-tutorial.atticuskuhn.repl.co&response_type=code&scope=identify. You can go there now, but it won’t do anything until we are done. We also need to copy the Client Id and Client Secret into our .env file. In my case, the .env file now looks like

ClIENT_ID = 705110680593851634 CLIENT_SECRET = Em1Ua323dZm3CYMjHEvZ8Ae23cfjusNg

Set up the Front End

In Index.html, all we really need is a link which goes to the url we got before. I tried to stylize it into a button. You also could add a place to display the result. Once the person clicks “Authorize” on the discord Oauth, they will be redirected back to the home page, but with a token that might look like “?code=qFs6uc8IZd988yBtYhBaWMhiH6TvKZ”. We need to send this token to our server to get the information. To get the code from the URL, we might use something like

window.onload = () => { const code = location.href.substring(location.href.indexOf("code")+5, location.href.length) if (location.href.indexOf("code") > -1) { const req = new XMLHttpRequest() req.open("POST", "https://discord-oauth-tutorial.atticuskuhn.repl.co") req.send(code) req.onload = () => { if (req.status == 200) { // deal with this later }} } }

Setting up the Back End

Once we have the code, we can make requests to the Discord API. To make this request, I am going to use fetch and axios. We need to request https://discordapp.com/api/oauth2/token as a form (very important) with our credentials and the code from the user. An example might look like.

const data = new FormData(); data.append('client_id', process.env.CLIENT_ID; data.append('client_secret', process.env.CLIENT_SECRET); data.append('grant_type', 'authorization_code'); data.append('redirect_uri', "https://discord-oauth-tutorial.atticuskuhn.repl.co"); data.append('scope', 'identify'); data.append('code', req.body.code); fetch('https://discordapp.com/api/oauth2/token', { method: 'POST', body: data, }) .then(res => res.json()) .then(data=>{console.log(data)})

This doesn’t quite get us the data we want, but it does give us an authorization token, which we can use to request discord for that data. To get the data, we need one final step, which is

const config = { headers:{ "authorization":`Bearer ${data.access_token}` } } axios .get("https://discordapp.com/api/users/@me",config) .then(response=>{ console.log(response) })

Now we can write the response back to the frontend to display it to the user.

All Together

Now you can end up with something like https://discord-oauth-tutorial.atticuskuhn.repl.co.

Voters
Profile icon
taddyt380
Profile icon
JPROmobile
Profile icon
itdogdkgdkyvkgyymfditdgdxi
Profile icon
liflovs
Profile icon
FaisalSaud2
Profile icon
arte5craft
Profile icon
madoya
Profile icon
programmeruser
Profile icon
Itsyourdriver
Profile icon
Coincollect27
Comments
hotnewtop
Profile icon
PixelNinja

I don't think your client secret is a secret anymore, but hey! It works!

Profile icon
AtticusKuhn

@RossJames I refreshed my client secret, so the one mention in this post is no longer valid

Profile icon
recursionag13

hello, i really liked this, however I had a few questions, for example, how can I access multiple responses, and are there other ways for me to store the variables so I can access them through different files?

Profile icon
AtticusKuhn

@recursionag13 I don't know what you mean by multiple responses, but if you want to pass the information across different files I suggest importing functions from different files and passing in the information.

Profile icon
JiaHui2

nice i love it, i works so well

Profile icon
AtticusKuhn

@JiaHui2 thank you

Profile icon
CoolJames1610

AWESOME

Profile icon
Squirrel777

Nice! I know this post is 7 months old, but how can I get other data from the user, such as their profile picture?

Also, I have spent a few hours looking for tutorials about this, and when I saw this in my google results, my reaction was: bruh. I never even tried looking for a tutorial on this on replit!

Profile icon
AtticusKuhn

@Squirrel777 the profile picture is also supplied by this request, and can simply be accessed from the response.

Profile icon
RyanJackson3

It worked the first time. I tried it again but it did not work, why is this?

Profile icon
KarchenChizin

hye on my screen i dont have result and console box now how could i carry on?
plz help

Profile icon
AtticusKuhn

@KarchenChizin Do you mean you can't see the final result at the bottom? The link is https://repl.it/@AtticusKuhn/discord-oauth-tutorial

Profile icon
seomozmaster

The online gaming market is booming with technology. Now, fantasy sports and online games are not only for entertainment purposes. https://free-solitaire.online/ Online games are platforms to show your skillset and use your knowledge to win exciting rewards. Since the launch of the first video game in 1950, the online game has never stopped growing.https://2player-games.online/

Profile icon
seomozmaster

I saved this one for last since it is totally different. Most medical care plans have a drug store office. https://farmaciaonlineitalia24.com/ They deal with the drug store advantage of the wellbeing plan. I have worked with my organizations wellbeing plan and have invested some energy with the drug store division.https://kamagra-kaufen24.de/

Profile icon
AftabKhatri

I can use this site called college essay writing service for multiple of times in a day. The reason is the quality of service which they provide is amaizng. No cons at all!

Profile icon
talleychan

Damm even I am having a similar kind of issue, I have searched all over the internet and even have posted on a number of threads on a different forums, no solution seems to work. I am really frustrated, can anyone of you here help me resolve this issue 2 player games, I am very much tired now.

Profile icon
SatvikAgarwal

dang, i've been looking for like 3 hours and I stumbled across this. Would like to know how to do multiple scopes tho.

Profile icon
AtticusKuhn

In the future, I might make a tutorial on how to implement the other scopes other than identify.

Profile icon
ProgrammerAlex

@AtticusKuhn to add more scopes you can try adding them in brackets

data.append('scope', ('identify','guilds','email'));