OpenId Implementation (#3878)

* OpenId implementation

* Code rabbit auto generated code applied

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Code rabbit suggestions round 2

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fixes from code rabbit round 1

* fixes from code rabbit round 2

* change variable name

* code review round 3

* Update VRT

* small fix

* Update VRT

* linter

* app.tsx

* LoggedInUser

* UserAccess

* UserAccessHeader

* UserAccessPage

* UserAccessRow

* UserDirectory

* UserDirectoryHeader

* UserDirectoryPage

* UserDirectoryRow

* BudgetList

* Bootstrap

* Login

* OpenIdForm

* CreateAccountModal

* EditAccess

* EditUser

* GoCardlessInitialiseModal

* OpenIDEnableModal

* PasswordEnableModal

* SimpleFinInitialiseModal

* TransferOwnership

* AuthSettings

* fix hooks in EditUser

* enable electron openid login

* typecheck

* linter and typecheck fixes

* Update VRT

* small fix

* linter

* small changes for file owner name and a fix for privacyfilter in the username

* linter for merge

* change the entra url and changing the electron loopback url when built

* "logged in as" was showing when had no user

* linter

* linter²

* code review

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: matt <matt@fiddaman.net>

packages/api/methods.ts

@@ -86,7 +86,10 @@ export function addTransactions(
 }
 
 export function importTransactions(accountId, transactions) {
-  return send('api/transactions-import', { accountId, transactions });
+  return send('api/transactions-import', {
+    accountId,
+    transactions,
+  });
 }
 
 export function getTransactions(accountId, startDate, endDate) {

packages/desktop-client/src/auth/AuthProvider.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { useSelector } from 'react-redux';
+
+import { type State } from 'loot-core/client/state-types';
+
+import { useServerURL } from '../components/ServerContext';
+
+import { type Permissions } from './types';
+
+type AuthContextType = {
+  hasPermission: (permission?: Permissions) => boolean;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+type AuthProviderProps = {
+  children?: ReactNode;
+};
+
+export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const userData = useSelector((state: State) => state.user.data);
+  const serverUrl = useServerURL();
+
+  const hasPermission = (permission?: Permissions) => {
+    if (!permission) {
+      return true;
+    }
+
+    return (
+      !serverUrl ||
+      userData?.permission?.toUpperCase() === permission?.toUpperCase()
+    );
+  };
+
+  return (
+    <AuthContext.Provider value={{ hasPermission }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

packages/desktop-client/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { useSelector } from 'react-redux';
+
+import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
+
+import { View } from '../components/common/View';
+import { useMetadataPref } from '../hooks/useMetadataPref';
+
+import { useAuth } from './AuthProvider';
+import { type Permissions } from './types';
+
+type ProtectedRouteProps = {
+  permission: Permissions;
+  element: ReactElement;
+  validateOwner?: boolean;
+};
+
+export const ProtectedRoute = ({
+  element,
+  permission,
+  validateOwner,
+}: ProtectedRouteProps) => {
+  const { hasPermission } = useAuth();
+  const [permissionGranted, setPermissionGranted] = useState(false);
+  const [cloudFileId] = useMetadataPref('cloudFileId');
+  const allFiles = useSelector(state => state.budgets.allFiles || []);
+  const remoteFiles = allFiles.filter(
+    (f): f is SyncedLocalFile | RemoteFile =>
+      f.state === 'remote' || f.state === 'synced' || f.state === 'detached',
+  );
+  const currentFile = remoteFiles.find(f => f.cloudFileId === cloudFileId);
+  const userData = useSelector(state => state.user.data);
+
+  useEffect(() => {
+    const hasRequiredPermission = hasPermission(permission);
+    setPermissionGranted(hasRequiredPermission);
+
+    if (!hasRequiredPermission && validateOwner) {
+      if (currentFile) {
+        setPermissionGranted(
+          currentFile.usersWithAccess.some(u => u.userId === userData?.userId),
+        );
+      }
+    }
+  }, [
+    cloudFileId,
+    permission,
+    validateOwner,
+    hasPermission,
+    currentFile,
+    userData,
+  ]);
+
+  return permissionGranted ? (
+    element
+  ) : (
+    <View
+      style={{
+        margin: '50px',
+      }}
+    >
+      <h3>You don&apos;t have permission to view this page</h3>
+    </View>
+  );
+};

packages/desktop-client/src/auth/types.ts

@@ -0,0 +1,3 @@
+export enum Permissions {
+  ADMINISTRATOR = 'ADMIN',
+}

packages/desktop-client/src/browser-preload.browser.js

@@ -81,6 +81,8 @@ global.Actual = {
       });
   },
 
+  startOAuthServer: () => {},
+
   restartElectronServer: () => {},
 
   openFileDialog: async ({ filters = [] }) => {

packages/desktop-client/src/components/App.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-error-boundary';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
 import {
@@ -20,12 +20,14 @@ import {
   sync,
 } from 'loot-core/client/actions';
 import { SpreadsheetProvider } from 'loot-core/client/SpreadsheetProvider';
+import { type State } from 'loot-core/client/state-types';
 import * as Platform from 'loot-core/src/client/platform';
 import {
   init as initConnection,
   send,
 } from 'loot-core/src/platform/client/fetch';
 
+import { useActions } from '../hooks/useActions';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
@@ -49,6 +51,8 @@ function AppInner() {
   const { t } = useTranslation();
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const dispatch = useDispatch();
+  const userData = useSelector((state: State) => state.user.data);
+  const { signOut, addNotification } = useActions();
 
   const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
     if (global.Actual.isUpdateReadyForDownload()) {
@@ -123,6 +127,22 @@ function AppInner() {
     global.Actual.updateAppMenu(budgetId);
   }, [budgetId]);
 
+  useEffect(() => {
+    if (userData?.tokenExpired) {
+      addNotification({
+        type: 'error',
+        id: 'login-expired',
+        title: t('Login expired'),
+        sticky: true,
+        message: t('Login expired, please login again.'),
+        button: {
+          title: t('Go to login'),
+          action: signOut,
+        },
+      });
+    }
+  }, [userData, userData?.tokenExpired]);
+
   return budgetId ? <FinancesApp /> : <ManagementApp />;
 }
 

packages/desktop-client/src/components/FinancesApp.tsx

@@ -14,13 +14,16 @@ import { addNotification, sync } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 import * as undo from 'loot-core/src/platform/client/undo';
 
+import { ProtectedRoute } from '../auth/ProtectedRoute';
+import { Permissions } from '../auth/types';
 import { useAccounts } from '../hooks/useAccounts';
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useMetaThemeColor } from '../hooks/useMetaThemeColor';
 import { useNavigate } from '../hooks/useNavigate';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
+import { UserAccessPage } from './admin/UserAccess/UserAccessPage';
 import { BankSyncStatus } from './BankSyncStatus';
 import { View } from './common/View';
 import { GlobalKeys } from './GlobalKeys';
@@ -34,7 +37,9 @@ import { Reports } from './reports';
 import { LoadingIndicator } from './reports/LoadingIndicator';
 import { NarrowAlternate, WideComponent } from './responsive';
 import { useResponsive } from './responsive/ResponsiveProvider';
+import { UserDirectoryPage } from './responsive/wide';
 import { ScrollProvider } from './ScrollProvider';
+import { useMultiuserEnabled } from './ServerContext';
 import { Settings } from './settings';
 import { FloatableSidebar } from './sidebar';
 import { Titlebar } from './Titlebar';
@@ -93,6 +98,8 @@ export function FinancesApp() {
     'flags.updateNotificationShownForVersion',
   );
 
+  const multiuserEnabled = useMultiuserEnabled();
+
   useEffect(() => {
     // Wait a little bit to make sure the sync button will get the
     // sync start event. This can be improved later.
@@ -281,7 +288,29 @@ export function FinancesApp() {
                     </WideNotSupported>
                   }
                 />
-
+                {multiuserEnabled && (
+                  <Route
+                    path="/user-directory"
+                    element={
+                      <ProtectedRoute
+                        permission={Permissions.ADMINISTRATOR}
+                        element={<UserDirectoryPage />}
+                      />
+                    }
+                  />
+                )}
+                {multiuserEnabled && (
+                  <Route
+                    path="/user-access"
+                    element={
+                      <ProtectedRoute
+                        permission={Permissions.ADMINISTRATOR}
+                        validateOwner={true}
+                        element={<UserAccessPage />}
+                      />
+                    }
+                  />
+                )}
                 {/* redirect all other traffic to the budget page */}
                 <Route path="/*" element={<Navigate to="/budget" replace />} />
               </Routes>