added auth0 to ui

src/app/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.3.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",

src/app/src/components/App.js

@@ -1,14 +1,33 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import AppPicker from './AppPicker';
 import Transactions from './Transactions';
 import NotFound from './NotFound';
+import { useAuth0 } from '@auth0/auth0-react';
+import Button from '@mui/material/Button';
+import './App.css';
 
 export default function App() {
+  const { isAuthenticated, loginWithRedirect } = useAuth0();
+
+  if (!isAuthenticated) {
+    return (
+      <div className="app-picker">
+        <header className="app-picker-header">
+          <p>Please log in to continue</p>
+        </header>
+        <Button 
+          variant="contained" 
+          onClick={() => loginWithRedirect()}
+        >
+          Log In
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <BrowserRouter>
       <Routes>
-        <Route exact path="/" element={<AppPicker />} />
-        <Route path="/transactions/:appId" element={<Transactions />} />
+        <Route exact path="/" element={<Transactions />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>

src/app/src/components/Transactions.js

@@ -6,11 +6,13 @@ import CategorySelect from './CategorySelect';
 import MonthSelect from './MonthSelect';
 import YearSelect from './YearSelect';
 import settings from '../settings.json';
+import { useAuth0 } from '@auth0/auth0-react';
 
 export default function App() {
   const currentDate = new Date();
   const currentMonth = currentDate.getMonth() + 1;
   const currentYear = currentDate.getFullYear();
+  const { logout } = useAuth0();
 
   const [rows, setRows] = React.useState([]);
   const [category, setCategory] = React.useState('Tripp');
@@ -60,6 +62,15 @@ export default function App() {
         </div>
         <TransactionTable rows={rows} />
       </section>
+      <div className="logout-section">
+        <Button 
+          variant="outlined" 
+          onClick={() => logout({ returnTo: window.location.origin })}
+          style={{ marginTop: '20px' }}
+        >
+          Log Out
+        </Button>
+      </div>
     </div>
   );
 }

src/app/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { Auth0Provider } from '@auth0/auth0-react';
 import './index.css';
 import App from './components/App';
 import reportWebVitals from './reportWebVitals';
@@ -8,11 +9,16 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <React.StrictMode>
-    <App />
+    <Auth0Provider
+      domain="dev-r0soh4nzbzdmqtp3.us.auth0.com"
+      clientId="T4zCQQEGl6NbV8l3CUanMMQkGyd3YC7E"
+      authorizationParams={{
+        redirect_uri: window.location.origin
+      }}
+    >
+      <App />
+    </Auth0Provider>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();