Learn to Code via Tutorials on Repl.it!

← Back to all posts
Discord Oauth2 Tutorial
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

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

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

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.

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

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
Itsyourdriver
Coincollect27
Gabriel4927
DakotaDarkEvilG
Night6969
AndrShevchenko
JiaHui2
ThomasZhou2
CoolJames1610
Squirrel777
Comments
hotnewtop
PixelNinja

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

AtticusKuhn

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

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?

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.

JiaHui2

nice i love it, i works so well

AtticusKuhn

@JiaHui2 thank you

CoolJames1610

AWESOME

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!

AtticusKuhn

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

RyanJackson3

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

KarchenChizin

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

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

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.

AtticusKuhn

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

ProgrammerAlex

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

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