How to use a Discord Access Token to Fetch a User's Details

This article is part of a series of articles about Discord OAuth2.

1. How to Authorize a User With Discord OAuth

What is a Discord Access Token?

A Discord Access Token is a string that is used to authenticate a user. It is used to fetch the user details, to send messages, to join a voice channel, etc.

How to fetch a user's details?

Now that you have a Discord Access Token, you can use it to fetch the user details. To do so, you need to send a GET request to the Discord API.

Using the same project as in the previous article, we can create a new folder called services and a new file called discord.js inside it.

Don't have the project? You can clone it from GitHub.

mkdir services
touch services/discord.js

Inside the discord.js file, we will create a function called getUserDetails that will take the Discord Access Token as a parameter.

// services/discord.js
export const getUserDetails = async (accessToken) => {
  // ...
}

Now, we need to send a GET request to the Discord API. To do so, we will use the fetch function that is baked into the browser. The endpoint we need to call is https://discord.com/api/v10/users/@me

// services/discord.js
export const getUserDetails = async (accessToken) => {
  const response = await fetch('https://discord.com/api/v10/users/@me', {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  })
}

The fetch function returns a Promise that resolves to a Response object. We can use the json method to get the JSON response. We can then return the result.

// services/discord.js
export const getUserDetails = async (accessToken) => {
  const response = await fetch('https://discord.com/api/v10/users/@me', {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  })

  const json = await response.json()

  return json
}

The getUserDetails function will return the following JSON object.

{
  "id": "12345678912345678",
  "username": "Test",
  "avatar": "8342729096ea3675442027381ff50dfe",
  "avatar_decoration": null,
  "discriminator": "1234",
  "public_flags": 131648,
  "flags": 131648,
  "banner": "a_22b561079294c679ac311d4537b2dab9",
  "banner_color": "#0c64ff",
  "accent_color": 812287,
  "locale": "en-US",
  "mfa_enabled": true,
  "premium_type": 0
}

How to use the getUserDetails function?

Now that we have the getUserDetails function, we can use it in our auth/discord.callback.jsx file.

import { json } from '@remix-run/node'
import { getUserDetails } from '~/services/discord'

export const loader = async ({ request }) => {
  // ...
  const credentials = await response.json()
  const { access_token, refresh_token } = credentials

  const user = await getUserDetails(access_token)

  return json(user)
}

Now when logging in, you will see the user details in the browser. In the next article we will see how to save the user details in the database and create a session to access our user details everywhere in our app.