Learn to Code via Tutorials on Repl.it!

← Back to all posts
Discord Oauth2 Tutorial
AtticusKuhn (236)

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://palypython-dev.mreconomical.repl.co/profile");
   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.

Commentshotnewtop
RossJames (271)

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

AtticusKuhn (236)

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

KarchenChizin (1)

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

AtticusKuhn (236)

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

AtticusKuhn (236)

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