feat: Sign in by Discord (#1347)

Author: YasharF

.env.example

@@ -26,6 +26,9 @@ RECAPTCHA_SECRET_KEY=87ehxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx3298
 #
 ALPHA_VANTAGE_KEY=api-key
 
+DISCORD_CLIENT_ID=discord-client-id/discord-app-id
+DISCORD_CLIENT_SECRET=discord-client-secret
+
 FACEBOOK_ID=754220301289665
 FACEBOOK_SECRET=41860e58c256a3d7ad8267d3c1939a4a
 # FB Pixel ID is optional if you are trying to do customer rtracking

README.md

@@ -70,17 +70,15 @@ I also tried to make it as **generic** and **reusable** as possible to cover mos
 ## Features
 
 - Login
-  - **Local Authentication** using Email and Password, as well as Passwordless
-  - **OAuth 2.0 Authentication:** Sign in with Google, Facebook, X (Twitter), Twitch, Github
+  - **Local Authentication** Sign in with Email and Password, Passwordless
+  - **OAuth 2.0 Authentication:** Sign in with Google, Facebook, X (Twitter), Twitch, Github, Discord
   - **OpenID Connect:** Sign in with LinkedIn
 - **User Profile and Account Management**
   - Gravatar
   - Profile Details
-  - Change Password
-  - Forgot Password
-  - Reset Password
+  - Password management (Change, Reset, Forgot)
   - Verify Email
-  - Link multiple OAuth strategies to one account
+  - Link multiple OAuth provider accounts to one account
   - Delete Account
 - Contact Form (powered by SMTP via Sendgrid, Mailgun, AWS SES, etc.)
 - File upload
@@ -270,6 +268,20 @@ Obtain SMTP credentials from a provider for transactional emails. Set the SMTP_U
 
 <hr>
 
+<img src="https://cdn.worldvectorlogo.com/logos/discord-6.svg" height="50">
+
+- Go to <a href="https://discord.com/developers/teams" target="_blank">Teams tab</a> in the Discord Developer Portal and create a new team. This allows you to manage your Discord applications under a team name instead of your personal account.
+- After creating a team, switch to the <a href="https://discord.com/developers/applications" target="_blank">Applications tab</a> in the Discord Developer Portal.
+- Click on **New Application** and give your app a name. When prompted, select your team as the owner.
+- In the left sidebar, click on **OAuth2** > **General**.
+- Copy the **Client ID** and **Client Secret** (you may need to "reset" the client secret to obtain it for the first time), then paste them into your `.env` file as `DISCORD_CLIENT_ID` and `DISCORD_CLIENT_SECRET`, or set them as environment variables.
+- In the left sidebar, click on **OAuth2** > **URL Generator**.
+- Under **Scopes**, select `identify` and `email`.
+- Under **Redirects**, add your BASE_URL value followed by `/auth/discord/callback` (i.e. `http://localhost:8080/auth/discord/callback`).
+- Save changes.
+
+<hr>
+
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/HERE_logo.svg" height="75">
 
 - Go to <a href="https://developer.here.com" target="_blank">https://developer.here.com</a>

app.js

@@ -262,6 +262,10 @@ app.get('/auth/twitch', passport.authenticate('twitch'));
 app.get('/auth/twitch/callback', passport.authenticate('twitch', { failureRedirect: '/login' }), (req, res) => {
   res.redirect(req.session.returnTo || '/');
 });
+app.get('/auth/discord', passport.authenticate('discord'));
+app.get('/auth/discord/callback', passport.authenticate('discord', { failureRedirect: '/login' }), (req, res) => {
+  res.redirect(req.session.returnTo || '/');
+});
 
 /**
  * OAuth authorization routes. (API examples)

config/passport.js

@@ -764,6 +764,79 @@ const traktStrategyConfig = new OAuth2Strategy(
 passport.use('trakt', traktStrategyConfig);
 refresh.use('trakt', traktStrategyConfig);
 
+/**
+ * Sign in with Discord using OAuth2Strategy.
+ */
+const discordStrategyConfig = new OAuth2Strategy(
+  {
+    authorizationURL: 'https://discord.com/api/oauth2/authorize',
+    tokenURL: 'https://discord.com/api/oauth2/token',
+    clientID: process.env.DISCORD_CLIENT_ID,
+    clientSecret: process.env.DISCORD_CLIENT_SECRET,
+    callbackURL: `${process.env.BASE_URL}/auth/discord/callback`,
+    scope: ['identify', 'email'].join(' '),
+    state: generateState(),
+    passReqToCallback: true,
+  },
+  async (req, accessToken, refreshToken, params, profile, done) => {
+    try {
+      // Fetch Discord profile using accessToken
+      const response = await fetch('https://discord.com/api/users/@me', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      if (!response.ok) {
+        return done(new Error('Failed to fetch Discord profile'));
+      }
+      const discordProfile = await response.json();
+
+      if (req.user) {
+        const existingUser = await User.findOne({ discord: { $eq: discordProfile.id } });
+        if (existingUser && existingUser.id !== req.user.id) {
+          req.flash('errors', {
+            msg: 'There is already a Discord account that belongs to you. Sign in with that account or delete it, then link it with your current account.',
+          });
+          return done(null, existingUser);
+        }
+        const user = await saveOAuth2UserTokens(req, accessToken, refreshToken, params.expires_in, null, 'discord');
+        user.discord = discordProfile.id;
+        user.profile.name = user.profile.name || discordProfile.username;
+        user.profile.picture = user.profile.picture || (discordProfile.avatar ? `https://cdn.discordapp.com/avatars/${discordProfile.id}/${discordProfile.avatar}.png` : undefined);
+        await user.save();
+        req.flash('info', { msg: 'Discord account has been linked.' });
+        return done(null, user);
+      }
+      const existingUser = await User.findOne({ discord: { $eq: discordProfile.id } });
+      if (existingUser) {
+        return done(null, existingUser);
+      }
+      const existingEmailUser = await User.findOne({
+        email: { $eq: discordProfile.email },
+      });
+      if (existingEmailUser) {
+        req.flash('errors', {
+          msg: 'There is already an account using this email address. Sign in to that account and link it with Discord manually from Account Settings.',
+        });
+        return done(null, existingEmailUser);
+      }
+      const user = new User();
+      user.email = discordProfile.email;
+      user.discord = discordProfile.id;
+      req.user = user;
+      await saveOAuth2UserTokens(req, accessToken, refreshToken, params.expires_in, null, 'discord');
+      user.profile.name = discordProfile.username;
+      user.profile.picture = discordProfile.avatar ? `https://cdn.discordapp.com/avatars/${discordProfile.id}/${discordProfile.avatar}.png` : undefined;
+      await user.save();
+      return done(null, user);
+    } catch (err) {
+      return done(err);
+    }
+  },
+);
+passport.use('discord', discordStrategyConfig);
+refresh.use('discord', discordStrategyConfig);
+
 /**
  * Login Required middleware.
  */

models/User.js

@@ -30,6 +30,7 @@ const userSchema = new mongoose.Schema(
     quickbooks: String,
     tumblr: String,
     trakt: String,
+    discord: String,
     tokens: Array,
 
     profile: {

public/css/main.scss

@@ -50,6 +50,17 @@
   }
 }
 
+.btn-discord {
+  background-color: #5865f2;
+  color: #fff !important;
+
+  &:hover,
+  &:active {
+    background-color: #4752c4;
+    color: #fff !important;
+  }
+}
+
 // Add a space after fontawesome icons
 .iconpadding {
   padding-right: 6px !important;

test/.env.test

@@ -17,6 +17,9 @@ RECAPTCHA_SECRET_KEY=test_recaptcha_secret_key
 
 ALPHA_VANTAGE_KEY=api-key
 
+DISCORD_CLIENT_ID=discord-client-id/discord-app-id
+DISCORD_CLIENT_SECRET=discord-client-secret
+
 FACEBOOK_ID=1234567890123456
 FACEBOOK_SECRET=test_facebook_secret
 FACEBOOK_PIXEL_ID=

views/account/login.pug

@@ -47,6 +47,9 @@ block content
         a.btn.btn-block.btn-github.btn-social(href='/auth/github')
           i.fab.fa-github.fa-sm
           | Sign in with GitHub
+        a.btn.btn-block.btn-discord.btn-social(href='/auth/discord')
+          i.fab.fa-discord
+          | Log in with Discord
 
   script.
     document.getElementById('loginByEmailLink').addEventListener('change', function () {

views/account/profile.pug

@@ -151,3 +151,8 @@ block content
         p.mb-1: a.text-danger(href='/account/unlink/trakt') Unlink your Trakt account
       else
         p.mb-1: a(href='/auth/trakt') Link your Trakt account
+    .offset-sm-3.col-md-7.pl-2
+      if user.discord
+        p.mb-1: a.text-danger(href='/account/unlink/discord') Unlink your Discord account
+      else
+        p.mb-1: a(href='/auth/discord') Link your Discord account