From e7cf9911b49392d8fed91e8fc587d5d195495f3e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sun, 11 Aug 2024 10:11:55 -0400
Subject: [PATCH] fix(auth): restore oauth2 flow functionality

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/electron/main.js                         | 11 +++--
 src/routes/Login.tsx                         | 34 +++++++--------
 src/routes/LoginWithOAuthApp.tsx             |  7 +++-
 src/routes/LoginWithPersonalAccessToken.tsx  |  2 +
 src/routes/__snapshots__/Login.test.tsx.snap | 44 ++++++++++++++++++++
 src/utils/auth/utils.ts                      |  1 +
 6 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/src/electron/main.js b/src/electron/main.js
index 34d0b975e..9bbb7bd99 100644
--- a/src/electron/main.js
+++ b/src/electron/main.js
@@ -17,10 +17,6 @@ const { autoUpdater } = require('electron-updater');
 const { updateElectronApp } = require('update-electron-app');
 
 log.initialize();
-
-// TODO: Remove @electron/remote use - see #650
-require('@electron/remote/main').initialize();
-
 // Tray Icons
 const idleIcon = path.resolve(
   `${__dirname}/../../assets/images/tray-idleTemplate.png`,
@@ -124,6 +120,13 @@ app.whenReady().then(async () => {
   mb.on('ready', () => {
     mb.app.setAppUserModelId('com.electron.gitify');
 
+    /**
+     * TODO: Remove @electron/remote use - see #650
+     * GitHub OAuth 2 Login Flows - Enable Remote Browser Window Launch
+     */
+    require('@electron/remote/main').initialize();
+    require('@electron/remote/main').enable(mb.window.webContents);
+
     // Tray configuration
     mb.tray.setToolTip('Gitify');
     mb.tray.setIgnoreDoubleClickEvents(true);
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 6ac1f8793..2a661eb67 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -1,5 +1,6 @@
-import { KeyIcon, PersonIcon } from '@primer/octicons-react';
-import { type FC, useContext, useEffect } from 'react';
+import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
+import log from 'electron-log';
+import { type FC, useCallback, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '../components/buttons/Button';
 import { LogoIcon } from '../components/icons/LogoIcon';
@@ -9,7 +10,7 @@ import { showWindow } from '../utils/comms';
 
 export const LoginRoute: FC = () => {
   const navigate = useNavigate();
-  const { isLoggedIn } = useContext(AppContext);
+  const { loginWithGitHubApp, isLoggedIn } = useContext(AppContext);
 
   useEffect(() => {
     if (isLoggedIn) {
@@ -18,14 +19,13 @@ export const LoginRoute: FC = () => {
     }
   }, [isLoggedIn]);
 
-  // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
-  /* const loginUser = useCallback(async () => {
+  const loginUser = useCallback(async () => {
     try {
-      await login();
+      await loginWithGitHubApp();
     } catch (err) {
-      // Skip
+      log.error('Auth: failed to login with GitHub', err);
     }
-  }, []); */
+  }, [loginWithGitHubApp]);
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
@@ -36,18 +36,16 @@ export const LoginRoute: FC = () => {
       </div>
 
       <div className="text-center text-sm font-semibold italic">Login with</div>
-      {
-        // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
-        /*    
-       <Button
+
+      <Button
         name="GitHub"
-        icon={MarkGitHubIcon}
+        icon={{ icon: MarkGithubIcon }}
         label="Login with GitHub"
-        class="w-50 px-2 py-2 my-2 text-xs"
-        onClick={loginUser}
-      />  
-      */
-      }
+        className="mt-2 py-2"
+        onClick={() => loginUser()}
+      >
+        GitHub
+      </Button>
 
       <Button
         icon={{ icon: KeyIcon }}
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index 9d0e7df3e..d0ac0b7f5 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -1,6 +1,8 @@
 import { BookIcon, PersonIcon, SignInIcon } from '@primer/octicons-react';
+import log from 'electron-log';
 import { type FC, useCallback, useContext } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
+import { useNavigate } from 'react-router-dom';
 import { Header } from '../components/Header';
 import { Button } from '../components/buttons/Button';
 import { FieldInput } from '../components/fields/FieldInput';
@@ -58,6 +60,8 @@ export const validate = (values: IValues): IFormErrors => {
 };
 
 export const LoginWithOAuthApp: FC = () => {
+  const navigate = useNavigate();
+
   const { loginWithOAuthApp } = useContext(AppContext);
 
   const renderForm = (formProps: FormRenderProps) => {
@@ -119,8 +123,9 @@ export const LoginWithOAuthApp: FC = () => {
     async (data: IValues) => {
       try {
         await loginWithOAuthApp(data as LoginOAuthAppOptions);
+        navigate('/', { replace: true });
       } catch (err) {
-        // Skip
+        log.error('Auth: Failed to login with oauth app', err);
       }
     },
     [loginWithOAuthApp],
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index e792ef12b..e52ac3f73 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -1,4 +1,5 @@
 import { BookIcon, KeyIcon, SignInIcon } from '@primer/octicons-react';
+import log from 'electron-log';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
 import { useNavigate } from 'react-router-dom';
@@ -125,6 +126,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
         );
         navigate(-1);
       } catch (err) {
+        log.error('Auth: failed to login with personal access token', err);
         setIsValidToken(false);
       }
     },
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index b50466a34..e3c8e0754 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -64,6 +64,28 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
         >
           Login with
         </div>
+        <button
+          aria-label="Login with GitHub"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
+          icon="[object Object]"
+          name="GitHub"
+        >
+          <svg
+            aria-hidden="true"
+            class="mr-2"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+            />
+          </svg>
+          GitHub
+        </button>
         <button
           aria-label="Login with Personal Access Token"
           class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
@@ -169,6 +191,28 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
       >
         Login with
       </div>
+      <button
+        aria-label="Login with GitHub"
+        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
+        icon="[object Object]"
+        name="GitHub"
+      >
+        <svg
+          aria-hidden="true"
+          class="mr-2"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+          />
+        </svg>
+        GitHub
+      </button>
       <button
         aria-label="Login with Personal Access Token"
         class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
diff --git a/src/utils/auth/utils.ts b/src/utils/auth/utils.ts
index b15b84557..5c39a5c51 100644
--- a/src/utils/auth/utils.ts
+++ b/src/utils/auth/utils.ts
@@ -17,6 +17,7 @@ import { Constants } from '../constants';
 import { getPlatformFromHostname } from '../helpers';
 import type { AuthMethod, AuthResponse, AuthTokenResponse } from './types';
 
+// TODO - Refactor our OAuth2 flow to use system browser and local app gitify://callback - see #485 #561
 export function authGitHub(
   authOptions = Constants.DEFAULT_AUTH_OPTIONS,
 ): Promise<AuthResponse> {