Openid

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,45 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { useSelector } from 'react-redux';
+
+import { type State } from 'loot-core/client/state-types';
+
+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 hasPermission = (permission?: Permissions) => {
+    if (!permission) {
+      return true;
+    }
+
+    return (
+      (userData?.offline ?? false) ||
+      (userData?.permissions?.includes(permission?.toUpperCase()) ?? false)
+    );
+  };
+
+  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,59 @@
+import { useEffect, useState, type ReactElement } from 'react';
+
+import { send } from 'loot-core/platform/client/fetch';
+
+import { View } from '../components/common/View';
+import { useLocalPref } from '../hooks/useLocalPref';
+
+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] = useLocalPref('cloudFileId');
+
+  useEffect(() => {
+    if (permissionGranted) {
+      return;
+    }
+
+    setPermissionGranted(hasPermission(permission));
+
+    if (!permissionGranted && validateOwner) {
+      send('check-file-access', cloudFileId).then(
+        ({ granted }: { granted: boolean }) => {
+          setPermissionGranted(granted);
+        },
+      );
+    }
+  }, [
+    cloudFileId,
+    permission,
+    validateOwner,
+    hasPermission,
+    permissionGranted,
+  ]);
+
+  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 = 'ADMINISTRATOR',
+}

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

@@ -23,6 +23,7 @@ import {
   send,
 } from 'loot-core/src/platform/client/fetch';
 
+import { useActions } from '../hooks/useActions';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
@@ -47,6 +48,8 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const loadingText = useSelector((state: State) => state.app.loadingText);
   const dispatch = useDispatch();
+  const userData = useSelector((state: State) => state.user.data);
+  const { signOut, addNotification } = useActions();
 
   async function init() {
     const socketName = await global.Actual.getServerSocket();
@@ -114,6 +117,24 @@ function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
     global.Actual.updateAppMenu(budgetId);
   }, [budgetId]);
 
+  useEffect(() => {
+    if (userData?.tokenExpired) {
+      addNotification({
+        type: 'error',
+        id: 'login-expired',
+        title: 'Login expired',
+        sticky: true,
+        message: 'Login expired, please login again.',
+        button: {
+          title: 'Go to login',
+          action: () => {
+            signOut();
+          },
+        },
+      });
+    }
+  }, [userData, userData?.tokenExpired]);
+
   return (
     <>
       {(initializing || !budgetId) && (

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

@@ -17,6 +17,8 @@ import { type State } from 'loot-core/src/client/state-types';
 import { checkForUpdateNotification } from 'loot-core/src/client/update-notification';
 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 { useActions } from '../hooks/useActions';
 import { useNavigate } from '../hooks/useNavigate';
@@ -25,6 +27,7 @@ import { theme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
+import { UserAccessPage } from './admin/UserAccess/UserAccessPage';
 import { BankSyncStatus } from './BankSyncStatus';
 import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import { View } from './common/View';
@@ -38,7 +41,9 @@ import { Notifications } from './Notifications';
 import { ManagePayeesPage } from './payees/ManagePayeesPage';
 import { Reports } from './reports';
 import { NarrowAlternate, WideComponent } from './responsive';
+import { UserDirectoryPage } from './responsive/wide';
 import { ScrollProvider } from './ScrollProvider';
+import { useMultiuserEnabled } from './ServerContext';
 import { Settings } from './settings';
 import { FloatableSidebar } from './sidebar';
 import { SidebarProvider } from './sidebar/SidebarProvider';
@@ -78,6 +83,7 @@ function RouterBehaviors() {
   const accountsLoaded = useSelector(
     (state: State) => state.queries.accountsLoaded,
   );
+
   useEffect(() => {
     // If there are no accounts, we want to redirect the user to
     // the All Accounts screen which will prompt them to add an account
@@ -97,6 +103,8 @@ function RouterBehaviors() {
 
 function FinancesAppWithoutContext() {
   const actions = useActions();
+  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.
@@ -219,7 +227,29 @@ function FinancesAppWithoutContext() {
                     </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>