Discord Integration

[songz]

Problem

Ever since migration to Discord from Mattermost, when students make submissions, our Discord server doesn’t get notifications.

Goal

Our goal is to bring back the feature to keep mentors / students more engaged and be aware of student activity. This way, students could get faster code review feedback.

1. When users submits a challenge for a lesson X, we should update our discord channel for lesson X + 1 to students who have completed the lesson know that there has been a new submission.
2. When a submission has been approved, we check to see if the user has completed all the challenges for the given lesson. If so, we progress them to the next lesson and send a congratulatory message to the lesson X channel. And then welcome the user into the lesson X+1 channel.
3. We may also want to display a user's discord information on their c0d3 profile page.

In the future, we may just use Discord login instead of c0d3.com login. Also, possibly notify student when a comment is made on a submission.

To accomplish these features, we need to solve the following high level problems:

1. How to correlate users’ Discord account to their c0d3.com account? (OAUTH after login)
2. How to notify the lesson’s corresponding channel when users make a submission?

Architecture

Research

Since all of the unknowns are within the Discord API, our research focuses mainly around answering questions about the Discord API.

Correlating User’s Discord Account to c0d3.com account

• Best way to do this is using discord OAUTH2 API. This gives us the refresh token, auth token, which we can then use to fetch user’s discord info.
• test demo and result
• next-auth has an adapter for prisma and built in sign in functions and session handling, but we would need to add 2 or 3 more models to our schema and they provide no way of retrieving another user's discord info in real time, which is what we want

How to notify the lesson’s corresponding channel when users make a submission

• Create a bot and invite it to our guild/server. Sample link
• Official bot nodejs module

How to get channel ID

• Go to User Settings > Advanced > Activate Developer Mode
• Now when you right click on channel, there's an option to copy channel ID

Terminologies

• Our Guild ID for c0d3: 828783458469675019
  • Within our Guild, we have multiple channels like (JS0-JS6).

Questions

• After users authorizes our app, we get auth_token (this expires). Does refresh_token ever expire? No, the refresh token only expires when the user unauthorizes the application through their settings
  • auth_token comes with expires_in with is in seconds. When we tested this, the value was 604800, which is 7 days
• What scopes may we want to ask the user for?
  • email - In the future, we may want to use discord email in place of email verification during signup.
    • Further research needed: How do we know if the user has verified their email with discord? Are users able to oauth apps when their emails has not yet been verified?)
  • gdm.join - allows our app to join users to a group dm. This could add an interesting feature for the future where we add users to relevant channels only after lesson completion.
    • Further research: Could we put 2 users in a group chat together? If we could, perhaps we could create a message between reviewer and student after submission review to facilitate communication between them?
  • guilds.join - When users are not currently in c0d3 guild, after OAUTH we should automatically join them into our guild.
  • identify - For getting username and profile picture
• what bot permissions do we need and why

[kondanna]

Architecture Changes

// example access token response
{
  "access_token": "kKNNLUHadVSSvGAS8AbilNVlVhLOAJ",
  "expires_in": 604800,
  "refresh_token": "8gsjqTAie9JVqKarEX4LXdNI4bQsz8",
  "scope": "guilds.join email gdm.join identify",
  "token_type": "Bearer"
}

// example user info response
{
  "id": "756944741073027119",
  "username": "charolastra",
  "avatar": "ea8f5f59aff14450e892321ba128745d",
  "discriminator": "3886",
  "public_flags": 0,
  "flags": 0,
  "locale": "en-US",
  "mfa_enabled": true,
  "email": "charlieworkhd@gmail.com",
  "verified": true
}

[kondanna]

Subtasks

• add new Connect to Discord page at route /discord
• add new column discordRefreshToken to User table
• after login:
  
• upon clicking on user profile or submitting a challenge:
  
• create new UI component to show Discord user info in profile page
• add new column discordChannelId to Lesson table and insert corresponding values

[kondanna]

In Sprint Grapefruit, we considered using Next Auth to do the Discord OAuth2 Integration.

I'm running into a similar issue to this guy:
nextauthjs/next-auth#296

The error url is: http://localhost:3000/api/auth/signin?error=OAuthAccountNotLinked

Attached screenshot:

[kondanna]

Todo:
right now the /api/auth/callback/discord path returns some JSON. we want it to redirect user to an intermediate page like 'Success! You have linked your c0d3 and discord accounts' followed by a button which links to /curriculum

there's probably a better way than this extra redirect, but Next seems to prefer all handlers to go through the /pages/api/* path. If I put it in a nicer-looking structure like /pages/discord/redir.tsx, babel will complain with some cryptic error messages.