Add GitHub OAuth authentication support

backend/config/custom-environment-variables.json

@@ -129,6 +129,7 @@
     "appId": "CROWD_GITHUB_APP_ID",
     "clientId": "CROWD_GITHUB_CLIENT_ID",
     "clientSecret": "CROWD_GITHUB_CLIENT_SECRET",
+    "callbackUrl": "CROWD_GITHUB_CALLBACK_URL",
     "privateKey": "CROWD_GITHUB_PRIVATE_KEY",
     "webhookSecret": "CROWD_GITHUB_WEBHOOK_SECRET",
     "isCommitDataEnabled": "CROWD_GITHUB_IS_COMMIT_DATA_ENABLED"

backend/package.json

@@ -108,6 +108,7 @@
     "openapi-comment-parser": "^1.0.0",
     "passport": "0.6.0",
     "passport-facebook": "3.0.0",
+    "passport-github2": "^0.1.12",
     "passport-google-oauth": "2.0.0",
     "passport-google-oauth20": "^2.0.0",
     "passport-slack": "0.0.7",

backend/src/api/auth/authSocial.ts

@@ -1,6 +1,6 @@
 import passport from 'passport'
 import { getServiceChildLogger } from '@crowd/logging'
-import { API_CONFIG, GOOGLE_CONFIG } from '../../conf'
+import { API_CONFIG, GITHUB_CONFIG, GOOGLE_CONFIG } from '../../conf'
 import AuthService from '../../services/auth/authService'
 
 const log = getServiceChildLogger('AuthSocial')
@@ -46,6 +46,26 @@ export default (app, routes) => {
       })(req, res)
     })
   }
+
+  if (GITHUB_CONFIG.clientId) {
+    routes.get(
+      '/auth/social/github',
+      passport.authenticate('github', {
+        scope: ['user:email', 'read:user'],
+        session: false,
+      }),
+      () => {
+        // The request will be redirected for authentication, so this
+        // function will not be called.
+      },
+    )
+
+    routes.get('/auth/social/github/callback', (req, res) => {
+      passport.authenticate('github', (err, jwtToken) => {
+        handleCallback(res, err, jwtToken)
+      })(req, res)
+    })
+  }
 }
 
 function handleCallback(res, err, jwtToken) {

backend/src/conf/configTypes.ts

@@ -144,6 +144,7 @@ export interface GithubConfiguration {
   webhookSecret: string
   isCommitDataEnabled: string
   globalLimit?: number
+  callbackUrl: string
 }
 
 export interface SendgridConfiguration {

backend/src/middlewares/passportStrategyMiddleware.ts

@@ -1,8 +1,9 @@
 import { getServiceLogger } from '@crowd/logging'
 import passport from 'passport'
-import { GOOGLE_CONFIG, SLACK_CONFIG } from '../conf'
+import { GOOGLE_CONFIG, SLACK_CONFIG, GITHUB_CONFIG } from '../conf'
 import { getGoogleStrategy } from '../services/auth/passportStrategies/googleStrategy'
 import { getSlackStrategy } from '../services/auth/passportStrategies/slackStrategy'
+import { getGithubStrategy } from '../services/auth/passportStrategies/githubStrategy'
 
 const log = getServiceLogger()
 
@@ -19,6 +20,10 @@ export async function passportStrategyMiddleware(req, res, next) {
     if (GOOGLE_CONFIG.clientId) {
       passport.use(getGoogleStrategy())
     }
+
+    if (GITHUB_CONFIG.clientId) {
+      passport.use(getGithubStrategy())
+    }
   } catch (error) {
     log.error(error, 'Error getting some passport strategies!')
   } finally {

backend/src/services/auth/passportStrategies/githubStrategy.ts

@@ -0,0 +1,50 @@
+import { get } from 'lodash'
+import GithubStrategy from 'passport-github2'
+import { getServiceChildLogger } from '@crowd/logging'
+import { GITHUB_CONFIG } from '../../../conf'
+import { databaseInit } from '../../../database/databaseConnection'
+import AuthService from '../authService'
+import { splitFullName } from '../../../utils/splitName'
+import { AuthProvider } from '../../../types/common'
+
+const log = getServiceChildLogger('AuthSocial')
+
+export function getGithubStrategy(): GithubStrategy {
+  return new GithubStrategy(
+    {
+      clientID: GITHUB_CONFIG.clientId,
+      clientSecret: GITHUB_CONFIG.clientSecret,
+      callbackURL: GITHUB_CONFIG.callbackUrl,
+      scope: ['user:email'], // Request email scope
+    },
+    (accessToken, refreshToken, profile, done) => {
+      databaseInit()
+        .then((database) => {
+          const email = get(profile, 'emails[0].value')
+          // GitHub user's profile doesn't include 'verified' field
+          // However, GitHub accounts require email verification for activation
+          const emailVerified = !!email
+          const displayName = get(profile, 'displayName')
+          const { firstName, lastName } = splitFullName(displayName)
+
+          return AuthService.signinFromSocial(
+            AuthProvider.GITHUB,
+            profile.id,
+            email,
+            emailVerified,
+            firstName,
+            lastName,
+            displayName,
+            { database },
+          )
+        })
+        .then((jwtToken) => {
+          done(null, jwtToken)
+        })
+        .catch((error) => {
+          log.error(error, 'Error while handling github auth!')
+          done(error, null)
+        })
+    },
+  )
+}

backend/src/services/auth/passportStrategies/googleStrategy.ts

@@ -4,6 +4,8 @@ import { getServiceChildLogger } from '@crowd/logging'
 import { GOOGLE_CONFIG } from '../../../conf'
 import { databaseInit } from '../../../database/databaseConnection'
 import AuthService from '../authService'
+import { splitFullName } from '../../../utils/splitName'
+import { AuthProvider } from '../../../types/common'
 
 const log = getServiceChildLogger('AuthSocial')
 
@@ -23,7 +25,7 @@ export function getGoogleStrategy(): GoogleStrategy {
           const { firstName, lastName } = splitFullName(displayName)
 
           return AuthService.signinFromSocial(
-            'google',
+            AuthProvider.GOOGLE,
             profile.id,
             email,
             emailVerified,
@@ -43,19 +45,3 @@ export function getGoogleStrategy(): GoogleStrategy {
     },
   )
 }
-
-function splitFullName(fullName) {
-  let firstName
-  let lastName
-
-  if (fullName && fullName.split(' ').length > 1) {
-    const [firstNameArray, ...lastNameArray] = fullName.split(' ')
-    firstName = firstNameArray
-    lastName = lastNameArray.join(' ')
-  } else {
-    firstName = fullName || null
-    lastName = null
-  }
-
-  return { firstName, lastName }
-}

backend/src/types/common.ts

@@ -33,3 +33,8 @@ export enum FeatureFlagRedisKey {
   MEMBER_ENRICHMENT_COUNT = 'memberEnrichmentCount',
   ORGANIZATION_ENRICHMENT_COUNT = 'organizationEnrichmentCount',
 }
+
+export enum AuthProvider {
+  GOOGLE = 'google',
+  GITHUB = 'github',
+}

backend/src/utils/splitName.ts

@@ -0,0 +1,15 @@
+export function splitFullName(fullName) {
+  let firstName
+  let lastName
+
+  if (fullName && fullName.split(' ').length > 1) {
+    const [firstNameArray, ...lastNameArray] = fullName.split(' ')
+    firstName = firstNameArray
+    lastName = lastNameArray.join(' ')
+  } else {
+    firstName = fullName || null
+    lastName = null
+  }
+
+  return { firstName, lastName }
+}

frontend/src/modules/auth/pages/signin-page.vue

@@ -117,7 +117,7 @@
         </div>
         <div class="flex-grow border-b border-gray-200" />
       </div>
-      <div class="pt-6 pb-16">
+      <div class="flex flex-col pt-6 pb-16 gap-6">
         <a
           id="googleLogin"
           :href="socialOauthLink('google')"
@@ -126,6 +126,14 @@
           <app-svg name="google" class="h-5 w-5" />
           <span class="pl-3 text-gray-600">Sign in with Google</span>
         </a>
+        <a
+          id="githubLogin"
+          :href="socialOauthLink('github')"
+          class="btn btn--secondary btn--lg w-full"
+        >
+          <i class="ri-github-fill text-lg !text-gray-600" />
+          <span class="pl-1 text-gray-600">Sign in with GitHub</span>
+        </a>
       </div>
       <div class="flex justify-center">
         <p class="text-sm leading-5 text-center">

frontend/src/modules/auth/pages/signup-page.vue

@@ -194,7 +194,7 @@
         </div>
         <div class="flex-grow border-b border-gray-200" />
       </div>
-      <div class="pt-6 pb-16">
+      <div class="flex flex-col pt-6 pb-16 gap-6">
         <a
           id="googleSignup"
           :href="socialOauthLink('google')"
@@ -203,6 +203,14 @@
           <app-svg name="google" class="h-5 w-5" />
           <span class="pl-3 text-gray-600">Sign up with Google</span>
         </a>
+        <a
+          id="githubSignup"
+          :href="socialOauthLink('github')"
+          class="btn btn--secondary btn--lg w-full"
+        >
+          <i class="ri-github-fill text-lg !text-gray-600" />
+          <span class="pl-3 text-gray-600">Sign up with GitHub</span>
+        </a>
       </div>
       <div class="flex justify-center">
         <p class="text-sm leading-5 text-center">