fix(auth): restore oauth2 flow functionality

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);

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) {
       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 }}

src/routes/LoginWithOAuthApp.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import type { AuthState, ClientID, ClientSecret, Hostname } from '../types';
@@ -12,6 +12,8 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/LoginWithOAuthApp.tsx', () => {
+  const mockLoginWithOAuthApp = jest.fn();
+
   const openExternalLinkMock = jest
     .spyOn(comms, 'openExternalLink')
     .mockImplementation();
@@ -108,6 +110,39 @@ describe('routes/LoginWithOAuthApp.tsx', () => {
     });
   });
 
+  it('should login using a token - success', async () => {
+    mockLoginWithOAuthApp.mockResolvedValueOnce(null);
+
+    render(
+      <AppContext.Provider
+        value={{
+          loginWithOAuthApp: mockLoginWithOAuthApp,
+        }}
+      >
+        <MemoryRouter>
+          <LoginWithOAuthApp />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    fireEvent.change(screen.getByLabelText('Hostname'), {
+      target: { value: 'github.com' },
+    });
+    fireEvent.change(screen.getByLabelText('Client ID'), {
+      target: { value: '1234567890_ASDFGHJKL' },
+    });
+    fireEvent.change(screen.getByLabelText('Client Secret'), {
+      target: { value: '1234567890_asdfghjklPOIUYTREWQ0987654321' },
+    });
+
+    fireEvent.submit(screen.getByLabelText('Login'));
+
+    await waitFor(() => expect(mockLoginWithOAuthApp).toHaveBeenCalledTimes(1));
+
+    expect(mockLoginWithOAuthApp).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
+  });
+
   it('should render the form with errors', () => {
     render(
       <AppContext.Provider value={{ auth: mockAuth }}>

src/routes/LoginWithOAuthApp.tsx

@@ -2,6 +2,7 @@ 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';
@@ -59,6 +60,8 @@ export const validate = (values: IValues): IFormErrors => {
 };
 
 export const LoginWithOAuthApp: FC = () => {
+  const navigate = useNavigate();
+
   const { loginWithOAuthApp } = useContext(AppContext);
 
   const renderForm = (formProps: FormRenderProps) => {
@@ -126,9 +129,9 @@ export const LoginWithOAuthApp: FC = () => {
     async (data: IValues) => {
       try {
         await loginWithOAuthApp(data as LoginOAuthAppOptions);
+        navigate(-1);
       } catch (err) {
         log.error('Auth: Failed to login with oauth app', err);
-        // Skip
       }
     },
     [loginWithOAuthApp],

src/routes/LoginWithPersonalAccessToken.test.tsx

@@ -20,7 +20,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/LoginWithPersonalAccessToken.tsx', () => {
-  const mockValidateToken = jest.fn();
+  const mockLoginWithPersonalAccessToken = jest.fn();
   const openExternalLinkMock = jest
     .spyOn(comms, 'openExternalLink')
     .mockImplementation();
@@ -75,7 +75,9 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
     it('should be disabled if no hostname configured', async () => {
       render(
         <AppContext.Provider
-          value={{ loginWithPersonalAccessToken: mockValidateToken }}
+          value={{
+            loginWithPersonalAccessToken: mockLoginWithPersonalAccessToken,
+          }}
         >
           <MemoryRouter>
             <LoginWithPersonalAccessToken />
@@ -95,7 +97,9 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
     it('should open in browser if hostname configured', async () => {
       render(
         <AppContext.Provider
-          value={{ loginWithPersonalAccessToken: mockValidateToken }}
+          value={{
+            loginWithPersonalAccessToken: mockLoginWithPersonalAccessToken,
+          }}
         >
           <MemoryRouter>
             <LoginWithPersonalAccessToken />
@@ -110,11 +114,13 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
   });
 
   it('should login using a token - success', async () => {
-    mockValidateToken.mockResolvedValueOnce(null);
+    mockLoginWithPersonalAccessToken.mockResolvedValueOnce(null);
 
     render(
       <AppContext.Provider
-        value={{ loginWithPersonalAccessToken: mockValidateToken }}
+        value={{
+          loginWithPersonalAccessToken: mockLoginWithPersonalAccessToken,
+        }}
       >
         <MemoryRouter>
           <LoginWithPersonalAccessToken />
@@ -131,18 +137,22 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
 
     fireEvent.submit(screen.getByLabelText('Login'));
 
-    await waitFor(() => expect(mockValidateToken).toHaveBeenCalledTimes(1));
+    await waitFor(() =>
+      expect(mockLoginWithPersonalAccessToken).toHaveBeenCalledTimes(1),
+    );
 
-    expect(mockValidateToken).toHaveBeenCalledTimes(1);
+    expect(mockLoginWithPersonalAccessToken).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
   });
 
   it('should login using a token - failure', async () => {
-    mockValidateToken.mockRejectedValueOnce(null);
+    mockLoginWithPersonalAccessToken.mockRejectedValueOnce(null);
 
     render(
       <AppContext.Provider
-        value={{ loginWithPersonalAccessToken: mockValidateToken }}
+        value={{
+          loginWithPersonalAccessToken: mockLoginWithPersonalAccessToken,
+        }}
       >
         <MemoryRouter>
           <LoginWithPersonalAccessToken />
@@ -160,9 +170,11 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
       fireEvent.submit(screen.getByLabelText('Login'));
     });
 
-    await waitFor(() => expect(mockValidateToken).toHaveBeenCalledTimes(1));
+    await waitFor(() =>
+      expect(mockLoginWithPersonalAccessToken).toHaveBeenCalledTimes(1),
+    );
 
-    expect(mockValidateToken).toHaveBeenCalledTimes(1);
+    expect(mockLoginWithPersonalAccessToken).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenCalledTimes(0);
   });
 
@@ -189,7 +201,9 @@ describe('routes/LoginWithPersonalAccessToken.tsx', () => {
   it('should open help docs in the browser', async () => {
     render(
       <AppContext.Provider
-        value={{ loginWithPersonalAccessToken: mockValidateToken }}
+        value={{
+          loginWithPersonalAccessToken: mockLoginWithPersonalAccessToken,
+        }}
       >
         <MemoryRouter>
           <LoginWithPersonalAccessToken />

src/utils/auth/utils.ts

@@ -18,6 +18,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 #654
 export function authGitHub(
   authOptions = Constants.DEFAULT_AUTH_OPTIONS,
 ): Promise<AuthResponse> {