one attempt with one library

packages/desktop/.env.development

@@ -1,2 +1,2 @@
-GOOGLE_OAUTH_CLIENT_ID=423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com
-GOOGLE_OAUTH_SECRET=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
+REACT_APP_GOOGLE_OAUTH_CLIENT_ID=423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com
+REACT_APP_GOOGLE_OAUTH_SECRET=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

packages/desktop/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@getstation/electron-google-oauth2": "^2.1.0",
+    "@mui/icons-material": "^5.5.0",
     "@mui/material": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",

packages/desktop/public/electron.js

@@ -1,7 +1,10 @@
-const path = require('path');
+const ElectronGoogleOAuth2 =
+  require("@getstation/electron-google-oauth2").default;
 
-const { app, BrowserWindow } = require('electron');
-const isDev = require('electron-is-dev');
+const path = require("path");
+
+const { app, BrowserWindow } = require("electron");
+const isDev = require("electron-is-dev");
 
 function createWindow() {
   // Create the browser window.
@@ -17,12 +20,12 @@ function createWindow() {
   // win.loadFile("index.html");
   win.loadURL(
     isDev
-      ? 'http://localhost:3000'
-      : `file://${path.join(__dirname, '../build/index.html')}`
+      ? "http://localhost:3000"
+      : `file://${path.join(__dirname, "../build/index.html")}`
   );
   // Open the DevTools.
   if (isDev) {
-    win.webContents.openDevTools({ mode: 'detach' });
+    win.webContents.openDevTools({ mode: "detach" });
   }
 }
 
@@ -34,14 +37,29 @@ app.whenReady().then(createWindow);
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
     app.quit();
   }
 });
 
-app.on('activate', () => {
+app.on("activate", () => {
   if (BrowserWindow.getAllWindows().length === 0) {
     createWindow();
   }
-});
+});
+
+app.on("ready", () => {
+  console.log(process.env);
+  const myApiOauth = new ElectronGoogleOAuth2(
+    "423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com",
+    "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",
+    [""],
+    { successRedirectURL: "http://localhost:3000" }
+  );
+
+  myApiOauth.openAuthWindowAndGetTokens().then((token) => {
+    // use your token.access_token
+    console.log(`got the user's authentication: ${token}`);
+  });
+});

packages/desktop/src/App.tsx

@@ -1,6 +1,7 @@
 import "./App.css";
 
 import { Button } from "@mui/material";
+import Login from "./pages/Login";
 import Logo from "./components/Logo";
 import React from "react";
 import logo from "./logo.svg";
@@ -10,10 +11,9 @@ testConnection();
 
 function App() {
   return (
-    <div className="container flex flex-col space-y-5 mx-auto my-auto justify-center h-screen">
-      <Logo />
-      <Button variant="contained">Sign In</Button>
-    </div>
+    <>
+      <Login />
+    </>
   );
 }
 

packages/desktop/src/components/Logo/index.tsx

@@ -1,4 +1,4 @@
-export default function Logo() {
+export default function Logo({ className }: { className: string }) {
   return (
     <svg
       width="233"
@@ -6,6 +6,7 @@ export default function Logo() {
       viewBox="0 0 233 162"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M74.3984 26.6133C75.8437 27.6289 76.8945 28.332 77.9102 29.0781C85.9258 34.9375 93.9336 40.8008 101.941 46.6719C106.801 50.2148 111.121 54.2656 114.145 59.5625C116.609 63.7656 118.133 68.293 118.715 73.1406C118.926 74.8555 119.047 76.582 119.07 78.3125C119.105 87.5039 119.07 96.6914 119.07 105.883V107.484C118.574 107.238 118.094 106.965 117.625 106.668C108.109 99.7188 98.5391 92.8281 89.1055 85.7617C80.832 79.543 75.9727 71.2031 74.7344 60.8242C74.5273 59.0391 74.4219 57.2461 74.4141 55.4492C74.3984 46.707 74.3984 37.9648 74.3984 29.2266V26.6133Z"

packages/desktop/src/pages/Login/index.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@mui/material";
+import ElectronGoogleOAuth2 from "@getstation/electron-google-oauth2";
+import Logo from "../../components/Logo";
+
+export default function () {
+  const signIn = () => {};
+
+  return (
+    <div className="container flex flex-col space-y-5 justify-center items-center h-screen bg-slate-900">
+      <Logo className="scale-50" />
+      <Button onClick={signIn} variant="contained">
+        Sign In
+      </Button>
+    </div>
+  );
+}