feat(authentication): add signin with github (fehmer) (#5239)

frontend/src/html/pages/login.html

@@ -77,10 +77,10 @@
         <i class="fab fa-google"></i>
         Google Sign In
       </button>
-      <!-- <div class="button signInWithGitHub">
+      <button class="signInWithGitHub">
         <i class="fab fa-github"></i>
         GitHub Sign In
-      </div> -->
+      </button>
     </form>
   </div>
 </div>

frontend/src/html/pages/settings.html

@@ -1635,6 +1635,21 @@
         </button>
       </div>
     </div>
+    <div class="section githubAuthSettings needsAccount hidden">
+      <div class="groupTitle">
+        <i class="fab fa-github"></i>
+        <span>github authentication settings</span>
+      </div>
+      <div class="text">Add or remove GitHub authentication.</div>
+      <div class="buttons vertical">
+        <button class="danger" id="addGithubAuth">
+          add github authentication
+        </button>
+        <button class="danger" id="removeGithubAuth">
+          remove github authentication
+        </button>
+      </div>
+    </div>
     <div class="section revokeAllTokens">
       <div class="groupTitle">
         <i class="fas fa-user-slash"></i>

frontend/src/ts/controllers/account-controller.ts

@@ -20,6 +20,7 @@ import * as Account from "../pages/account";
 import * as Alerts from "../elements/alerts";
 import {
   GoogleAuthProvider,
+  GithubAuthProvider,
   browserSessionPersistence,
   browserLocalPersistence,
   createUserWithEmailAndPassword,
@@ -31,6 +32,7 @@ import {
   getAdditionalUserInfo,
   User as UserType,
   Unsubscribe,
+  AuthProvider,
 } from "firebase/auth";
 import { Auth, getAuthenticatedUser, isAuthenticated } from "../firebase";
 import { dispatch as dispatchSignUpEvent } from "../observables/google-sign-up-event";
@@ -45,6 +47,7 @@ import { getHtmlByUserFlags } from "./user-flag-controller";
 let signedOutThisSession = false;
 
 export const gmailProvider = new GoogleAuthProvider();
+export const githubProvider = new GithubAuthProvider();
 
 async function sendVerificationEmail(): Promise<void> {
   if (Auth === undefined) {
@@ -266,6 +269,8 @@ if (Auth && ConnectionState.get()) {
       //   ChallengeController.setup(challengeName);
       // }, 1000);
     }
+
+    Settings.updateAuthSections();
   });
 } else {
   $("nav .signInOut").addClass("hidden");
@@ -357,7 +362,7 @@ async function signIn(): Promise<void> {
     });
 }
 
-async function signInWithGoogle(): Promise<void> {
+async function signInWithProvider(provider: AuthProvider): Promise<void> {
   if (Auth === undefined) {
     Notifications.add("Authentication uninitialized", -1, {
       duration: 3,
@@ -382,7 +387,7 @@ async function signInWithGoogle(): Promise<void> {
     : browserSessionPersistence;
 
   await setPersistence(Auth, persistence);
-  signInWithPopup(Auth, gmailProvider)
+  signInWithPopup(Auth, provider)
     .then(async (signedInUser) => {
       if (getAdditionalUserInfo(signedInUser)?.isNewUser) {
         dispatchSignUpEvent(signedInUser, true);
@@ -405,6 +410,11 @@ async function signInWithGoogle(): Promise<void> {
       } else if (error.code === "auth/user-cancelled") {
         // message = "User refused to sign in";
         return;
+      } else if (
+        error.code === "auth/account-exists-with-different-credential"
+      ) {
+        message =
+          "Account already exists, but its using a different authentication method. Try signing in with a different method";
       }
       Notifications.add(message, -1);
       LoginPage.hidePreloader();
@@ -413,7 +423,32 @@ async function signInWithGoogle(): Promise<void> {
     });
 }
 
+async function signInWithGoogle(): Promise<void> {
+  return signInWithProvider(gmailProvider);
+}
+
+async function signInWithGitHub(): Promise<void> {
+  return signInWithProvider(githubProvider);
+}
+
 async function addGoogleAuth(): Promise<void> {
+  return addAuthProvider("Google", gmailProvider);
+}
+
+async function addGithubAuth(): Promise<void> {
+  return addAuthProvider("GitHub", githubProvider);
+}
+
+async function addAuthProvider(
+  providerName: string,
+  provider: AuthProvider
+): Promise<void> {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
+    return;
+  }
   if (Auth === undefined) {
     Notifications.add("Authentication uninitialized", -1, {
       duration: 3,
@@ -422,16 +457,16 @@ async function addGoogleAuth(): Promise<void> {
   }
   Loader.show();
   if (!isAuthenticated()) return;
-  linkWithPopup(getAuthenticatedUser(), gmailProvider)
+  linkWithPopup(getAuthenticatedUser(), provider)
     .then(function () {
       Loader.hide();
-      Notifications.add("Google authentication added", 1);
+      Notifications.add(`${providerName} authentication added`, 1);
       Settings.updateAuthSections();
     })
     .catch(function (error) {
       Loader.hide();
       Notifications.add(
-        "Failed to add Google authentication: " + error.message,
+        `Failed to add ${providerName} authentication: ` + error.message,
         -1
       );
     });
@@ -620,9 +655,9 @@ $(".pageLogin .login button.signInWithGoogle").on("click", () => {
   void signInWithGoogle();
 });
 
-// $(".pageLogin .login .button.signInWithGitHub").on("click",(e) => {
-// signInWithGitHub();
-// });
+$(".pageLogin .login button.signInWithGitHub").on("click", () => {
+  void signInWithGitHub();
+});
 
 $("header .signInOut").on("click", () => {
   if (Auth === undefined) {
@@ -645,15 +680,13 @@ $(".pageLogin .register form").on("submit", (e) => {
 });
 
 $(".pageSettings #addGoogleAuth").on("click", async () => {
-  if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, {
-      duration: 2,
-    });
-    return;
-  }
   void addGoogleAuth();
 });
 
+$(".pageSettings #addGithubAuth").on("click", async () => {
+  void addGithubAuth();
+});
+
 $(".pageAccount").on("click", ".sendVerificationEmail", () => {
   if (!ConnectionState.get()) {
     Notifications.add("You are offline", 0, {

frontend/src/ts/pages/settings.ts

@@ -734,16 +734,20 @@ export function updateDiscordSection(): void {
 export function updateAuthSections(): void {
   $(".pageSettings .section.passwordAuthSettings button").addClass("hidden");
   $(".pageSettings .section.googleAuthSettings button").addClass("hidden");
+  $(".pageSettings .section.githubAuthSettings button").addClass("hidden");
 
   if (!isAuthenticated()) return;
   const user = getAuthenticatedUser();
 
-  const passwordProvider = user.providerData.find(
+  const passwordProvider = user.providerData.some(
     (provider) => provider.providerId === "password"
   );
-  const googleProvider = user.providerData.find(
+  const googleProvider = user.providerData.some(
     (provider) => provider.providerId === "google.com"
   );
+  const githubProvider = user.providerData.some(
+    (provider) => provider.providerId === "github.com"
+  );
 
   if (passwordProvider) {
     $(
@@ -762,7 +766,7 @@ export function updateAuthSections(): void {
     $(
       ".pageSettings .section.googleAuthSettings #removeGoogleAuth"
     ).removeClass("hidden");
-    if (passwordProvider) {
+    if (passwordProvider || githubProvider) {
       $(
         ".pageSettings .section.googleAuthSettings #removeGoogleAuth"
       ).removeClass("disabled");
@@ -776,6 +780,24 @@ export function updateAuthSections(): void {
       "hidden"
     );
   }
+  if (githubProvider) {
+    $(
+      ".pageSettings .section.githubAuthSettings #removeGithubAuth"
+    ).removeClass("hidden");
+    if (passwordProvider || googleProvider) {
+      $(
+        ".pageSettings .section.githubAuthSettings #removeGithubAuth"
+      ).removeClass("disabled");
+    } else {
+      $(".pageSettings .section.githubAuthSettings #removeGithubAuth").addClass(
+        "disabled"
+      );
+    }
+  } else {
+    $(".pageSettings .section.githubAuthSettings #addGithubAuth").removeClass(
+      "hidden"
+    );
+  }
 }
 
 function setActiveFunboxButton(): void {