trying stuff and setting up auto

packages/desktop/src/electron/handleLogin.ts

@@ -0,0 +1,18 @@
+import Channels, { STORE_ITEMS } from './constants';
+
+import ElectronGoogleOAuth2 from '@getstation/electron-google-oauth2';
+import { browserWindow } from '../index';
+
+const myApiOauth = new ElectronGoogleOAuth2(
+  '423533244953-banligobgbof8hg89i6cr1l7u0p7c2pk.apps.googleusercontent.com',
+  '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',
+  [''],
+  { successRedirectURL: 'http://localhost:3000/auth/success' },
+);
+
+// FRESH GOOGLE LOGIN
+export async function handleGoogleLogin() {
+  const tokens = await myApiOauth.openAuthWindowAndGetTokens();
+
+  browserWindow.webContents.send(Channels.GOOGLE_AUTH_TOKENS, tokens);
+}

packages/desktop/src/index.ts

@@ -1,6 +1,7 @@
 import { app, BrowserWindow, ipcMain, Display, screen } from 'electron';
 
 import Channels, { DEFAULT_APP_PRESET, DimensionChangeRequest } from './electron/constants';
+import { handleGoogleLogin } from './electron/handleLogin';
 // This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
@@ -25,6 +26,8 @@ const createWindow = (): void => {
     ...DEFAULT_APP_PRESET,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+      nodeIntegration: true,
+      contextIsolation: false,
     },
     // titleBarStyle: "hiddenInset",
     frame: false,
@@ -46,6 +49,13 @@ const createWindow = (): void => {
 app
   .whenReady()
   .then(createWindow)
+  .then(() => {
+    // activate login
+    ipcMain.on(Channels.ACTIVATE_LOG_IN, async (event, arg) => {
+      console.log('initiating log in');
+      await handleGoogleLogin();
+    });
+  })
   .then(() => {
     // dynamically changing the window bounds
     ipcMain.on(Channels.RESIZE_WINDOW, (event, req: DimensionChangeRequest) => {

packages/desktop/src/providers/AuthProvider.tsx

@@ -1,5 +1,11 @@
-import React, { useContext } from 'react';
+import { Button, Container } from '@mui/material';
+import React, { useContext, useEffect, useCallback } from 'react';
 import Realm from 'realm';
+import realmApp from '../realm/connect';
+
+import { FcGoogle } from 'react-icons/fc';
+import { blueGrey } from '@mui/material/colors';
+import Channels from '../electron/constants';
 
 interface IAuthContext {
   user?: Realm.User;
@@ -8,9 +14,44 @@ interface IAuthContext {
 const AuthContext = React.createContext<IAuthContext>({});
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  useEffect(() => {
+    window.electronAPI.once(Channels.GOOGLE_AUTH_TOKENS, async (tokens: any) => {
+      console.log('got tokens', tokens);
+      //   const credentials = Realm.Credentials.google(tokens);
+      //   realmApp.logIn(credentials).then((user) => alert(`Logged in with id: ${user.id}`));
+    });
+  }, []);
+
+  return <Login />;
+
   return <AuthContext.Provider value={{}}>{children}</AuthContext.Provider>;
 };
 
+const Login = () => {
+  // take user to browser to complete authentication
+  const handleLogin = useCallback(() => {
+    // send to main process
+    window.electronAPI.auth.initiateLogin();
+  }, []);
+
+  return (
+    <Container
+      maxWidth={false}
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: blueGrey[50],
+      }}
+    >
+      <Button onClick={handleLogin} variant="outlined" color="primary" startIcon={<FcGoogle />}>
+        Continue with Google
+      </Button>
+    </Container>
+  );
+};
+
 const useAuth = () => {
   return useContext(AuthContext);
 };

packages/desktop/src/realm/connect.ts

@@ -0,0 +1,11 @@
+import Realm from 'realm';
+
+const id = 'nirvana-ouauo';
+
+const config = {
+  id,
+};
+
+const realmApp = new Realm.App(config);
+
+export default realmApp;