feat: use system browser for oauth flow

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/main/main.ts

@@ -194,24 +194,5 @@ app.whenReady().then(async () => {
 // Handle gitify:// custom protocol URL events for OAuth 2.0 callback
 app.on('open-url', (event, url) => {
   event.preventDefault();
-
-  const link = new URL(url);
-
-  const type = link.hostname;
-  const code = link.searchParams.get('code');
-
-  if (code && (type === 'auth' || type === 'oauth')) {
-    mb.window.webContents.send(namespacedEvent('auth-code'), type, code);
-  }
-
-  const error = link.searchParams.get('error');
-  const errorDescription = link.searchParams.get('error_description');
-
-  if (error) {
-    logError(
-      'main:open-url',
-      `Error during OAuth 2.0 callback ${error}`,
-      new Error(errorDescription),
-    );
-  }
+  mb.window.webContents.send(namespacedEvent('auth-callback'), url);
 });

src/renderer/utils/auth/types.ts

@@ -22,7 +22,7 @@ export interface LoginPersonalAccessTokenOptions {
 }
 
 export interface AuthResponse {
-  authType: AuthMethod;
+  authMethod: AuthMethod;
   authCode: AuthCode;
   authOptions: LoginOAuthAppOptions;
 }

src/renderer/utils/auth/utils.test.ts

@@ -32,12 +32,12 @@ describe('renderer/utils/auth/utils.ts', () => {
       jest.clearAllMocks();
     });
 
-    it('should call authGitHub - auth flow', async () => {
+    it('should call authGitHub - success auth flow', async () => {
       const mockIpcRendererOn = (
         jest.spyOn(ipcRenderer, 'on') as jest.Mock
       ).mockImplementation((event, callback) => {
-        if (event === 'gitify:auth-code') {
-          callback(null, 'auth', '123-456');
+        if (event === 'gitify:auth-callback') {
+          callback(null, 'gitify://auth?code=123-456');
         }
       });
 
@@ -50,20 +50,20 @@ describe('renderer/utils/auth/utils.ts', () => {
 
       expect(mockIpcRendererOn).toHaveBeenCalledTimes(1);
       expect(mockIpcRendererOn).toHaveBeenCalledWith(
-        'gitify:auth-code',
+        'gitify:auth-callback',
         expect.any(Function),
       );
 
-      expect(res.authType).toBe('GitHub App');
+      expect(res.authMethod).toBe('GitHub App');
       expect(res.authCode).toBe('123-456');
     });
 
-    it('should call authGitHub - oauth flow', async () => {
+    it('should call authGitHub - success oauth flow', async () => {
       const mockIpcRendererOn = (
         jest.spyOn(ipcRenderer, 'on') as jest.Mock
       ).mockImplementation((event, callback) => {
-        if (event === 'gitify:auth-code') {
-          callback(null, 'oauth', '123-456');
+        if (event === 'gitify:auth-callback') {
+          callback(null, 'gitify://oauth?code=123-456');
         }
       });
 
@@ -80,13 +80,41 @@ describe('renderer/utils/auth/utils.ts', () => {
 
       expect(mockIpcRendererOn).toHaveBeenCalledTimes(1);
       expect(mockIpcRendererOn).toHaveBeenCalledWith(
-        'gitify:auth-code',
+        'gitify:auth-callback',
         expect.any(Function),
       );
 
-      expect(res.authType).toBe('OAuth App');
+      expect(res.authMethod).toBe('OAuth App');
       expect(res.authCode).toBe('123-456');
     });
+
+    it('should call authGitHub - failure', async () => {
+      const mockIpcRendererOn = (
+        jest.spyOn(ipcRenderer, 'on') as jest.Mock
+      ).mockImplementation((event, callback) => {
+        if (event === 'gitify:auth-callback') {
+          callback(
+            null,
+            'gitify://auth?error=invalid_request&error_description=The+redirect_uri+is+missing+or+invalid.&error_uri=https://docs.github.com/en/developers/apps/troubleshooting-oauth-errors',
+          );
+        }
+      });
+
+      await expect(async () => await auth.authGitHub()).rejects.toEqual(
+        "Oops! Something went wrong and we couldn't log you in using GitHub. Please try again. Reason: The redirect_uri is missing or invalid. Docs: https://docs.github.com/en/developers/apps/troubleshooting-oauth-errors",
+      );
+
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
+      expect(openExternalLinkMock).toHaveBeenCalledWith(
+        'https://github.com/login/oauth/authorize?client_id=FAKE_CLIENT_ID_123&scope=read%3Auser%2Cnotifications%2Crepo',
+      );
+
+      expect(mockIpcRendererOn).toHaveBeenCalledTimes(1);
+      expect(mockIpcRendererOn).toHaveBeenCalledWith(
+        'gitify:auth-callback',
+        expect.any(Function),
+      );
+    });
   });
 
   describe('getToken', () => {

src/renderer/utils/auth/utils.ts

@@ -26,24 +26,43 @@ import type { AuthMethod, AuthResponse, AuthTokenResponse } from './types';
 export function authGitHub(
   authOptions = Constants.DEFAULT_AUTH_OPTIONS,
 ): Promise<AuthResponse> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const authUrl = new URL(`https://${authOptions.hostname}`);
     authUrl.pathname = '/login/oauth/authorize';
     authUrl.searchParams.append('client_id', authOptions.clientId);
     authUrl.searchParams.append('scope', Constants.AUTH_SCOPE.toString());
 
     openExternalLink(authUrl.toString() as Link);
 
-    const handleCallback = (authType: AuthMethod, authCode: AuthCode) => {
-      resolve({ authType, authCode, authOptions });
+    const handleCallback = (callbackUrl: string) => {
+      const url = new URL(callbackUrl);
+
+      const type = url.hostname;
+      const code = url.searchParams.get('code');
+      const error = url.searchParams.get('error');
+      const errorDescription = url.searchParams.get('error_description');
+      const errorUri = url.searchParams.get('error_uri');
+
+      if (code && (type === 'auth' || type === 'oauth')) {
+        const authMethod: AuthMethod =
+          type === 'auth' ? 'GitHub App' : 'OAuth App';
+
+        resolve({
+          authMethod: authMethod,
+          authCode: code as AuthCode,
+          authOptions: authOptions,
+        });
+      } else if (error) {
+        reject(
+          `Oops! Something went wrong and we couldn't log you in using GitHub. Please try again. Reason: ${errorDescription} Docs: ${errorUri}`,
+        );
+      }
     };
 
     ipcRenderer.on(
-      namespacedEvent('auth-code'),
-      (_, authType: 'auth' | 'oauth', authCode: AuthCode) => {
-        const type: AuthMethod =
-          authType === 'auth' ? 'GitHub App' : 'OAuth App';
-        handleCallback(type, authCode);
+      namespacedEvent('auth-callback'),
+      (_, callbackUrl: string) => {
+        handleCallback(callbackUrl);
       },
     );
   });