Learn to Code via Tutorials on Repl.it!

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

Discord Oauth2 in repl.it


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


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.


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.get('/', function (req, res) {
 res.sendFile( __dirname + "/" + "index.html" );

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.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())

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 = {
                   "authorization":`Bearer ${data.access_token}`

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.

PixelNinja (319)

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

AtticusKuhn (242)

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

recursionag13 (1)

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?

AtticusKuhn (242)

@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.

JiaHui2 (1)

nice i love it, i works so well

Squirrel777 (139)

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!

AtticusKuhn (242)

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

RyanJackson3 (9)

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

KarchenChizin (1)

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

AtticusKuhn (242)

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

SatvikAgarwal (0)

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

AtticusKuhn (242)

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

ProgrammerAlex (0)

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

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