From 1e5f4da8772e40cf668e23668e8bd51e8457b008 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Tue, 11 Apr 2023 22:40:04 -0500
Subject: [PATCH 01/13] Add login/logout and protected routes

---
 react/src/components/AppRouter.tsx            | 38 ++++++++++++-----
 .../Authentication/Callback/Callback.test.tsx | 17 ++++++--
 .../Authentication/Callback/Callback.tsx      | 42 ++++++++++++++++---
 .../Authentication/Login/Login.test.tsx       | 20 +++++++--
 .../components/Authentication/Login/Login.tsx | 42 ++++++++++++++++++-
 .../Authentication/Logout/Logout.test.tsx     | 24 +++++++++--
 .../Authentication/Logout/Logout.tsx          | 24 ++++++++++-
 .../src/components/MainMenu/MainMenu.test.tsx |  8 ++++
 react/src/components/MainMenu/MainMenu.tsx    |  7 ++++
 react/src/components/MainMenu/index.ts        |  1 +
 .../src/components/MapProject/MapProject.tsx  | 31 +++++++-------
 react/src/components/Menu/Menu.test.tsx       |  8 ----
 react/src/components/Menu/Menu.tsx            |  7 ----
 react/src/redux/api/geoapi.ts                 | 12 ++++++
 react/src/redux/authSlice.ts                  | 35 ++++++++++++++++
 react/src/redux/reducers/reducers.ts          |  2 +
 react/src/redux/store.ts                      |  5 ++-
 react/src/utils/authUtils.ts                  | 33 +++++++++++++++
 18 files changed, 295 insertions(+), 61 deletions(-)
 create mode 100644 react/src/components/MainMenu/MainMenu.test.tsx
 create mode 100644 react/src/components/MainMenu/MainMenu.tsx
 create mode 100644 react/src/components/MainMenu/index.ts
 delete mode 100644 react/src/components/Menu/Menu.test.tsx
 delete mode 100644 react/src/components/Menu/Menu.tsx
 create mode 100644 react/src/redux/authSlice.ts
 create mode 100644 react/src/utils/authUtils.ts

diff --git a/react/src/components/AppRouter.tsx b/react/src/components/AppRouter.tsx
index 1316683c..071301b6 100644
--- a/react/src/components/AppRouter.tsx
+++ b/react/src/components/AppRouter.tsx
@@ -1,27 +1,45 @@
-import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import React, {ReactElement} from 'react';
+import { useSelector } from 'react-redux';
+import { BrowserRouter, Route, Routes, Navigate, useLocation } from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 import MapProject from './MapProject';
-import Menu from './Menu/Menu';
+import MainMenu from './MainMenu';
 import Logout from './Authentication/Logout/Logout';
 import Login from './Authentication/Login/Login';
 import Callback from './Authentication/Callback/Callback';
 import StreetviewCallback from './Authentication/StreetviewCallback/StreetviewCallback';
+import { RootState } from '../redux/store';
+import { isTokenValid } from "../utils/authUtils";
+
+interface ProtectedRouteProps {
+  isAuthenticated: boolean;
+  children: ReactElement;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, isAuthenticated }) => {
+  const location = useLocation();
+
+  if (!isAuthenticated) {
+    const url = `/login?to=${encodeURIComponent(location.pathname)}`;
+    return <Navigate to={url} replace />;
+  }
+
+  return children;
+};
 
 function AppRouter() {
+  const isAuthenticated = useSelector((state: RootState) => isTokenValid(state.auth));
+
   return (
     <BrowserRouter>
       <Routes>
-        <Route path={ROUTES.MAIN} element={<Menu />} />
+        <Route path={ROUTES.MAIN} element={<ProtectedRoute isAuthenticated={isAuthenticated}><MainMenu /></ProtectedRoute>} />
         <Route path={ROUTES.LOGIN} element={<Login />} />
         <Route path={ROUTES.LOGOUT} element={<Logout />} />
-        <Route path={ROUTES.PROJECT} element={<MapProject />} />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublic />} />
+        <Route path={ROUTES.PROJECT} element={<ProtectedRoute isAuthenticated={isAuthenticated}><MapProject /></ProtectedRoute>} />
+        <Route path="project" element={<MapProject isPublic />} />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
-        <Route
-          path={ROUTES.STREETVIEW_CALLBACK}
-          element={<StreetviewCallback />}
-        />
+        <Route path={ROUTES.STREETVIEW_CALLBACK} element={<StreetviewCallback />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/react/src/components/Authentication/Callback/Callback.test.tsx b/react/src/components/Authentication/Callback/Callback.test.tsx
index 984d44a9..dce60727 100644
--- a/react/src/components/Authentication/Callback/Callback.test.tsx
+++ b/react/src/components/Authentication/Callback/Callback.test.tsx
@@ -1,8 +1,19 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
+import store from '../../../redux/store';
 import Callback from './Callback';
 
-test('renders callback', () => {
-  const { getByText } = render(<Callback />);
-  expect(getByText(/Callback/)).toBeDefined();
+test('renders callback', async () => {
+  const { getByText } = render(
+    <Provider store={store}>
+      <MemoryRouter initialEntries={['/callback']}>
+        <Callback />
+      </MemoryRouter>
+    </Provider>
+  );
+  expect(getByText(/Logging in/)).toBeDefined();
+
+  // TODO check local storage etc
 });
diff --git a/react/src/components/Authentication/Callback/Callback.tsx b/react/src/components/Authentication/Callback/Callback.tsx
index 342dba26..5e976a44 100644
--- a/react/src/components/Authentication/Callback/Callback.tsx
+++ b/react/src/components/Authentication/Callback/Callback.tsx
@@ -1,7 +1,39 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { loginSuccess, logout } from '../../../redux/authSlice';
 
-function Callback() {
-  return <h2>Callback</h2>;
-}
+export default function CallbackPage() {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Parse the query parameters from the URL
+    const params = new URLSearchParams(location.hash.slice(1));
+
+    // Check the state value against the expected value
+    const state = params.get('state');
+    const expectedState = localStorage.getItem('authState');
+    if (state !== expectedState) {
+      console.error('State for callback is incorrect.  Send to login');
+
+      // Redirect the user to the login page
+      dispatch(logout());
+      return;
+    }
 
-export default Callback;
+    const redirectTo = localStorage.getItem('toParam') || '/';
+
+    const token = params.get('access_token');
+    const expiresIn = params.get('expires_in');
+    if (token && expiresIn) {
+      const expires = Date.now() + parseInt(expiresIn) * 1000;
+      // Save the token to the Redux store
+      dispatch(loginSuccess({token, expires}));
+      navigate(redirectTo)
+    }
+  }, []);
+
+  return <div>Logging in...</div>;
+}
diff --git a/react/src/components/Authentication/Login/Login.test.tsx b/react/src/components/Authentication/Login/Login.test.tsx
index a8cfe5cc..dff2532c 100644
--- a/react/src/components/Authentication/Login/Login.test.tsx
+++ b/react/src/components/Authentication/Login/Login.test.tsx
@@ -1,8 +1,20 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import Login from './Login';
+import {Provider} from "react-redux";
+import store from "../../../redux/store";
+import {MemoryRouter} from "react-router";
 
-test('renders login', () => {
-  const { getByText } = render(<Login />);
-  expect(getByText(/Login/)).toBeDefined();
+test('renders login', async () => {
+  const { getByText } = render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    </Provider>
+  );
+  expect(getByText(/Logging in/)).toBeDefined();
+  await waitFor(() => {
+    expect(localStorage.getItem('authState')).not.toBeNull();
+  });
 });
diff --git a/react/src/components/Authentication/Login/Login.tsx b/react/src/components/Authentication/Login/Login.tsx
index 2c987066..105a76ef 100644
--- a/react/src/components/Authentication/Login/Login.tsx
+++ b/react/src/components/Authentication/Login/Login.tsx
@@ -1,7 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import {RootState} from "../../../redux/store";
+import {isTokenValid} from "../../../utils/authUtils";
+
+// TODO make auth/server configurable
+const client_id = 'RMCJHgW9CwJ6mKjhLTDnUYBo9Hka';
+
 
 function Login() {
-  return <h2>Login</h2>;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isAuthenticated = useSelector((state: RootState) => isTokenValid(state.auth));
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams(location.search);
+    const toParam = queryParams.get('to') || '/';
+
+    if(isAuthenticated) {
+      navigate(toParam)
+    } else {
+      const state = Math.random().toString(36);
+      // Save the authState parameter to localStorage
+      localStorage.setItem('authState', state);
+      localStorage.setItem('toParam', toParam);
+
+      // TODO check for staging/prod
+      const callbackUrl = `${window.location.origin}/callback`;
+
+      // Construct the authentication URL with the client_id, redirect_uri, scope, response_type, and state parameters
+      const authUrl = `https://agave.designsafe-ci.org/authorize?client_id=${client_id}&redirect_uri=${callbackUrl}&scope=openid&response_type=token&state=${state}`;
+
+      window.location.replace(authUrl);
+    }
+  }, []);
+
+  return (
+    <div>
+        'Logging in...'
+    </div>
+  );
 }
 
 export default Login;
diff --git a/react/src/components/Authentication/Logout/Logout.test.tsx b/react/src/components/Authentication/Logout/Logout.test.tsx
index d17af674..7e0baae2 100644
--- a/react/src/components/Authentication/Logout/Logout.test.tsx
+++ b/react/src/components/Authentication/Logout/Logout.test.tsx
@@ -1,8 +1,24 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import Logout from './Logout';
+import {Provider} from "react-redux";
+import store from "../../../redux/store";
+import {BrowserRouter} from "react-router-dom";
+import { AUTH_KEY} from "../../../utils/authUtils";
 
-test('renders logout', () => {
-  const { getByText } = render(<Logout />);
-  expect(getByText(/Logout/)).toBeDefined();
+test('renders logout', async () => {
+  localStorage.setItem(AUTH_KEY, "dummy");
+
+  const { getByText } = render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <Logout />
+      </BrowserRouter>
+    </Provider>
+  );
+  expect(getByText(/Log in/)).toBeDefined();
+  await waitFor(() => {
+    expect(localStorage.getItem(AUTH_KEY)).toBeNull();
+  });
+  // TODO check local storage etc
 });
diff --git a/react/src/components/Authentication/Logout/Logout.tsx b/react/src/components/Authentication/Logout/Logout.tsx
index aafd14b5..86f240dd 100644
--- a/react/src/components/Authentication/Logout/Logout.tsx
+++ b/react/src/components/Authentication/Logout/Logout.tsx
@@ -1,7 +1,27 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../../../redux/authSlice';
 
 function Logout() {
-  return <h2>Logout</h2>;
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    navigate('/login');
+  };
+
+  useEffect(() => {
+    dispatch(logout);
+  }, [dispatch]);
+
+  return (
+    <div>
+      <button onClick={handleLogin}>
+        {'Log in'}
+      </button>
+    </div>
+  );
 }
 
 export default Logout;
diff --git a/react/src/components/MainMenu/MainMenu.test.tsx b/react/src/components/MainMenu/MainMenu.test.tsx
new file mode 100644
index 00000000..f24b080d
--- /dev/null
+++ b/react/src/components/MainMenu/MainMenu.test.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MainMenu from './MainMenu';
+
+test('renders menu', () => {
+  const { getByText } = render(<MainMenu />);
+  expect(getByText(/Main Menu/)).toBeDefined();
+});
diff --git a/react/src/components/MainMenu/MainMenu.tsx b/react/src/components/MainMenu/MainMenu.tsx
new file mode 100644
index 00000000..dcaab318
--- /dev/null
+++ b/react/src/components/MainMenu/MainMenu.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function MainMenu() {
+  return <h2>Main Menu</h2>;
+}
+
+export default MainMenu;
diff --git a/react/src/components/MainMenu/index.ts b/react/src/components/MainMenu/index.ts
new file mode 100644
index 00000000..dfa3b5fd
--- /dev/null
+++ b/react/src/components/MainMenu/index.ts
@@ -0,0 +1 @@
+export { default } from './MainMenu';
diff --git a/react/src/components/MapProject/MapProject.tsx b/react/src/components/MapProject/MapProject.tsx
index 2a4748ad..289e72df 100644
--- a/react/src/components/MapProject/MapProject.tsx
+++ b/react/src/components/MapProject/MapProject.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Map from '../Map';
 import { tileServerLayers } from '../../__fixtures__/tileServerLayerFixture';
 import { featureCollection } from '../../__fixtures__/featuresFixture';
+import { useParams } from 'react-router-dom';
 
 interface Props {
   /**
@@ -14,20 +15,20 @@ interface Props {
 /**
  * A component that displays a map project (a map and related data)
  */
-export default class MapProject extends React.Component<Props> {
-  static defaultProps: Props = {
-    isPublic: false,
-  };
+const MapProject: React.FC<Props> = ({ isPublic = false }) => {
+  const { projectUUID } = useParams<{ projectUUID: string }>();
 
-  render() {
-    return (
-      <div style={{ width: '100vw', height: '100vh' }}>
-        {/* TODO for above and project, should we use style-components and/or CSS modules? */}
-        <Map
-          baseLayers={tileServerLayers}
-          featureCollection={featureCollection}
-        />
-      </div>
-    );
-  }
+  console.log(projectUUID);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      {/* TODO for above and project, should we use style-components and/or CSS modules? */}
+      <Map
+        baseLayers={tileServerLayers}
+        featureCollection={featureCollection}
+      />
+    </div>
+  );
 }
+
+export default MapProject;
diff --git a/react/src/components/Menu/Menu.test.tsx b/react/src/components/Menu/Menu.test.tsx
deleted file mode 100644
index c3cf0c29..00000000
--- a/react/src/components/Menu/Menu.test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Menu from './Menu';
-
-test('renders menu', () => {
-  const { getByText } = render(<Menu />);
-  expect(getByText(/Menu/)).toBeDefined();
-});
diff --git a/react/src/components/Menu/Menu.tsx b/react/src/components/Menu/Menu.tsx
deleted file mode 100644
index ddd94cdf..00000000
--- a/react/src/components/Menu/Menu.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function Menu() {
-  return <h2>Menu</h2>;
-}
-
-export default Menu;
diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index ecd071c6..4db06176 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -1,5 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';
+import store from '../store';
 
+// TODO: make configurable so can be https://agave.designsafe-ci.org/geo-staging/v2 or https://agave.designsafe-ci.org/geo/v2
 const BASE_URL = 'https:localhost:8888';
 
 export const geoapi = createApi({
@@ -7,9 +9,19 @@ export const geoapi = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: BASE_URL,
     prepareHeaders: (headers) => {
+
+      // TODO check if logged in as we don't want to add if public
+      const token = store.getState().auth.token;
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
       headers.set('Content-Type', 'application/json;charset=UTF-8');
       headers.set('Authorization', 'anonymous');
 
+      // TODO below adding of JWT if localhost and then add JWT
+      // we put the JWT on the request to our geoapi API because it is not behind ws02 if in local dev
+      // and if user is logged in
+
       return headers;
     },
   }),
diff --git a/react/src/redux/authSlice.ts b/react/src/redux/authSlice.ts
new file mode 100644
index 00000000..15839f37
--- /dev/null
+++ b/react/src/redux/authSlice.ts
@@ -0,0 +1,35 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { getAuthFromLocalStorage, setAuthToLocalStorage, removeAuthFromLocalStorage } from "../utils/authUtils";
+
+// TODO consider moving to ../types/
+export interface AuthState {
+  token: string | null;
+  expires: number | null;
+}
+
+// check local storage for our initial state
+const initialState: AuthState = getAuthFromLocalStorage();
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    loginSuccess(state, action: PayloadAction<{ token: string; expires: number }>) {
+      state.token = action.payload.token;
+      state.expires = action.payload.expires;
+
+      // save to local storage
+      setAuthToLocalStorage(state);
+    },
+    logout(state) {
+      state.token = null;
+      state.expires = null;
+
+      //remove from local storage
+      removeAuthFromLocalStorage();
+    },
+  },
+});
+
+export const { loginSuccess, logout } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/react/src/redux/reducers/reducers.ts b/react/src/redux/reducers/reducers.ts
index af37271e..a76a42c5 100644
--- a/react/src/redux/reducers/reducers.ts
+++ b/react/src/redux/reducers/reducers.ts
@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux';
 import { geoapi } from '../api/geoapi';
+import authReducer from '../authSlice';
 
 export const reducer = combineReducers({
+  auth: authReducer,
   [geoapi.reducerPath]: geoapi.reducer,
 });
diff --git a/react/src/redux/store.ts b/react/src/redux/store.ts
index c88312e8..b8649ed1 100644
--- a/react/src/redux/store.ts
+++ b/react/src/redux/store.ts
@@ -1,6 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { reducer } from './reducers/reducers';
 
-export default configureStore({
+const store = configureStore({
   reducer: reducer,
 });
+
+export type RootState = ReturnType<typeof store.getState>;
+export default store;
diff --git a/react/src/utils/authUtils.ts b/react/src/utils/authUtils.ts
new file mode 100644
index 00000000..d6e8db7c
--- /dev/null
+++ b/react/src/utils/authUtils.ts
@@ -0,0 +1,33 @@
+import { AuthState } from '../redux/authSlice';
+
+export const AUTH_KEY = "auth";
+
+export function isTokenValid(auth: AuthState): boolean {
+  if (!auth.expires) {
+    return false;
+  }
+
+  const now = Date.now();
+  return now < auth.expires;
+}
+
+export function getAuthFromLocalStorage(): AuthState {
+  try {
+    const tokenStr = localStorage.getItem(AUTH_KEY);
+    if (tokenStr) {
+      const auth = JSON.parse(tokenStr);
+      return {token: auth.token, expires: auth.expires};
+    }
+  } catch ( e: any ) {
+    console.error('Error loading state from localStorage:', e);
+  }
+  return {token: null, expires: null};
+}
+
+export function setAuthToLocalStorage(auth: AuthState) {
+  localStorage.setItem(AUTH_KEY, JSON.stringify(auth));
+}
+
+export function removeAuthFromLocalStorage() {
+  localStorage.removeItem(AUTH_KEY);
+}

From c35471c05d08727b94232fd8b5d5d2481672ca6d Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Tue, 18 Apr 2023 17:44:09 -0500
Subject: [PATCH 02/13] Refactor

---
 react/src/components/Authentication/Login/Login.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/react/src/components/Authentication/Login/Login.tsx b/react/src/components/Authentication/Login/Login.tsx
index 105a76ef..58a2fed3 100644
--- a/react/src/components/Authentication/Login/Login.tsx
+++ b/react/src/components/Authentication/Login/Login.tsx
@@ -4,10 +4,6 @@ import { useSelector } from 'react-redux';
 import {RootState} from "../../../redux/store";
 import {isTokenValid} from "../../../utils/authUtils";
 
-// TODO make auth/server configurable
-const client_id = 'RMCJHgW9CwJ6mKjhLTDnUYBo9Hka';
-
-
 function Login() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -28,6 +24,9 @@ function Login() {
       // TODO check for staging/prod
       const callbackUrl = `${window.location.origin}/callback`;
 
+      // TODO make auth/server configurable
+      const client_id = 'RMCJHgW9CwJ6mKjhLTDnUYBo9Hka';
+
       // Construct the authentication URL with the client_id, redirect_uri, scope, response_type, and state parameters
       const authUrl = `https://agave.designsafe-ci.org/authorize?client_id=${client_id}&redirect_uri=${callbackUrl}&scope=openid&response_type=token&state=${state}`;
 

From 3cb4a0dc31e537271ecdcace932b0039600b0574 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Tue, 18 Apr 2023 17:45:43 -0500
Subject: [PATCH 03/13] Fix tests

---
 .../components/Authentication/Callback/Callback.test.tsx | 2 --
 .../src/components/Authentication/Logout/Logout.test.tsx | 9 +--------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/react/src/components/Authentication/Callback/Callback.test.tsx b/react/src/components/Authentication/Callback/Callback.test.tsx
index dce60727..78bfd7dd 100644
--- a/react/src/components/Authentication/Callback/Callback.test.tsx
+++ b/react/src/components/Authentication/Callback/Callback.test.tsx
@@ -14,6 +14,4 @@ test('renders callback', async () => {
     </Provider>
   );
   expect(getByText(/Logging in/)).toBeDefined();
-
-  // TODO check local storage etc
 });
diff --git a/react/src/components/Authentication/Logout/Logout.test.tsx b/react/src/components/Authentication/Logout/Logout.test.tsx
index 7e0baae2..7beed0d8 100644
--- a/react/src/components/Authentication/Logout/Logout.test.tsx
+++ b/react/src/components/Authentication/Logout/Logout.test.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import {render, waitFor} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import Logout from './Logout';
 import {Provider} from "react-redux";
 import store from "../../../redux/store";
 import {BrowserRouter} from "react-router-dom";
-import { AUTH_KEY} from "../../../utils/authUtils";
 
 test('renders logout', async () => {
-  localStorage.setItem(AUTH_KEY, "dummy");
-
   const { getByText } = render(
     <Provider store={store}>
       <BrowserRouter>
@@ -17,8 +14,4 @@ test('renders logout', async () => {
     </Provider>
   );
   expect(getByText(/Log in/)).toBeDefined();
-  await waitFor(() => {
-    expect(localStorage.getItem(AUTH_KEY)).toBeNull();
-  });
-  // TODO check local storage etc
 });

From cb5df58760bef2cb119b18ee485b12ad0ac21cdf Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Tue, 18 Apr 2023 18:34:59 -0500
Subject: [PATCH 04/13] Fix linting

---
 react/src/components/AppRouter.tsx            | 44 +++++++++++++++----
 .../Authentication/Callback/Callback.tsx      |  4 +-
 .../Authentication/Login/Login.test.tsx       |  6 +--
 .../components/Authentication/Login/Login.tsx | 18 ++++----
 .../Authentication/Logout/Logout.test.tsx     |  8 ++--
 .../Authentication/Logout/Logout.tsx          |  6 +--
 .../src/components/MapProject/MapProject.tsx  |  2 +-
 react/src/redux/api/geoapi.ts                 |  1 -
 react/src/redux/authSlice.ts                  | 11 ++++-
 react/src/utils/authUtils.ts                  |  8 ++--
 10 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/react/src/components/AppRouter.tsx b/react/src/components/AppRouter.tsx
index 071301b6..4ec308c2 100644
--- a/react/src/components/AppRouter.tsx
+++ b/react/src/components/AppRouter.tsx
@@ -1,6 +1,12 @@
-import React, {ReactElement} from 'react';
+import React, { ReactElement } from 'react';
 import { useSelector } from 'react-redux';
-import { BrowserRouter, Route, Routes, Navigate, useLocation } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Route,
+  Routes,
+  Navigate,
+  useLocation,
+} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 import MapProject from './MapProject';
 import MainMenu from './MainMenu';
@@ -9,14 +15,17 @@ import Login from './Authentication/Login/Login';
 import Callback from './Authentication/Callback/Callback';
 import StreetviewCallback from './Authentication/StreetviewCallback/StreetviewCallback';
 import { RootState } from '../redux/store';
-import { isTokenValid } from "../utils/authUtils";
+import { isTokenValid } from '../utils/authUtils';
 
 interface ProtectedRouteProps {
   isAuthenticated: boolean;
   children: ReactElement;
 }
 
-const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, isAuthenticated }) => {
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  children,
+  isAuthenticated,
+}) => {
   const location = useLocation();
 
   if (!isAuthenticated) {
@@ -28,18 +37,37 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, isAuthenticat
 };
 
 function AppRouter() {
-  const isAuthenticated = useSelector((state: RootState) => isTokenValid(state.auth));
+  const isAuthenticated = useSelector((state: RootState) =>
+    isTokenValid(state.auth)
+  );
 
   return (
     <BrowserRouter>
       <Routes>
-        <Route path={ROUTES.MAIN} element={<ProtectedRoute isAuthenticated={isAuthenticated}><MainMenu /></ProtectedRoute>} />
+        <Route
+          path={ROUTES.MAIN}
+          element={
+            <ProtectedRoute isAuthenticated={isAuthenticated}>
+              <MainMenu />
+            </ProtectedRoute>
+          }
+        />
         <Route path={ROUTES.LOGIN} element={<Login />} />
         <Route path={ROUTES.LOGOUT} element={<Logout />} />
-        <Route path={ROUTES.PROJECT} element={<ProtectedRoute isAuthenticated={isAuthenticated}><MapProject /></ProtectedRoute>} />
+        <Route
+          path={ROUTES.PROJECT}
+          element={
+            <ProtectedRoute isAuthenticated={isAuthenticated}>
+              <MapProject />
+            </ProtectedRoute>
+          }
+        />
         <Route path="project" element={<MapProject isPublic />} />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
-        <Route path={ROUTES.STREETVIEW_CALLBACK} element={<StreetviewCallback />} />
+        <Route
+          path={ROUTES.STREETVIEW_CALLBACK}
+          element={<StreetviewCallback />}
+        />
       </Routes>
     </BrowserRouter>
   );
diff --git a/react/src/components/Authentication/Callback/Callback.tsx b/react/src/components/Authentication/Callback/Callback.tsx
index 5e976a44..a33b4d5e 100644
--- a/react/src/components/Authentication/Callback/Callback.tsx
+++ b/react/src/components/Authentication/Callback/Callback.tsx
@@ -30,8 +30,8 @@ export default function CallbackPage() {
     if (token && expiresIn) {
       const expires = Date.now() + parseInt(expiresIn) * 1000;
       // Save the token to the Redux store
-      dispatch(loginSuccess({token, expires}));
-      navigate(redirectTo)
+      dispatch(loginSuccess({ token, expires }));
+      navigate(redirectTo);
     }
   }, []);
 
diff --git a/react/src/components/Authentication/Login/Login.test.tsx b/react/src/components/Authentication/Login/Login.test.tsx
index dff2532c..c392f80f 100644
--- a/react/src/components/Authentication/Login/Login.test.tsx
+++ b/react/src/components/Authentication/Login/Login.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import Login from './Login';
-import {Provider} from "react-redux";
-import store from "../../../redux/store";
-import {MemoryRouter} from "react-router";
+import { Provider } from 'react-redux';
+import store from '../../../redux/store';
+import { MemoryRouter } from 'react-router';
 
 test('renders login', async () => {
   const { getByText } = render(
diff --git a/react/src/components/Authentication/Login/Login.tsx b/react/src/components/Authentication/Login/Login.tsx
index 58a2fed3..e8624656 100644
--- a/react/src/components/Authentication/Login/Login.tsx
+++ b/react/src/components/Authentication/Login/Login.tsx
@@ -1,20 +1,22 @@
 import React, { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import {RootState} from "../../../redux/store";
-import {isTokenValid} from "../../../utils/authUtils";
+import { RootState } from '../../../redux/store';
+import { isTokenValid } from '../../../utils/authUtils';
 
 function Login() {
   const location = useLocation();
   const navigate = useNavigate();
-  const isAuthenticated = useSelector((state: RootState) => isTokenValid(state.auth));
+  const isAuthenticated = useSelector((state: RootState) =>
+    isTokenValid(state.auth)
+  );
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
     const toParam = queryParams.get('to') || '/';
 
-    if(isAuthenticated) {
-      navigate(toParam)
+    if (isAuthenticated) {
+      navigate(toParam);
     } else {
       const state = Math.random().toString(36);
       // Save the authState parameter to localStorage
@@ -34,11 +36,7 @@ function Login() {
     }
   }, []);
 
-  return (
-    <div>
-        'Logging in...'
-    </div>
-  );
+  return <div>'Logging in...'</div>;
 }
 
 export default Login;
diff --git a/react/src/components/Authentication/Logout/Logout.test.tsx b/react/src/components/Authentication/Logout/Logout.test.tsx
index 7beed0d8..f6163e8e 100644
--- a/react/src/components/Authentication/Logout/Logout.test.tsx
+++ b/react/src/components/Authentication/Logout/Logout.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import {render} from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Logout from './Logout';
-import {Provider} from "react-redux";
-import store from "../../../redux/store";
-import {BrowserRouter} from "react-router-dom";
+import { Provider } from 'react-redux';
+import store from '../../../redux/store';
+import { BrowserRouter } from 'react-router-dom';
 
 test('renders logout', async () => {
   const { getByText } = render(
diff --git a/react/src/components/Authentication/Logout/Logout.tsx b/react/src/components/Authentication/Logout/Logout.tsx
index 86f240dd..5f8d146c 100644
--- a/react/src/components/Authentication/Logout/Logout.tsx
+++ b/react/src/components/Authentication/Logout/Logout.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { logout } from '../../../redux/authSlice';
@@ -17,9 +17,7 @@ function Logout() {
 
   return (
     <div>
-      <button onClick={handleLogin}>
-        {'Log in'}
-      </button>
+      <button onClick={handleLogin}>{'Log in'}</button>
     </div>
   );
 }
diff --git a/react/src/components/MapProject/MapProject.tsx b/react/src/components/MapProject/MapProject.tsx
index 289e72df..d46dcb71 100644
--- a/react/src/components/MapProject/MapProject.tsx
+++ b/react/src/components/MapProject/MapProject.tsx
@@ -29,6 +29,6 @@ const MapProject: React.FC<Props> = ({ isPublic = false }) => {
       />
     </div>
   );
-}
+};
 
 export default MapProject;
diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 4db06176..24b207eb 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -9,7 +9,6 @@ export const geoapi = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: BASE_URL,
     prepareHeaders: (headers) => {
-
       // TODO check if logged in as we don't want to add if public
       const token = store.getState().auth.token;
       if (token) {
diff --git a/react/src/redux/authSlice.ts b/react/src/redux/authSlice.ts
index 15839f37..0e0c299b 100644
--- a/react/src/redux/authSlice.ts
+++ b/react/src/redux/authSlice.ts
@@ -1,5 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { getAuthFromLocalStorage, setAuthToLocalStorage, removeAuthFromLocalStorage } from "../utils/authUtils";
+import {
+  getAuthFromLocalStorage,
+  setAuthToLocalStorage,
+  removeAuthFromLocalStorage,
+} from '../utils/authUtils';
 
 // TODO consider moving to ../types/
 export interface AuthState {
@@ -13,7 +17,10 @@ const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    loginSuccess(state, action: PayloadAction<{ token: string; expires: number }>) {
+    loginSuccess(
+      state,
+      action: PayloadAction<{ token: string; expires: number }>
+    ) {
       state.token = action.payload.token;
       state.expires = action.payload.expires;
 
diff --git a/react/src/utils/authUtils.ts b/react/src/utils/authUtils.ts
index d6e8db7c..b804dcfd 100644
--- a/react/src/utils/authUtils.ts
+++ b/react/src/utils/authUtils.ts
@@ -1,6 +1,6 @@
 import { AuthState } from '../redux/authSlice';
 
-export const AUTH_KEY = "auth";
+export const AUTH_KEY = 'auth';
 
 export function isTokenValid(auth: AuthState): boolean {
   if (!auth.expires) {
@@ -16,12 +16,12 @@ export function getAuthFromLocalStorage(): AuthState {
     const tokenStr = localStorage.getItem(AUTH_KEY);
     if (tokenStr) {
       const auth = JSON.parse(tokenStr);
-      return {token: auth.token, expires: auth.expires};
+      return { token: auth.token, expires: auth.expires };
     }
-  } catch ( e: any ) {
+  } catch (e: any) {
     console.error('Error loading state from localStorage:', e);
   }
-  return {token: null, expires: null};
+  return { token: null, expires: null };
 }
 
 export function setAuthToLocalStorage(auth: AuthState) {

From dda7fec661f965787ed59d994a49edcec22aa2b1 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Fri, 21 Apr 2023 10:57:28 -0500
Subject: [PATCH 05/13] Fix linting

---
 react/src/components/Authentication/Login/Login.tsx   | 2 +-
 react/src/components/Authentication/Logout/Logout.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/src/components/Authentication/Login/Login.tsx b/react/src/components/Authentication/Login/Login.tsx
index e8624656..091464e7 100644
--- a/react/src/components/Authentication/Login/Login.tsx
+++ b/react/src/components/Authentication/Login/Login.tsx
@@ -36,7 +36,7 @@ function Login() {
     }
   }, []);
 
-  return <div>'Logging in...'</div>;
+  return <div>Logging in...</div>;
 }
 
 export default Login;
diff --git a/react/src/components/Authentication/Logout/Logout.tsx b/react/src/components/Authentication/Logout/Logout.tsx
index 5f8d146c..ca39fed3 100644
--- a/react/src/components/Authentication/Logout/Logout.tsx
+++ b/react/src/components/Authentication/Logout/Logout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { logout } from '../../../redux/authSlice';

From 36b0c139cb65b7e50f26407dc8813b90bb281a8a Mon Sep 17 00:00:00 2001
From: Ian Park <contact@duckonomy.com>
Date: Sat, 29 Apr 2023 01:47:23 +0900
Subject: [PATCH 06/13] Add projects and user queries.

---
 react/src/components/AppRouter.tsx         |  2 +-
 react/src/components/MainMenu/MainMenu.tsx |  6 +++
 react/src/redux/api/geoapi.ts              | 28 +++++++++----
 react/src/redux/authSlice.ts               | 48 +++++++++++++++-------
 react/src/redux/projectsSlice.ts           | 18 ++++++++
 react/src/redux/reducers/reducers.ts       |  2 +
 react/src/redux/store.ts                   |  7 ++++
 react/src/types/auth.ts                    | 14 +++++++
 react/src/types/index.ts                   | 10 ++++-
 react/src/utils/authUtils.ts               | 26 +++++++-----
 10 files changed, 125 insertions(+), 36 deletions(-)
 create mode 100644 react/src/redux/projectsSlice.ts
 create mode 100644 react/src/types/auth.ts

diff --git a/react/src/components/AppRouter.tsx b/react/src/components/AppRouter.tsx
index 4ec308c2..54bfb228 100644
--- a/react/src/components/AppRouter.tsx
+++ b/react/src/components/AppRouter.tsx
@@ -38,7 +38,7 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
 
 function AppRouter() {
   const isAuthenticated = useSelector((state: RootState) =>
-    isTokenValid(state.auth)
+    isTokenValid(state.auth.token)
   );
 
   return (
diff --git a/react/src/components/MainMenu/MainMenu.tsx b/react/src/components/MainMenu/MainMenu.tsx
index dcaab318..f1216a57 100644
--- a/react/src/components/MainMenu/MainMenu.tsx
+++ b/react/src/components/MainMenu/MainMenu.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
+import {
+  useGetGeoapiProjectsQuery,
+  useGetGeoapiUserInfoQuery,
+} from '../../redux/api/geoapi';
 
 function MainMenu() {
+  useGetGeoapiProjectsQuery();
+  useGetGeoapiUserInfoQuery();
   return <h2>Main Menu</h2>;
 }
 
diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 24b207eb..cd6e9329 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -1,21 +1,22 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';
-import store from '../store';
+import type { RootState } from '../store';
 
 // TODO: make configurable so can be https://agave.designsafe-ci.org/geo-staging/v2 or https://agave.designsafe-ci.org/geo/v2
-const BASE_URL = 'https:localhost:8888';
+const BASE_URL = 'https://agave.designsafe-ci.org/geo/v2';
 
 export const geoapi = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
     baseUrl: BASE_URL,
-    prepareHeaders: (headers) => {
+    prepareHeaders: (headers, api) => {
       // TODO check if logged in as we don't want to add if public
-      const token = store.getState().auth.token;
+      const token = (api.getState() as RootState).auth.token;
+
       if (token) {
-        headers.set('Authorization', `Bearer ${token}`);
+        headers.set('Authorization', `Bearer ${token.token}`);
       }
+
       headers.set('Content-Type', 'application/json;charset=UTF-8');
-      headers.set('Authorization', 'anonymous');
 
       // TODO below adding of JWT if localhost and then add JWT
       // we put the JWT on the request to our geoapi API because it is not behind ws02 if in local dev
@@ -25,5 +26,18 @@ export const geoapi = createApi({
     },
   }),
   tagTypes: ['Test'],
-  endpoints: () => ({}),
+  endpoints: (builder) => ({
+    getGeoapiProjects: builder.query<any, void>({
+      query: () => '/projects/',
+    }),
+    // NOTE: Currently fails due to cors on localhost (chrome) works when requesting production backend
+    getGeoapiUserInfo: builder.query<any, void>({
+      query: () => ({
+        url: 'https://agave.designsafe-ci.org/oauth2/userinfo?schema=openid',
+        method: 'GET',
+      }),
+    }),
+  }),
 });
+
+export const { useGetGeoapiProjectsQuery, useGetGeoapiUserInfoQuery } = geoapi;
diff --git a/react/src/redux/authSlice.ts b/react/src/redux/authSlice.ts
index 0e0c299b..532d3a5e 100644
--- a/react/src/redux/authSlice.ts
+++ b/react/src/redux/authSlice.ts
@@ -1,18 +1,19 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import {
-  getAuthFromLocalStorage,
-  setAuthToLocalStorage,
-  removeAuthFromLocalStorage,
+  getTokenFromLocalStorage,
+  setTokenToLocalStorage,
+  removeTokenFromLocalStorage,
 } from '../utils/authUtils';
+import { AuthState, AuthenticatedUser } from '../types';
+import { geoapi } from './api/geoapi';
 
 // TODO consider moving to ../types/
-export interface AuthState {
-  token: string | null;
-  expires: number | null;
-}
-
 // check local storage for our initial state
-const initialState: AuthState = getAuthFromLocalStorage();
+const initialState: AuthState = {
+  token: getTokenFromLocalStorage(),
+  user: null,
+};
+
 const authSlice = createSlice({
   name: 'auth',
   initialState,
@@ -21,19 +22,36 @@ const authSlice = createSlice({
       state,
       action: PayloadAction<{ token: string; expires: number }>
     ) {
-      state.token = action.payload.token;
-      state.expires = action.payload.expires;
+      state.token = {
+        token: action.payload.token,
+        expires: action.payload.expires,
+      };
 
       // save to local storage
-      setAuthToLocalStorage(state);
+      setTokenToLocalStorage(state.token);
     },
     logout(state) {
+      state.user = null;
       state.token = null;
-      state.expires = null;
-
       //remove from local storage
-      removeAuthFromLocalStorage();
+      removeTokenFromLocalStorage();
     },
+
+    setUser(state, action: PayloadAction<{ user: AuthenticatedUser }>) {
+      state.user = action.payload.user;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(
+      geoapi.endpoints.getGeoapiUserInfo.matchFulfilled,
+      (state, action: PayloadAction<any>) => {
+        const u: any = {
+          name: action.payload.name,
+          email: action.payload.email,
+        };
+        state.user = u;
+      }
+    );
   },
 });
 
diff --git a/react/src/redux/projectsSlice.ts b/react/src/redux/projectsSlice.ts
new file mode 100644
index 00000000..49d34e2e
--- /dev/null
+++ b/react/src/redux/projectsSlice.ts
@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { geoapi } from './api/geoapi';
+
+const slice = createSlice({
+  name: 'projects',
+  initialState: { projects: [] },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addMatcher(
+      geoapi.endpoints.getGeoapiProjects.matchFulfilled,
+      (state, { payload }) => {
+        state.projects = payload;
+      }
+    );
+  },
+});
+
+export default slice.reducer;
diff --git a/react/src/redux/reducers/reducers.ts b/react/src/redux/reducers/reducers.ts
index a76a42c5..d05723db 100644
--- a/react/src/redux/reducers/reducers.ts
+++ b/react/src/redux/reducers/reducers.ts
@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import { geoapi } from '../api/geoapi';
 import authReducer from '../authSlice';
+import projectsReducer from '../projectsSlice';
 
 export const reducer = combineReducers({
   auth: authReducer,
+  projects: projectsReducer,
   [geoapi.reducerPath]: geoapi.reducer,
 });
diff --git a/react/src/redux/store.ts b/react/src/redux/store.ts
index b8649ed1..84e14e3c 100644
--- a/react/src/redux/store.ts
+++ b/react/src/redux/store.ts
@@ -1,9 +1,16 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { reducer } from './reducers/reducers';
+import { geoapi } from './api/geoapi';
 
 const store = configureStore({
   reducer: reducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false }).concat(
+      geoapi.middleware
+    ),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
 export default store;
diff --git a/react/src/types/auth.ts b/react/src/types/auth.ts
new file mode 100644
index 00000000..c7c524d3
--- /dev/null
+++ b/react/src/types/auth.ts
@@ -0,0 +1,14 @@
+export interface AuthenticatedUser {
+  username: string | null;
+  email: string | null;
+}
+
+export interface AuthToken {
+  token: string | null;
+  expires: number | null;
+}
+
+export interface AuthState {
+  user: AuthenticatedUser | null;
+  token: AuthToken | null;
+}
diff --git a/react/src/types/index.ts b/react/src/types/index.ts
index 31bf742e..789ea821 100644
--- a/react/src/types/index.ts
+++ b/react/src/types/index.ts
@@ -1,2 +1,8 @@
-export { TileServerLayer } from './tileServerLayer';
-export { Asset, Feature, FeatureClass, FeatureCollection } from './feature';
+export type { TileServerLayer } from './tileServerLayer';
+export type {
+  Asset,
+  Feature,
+  FeatureClass,
+  FeatureCollection,
+} from './feature';
+export type { AuthState, AuthenticatedUser, AuthToken } from './auth';
diff --git a/react/src/utils/authUtils.ts b/react/src/utils/authUtils.ts
index b804dcfd..39b33906 100644
--- a/react/src/utils/authUtils.ts
+++ b/react/src/utils/authUtils.ts
@@ -1,22 +1,26 @@
-import { AuthState } from '../redux/authSlice';
+import { AuthState, AuthToken } from '../types';
 
 export const AUTH_KEY = 'auth';
 
-export function isTokenValid(auth: AuthState): boolean {
-  if (!auth.expires) {
+export function isTokenValid(token: AuthToken | null): boolean {
+  if (token) {
+    if (!token.expires) {
+      return false;
+    }
+
+    const now = Date.now();
+    return now < token.expires;
+  } else {
     return false;
   }
-
-  const now = Date.now();
-  return now < auth.expires;
 }
 
-export function getAuthFromLocalStorage(): AuthState {
+export function getTokenFromLocalStorage(): AuthToken {
   try {
     const tokenStr = localStorage.getItem(AUTH_KEY);
     if (tokenStr) {
       const auth = JSON.parse(tokenStr);
-      return { token: auth.token, expires: auth.expires };
+      return auth;
     }
   } catch (e: any) {
     console.error('Error loading state from localStorage:', e);
@@ -24,10 +28,10 @@ export function getAuthFromLocalStorage(): AuthState {
   return { token: null, expires: null };
 }
 
-export function setAuthToLocalStorage(auth: AuthState) {
-  localStorage.setItem(AUTH_KEY, JSON.stringify(auth));
+export function setTokenToLocalStorage(token: AuthToken) {
+  localStorage.setItem(AUTH_KEY, JSON.stringify(token));
 }
 
-export function removeAuthFromLocalStorage() {
+export function removeTokenFromLocalStorage() {
   localStorage.removeItem(AUTH_KEY);
 }

From ef50e4cff116df0ce890251f9bdf926274e82974 Mon Sep 17 00:00:00 2001
From: Ian Park <contact@duckonomy.com>
Date: Sat, 29 Apr 2023 01:59:58 +0900
Subject: [PATCH 07/13] Fix bug.

---
 react/src/components/Authentication/Login/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/components/Authentication/Login/Login.tsx b/react/src/components/Authentication/Login/Login.tsx
index 091464e7..b4b2170a 100644
--- a/react/src/components/Authentication/Login/Login.tsx
+++ b/react/src/components/Authentication/Login/Login.tsx
@@ -8,7 +8,7 @@ function Login() {
   const location = useLocation();
   const navigate = useNavigate();
   const isAuthenticated = useSelector((state: RootState) =>
-    isTokenValid(state.auth)
+    isTokenValid(state.auth.token)
   );
 
   useEffect(() => {

From fcaf7c2c11e5ec2db0d3f5a98649be0bb299e2b4 Mon Sep 17 00:00:00 2001
From: Ian Park <contact@duckonomy.com>
Date: Sat, 29 Apr 2023 02:09:39 +0900
Subject: [PATCH 08/13] Fix test.

---
 react/src/components/MainMenu/MainMenu.test.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/react/src/components/MainMenu/MainMenu.test.tsx b/react/src/components/MainMenu/MainMenu.test.tsx
index f24b080d..cf38b508 100644
--- a/react/src/components/MainMenu/MainMenu.test.tsx
+++ b/react/src/components/MainMenu/MainMenu.test.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MainMenu from './MainMenu';
+import { Provider } from 'react-redux';
+import store from '../../redux/store';
 
 test('renders menu', () => {
-  const { getByText } = render(<MainMenu />);
+  const { getByText } = render(
+    <Provider store={store}>
+      <MainMenu />
+    </Provider>
+  );
   expect(getByText(/Main Menu/)).toBeDefined();
 });

From 2ac1062ed941a0801fa6fe7456cfdb5f5c6b074b Mon Sep 17 00:00:00 2001
From: Ian Park <contact@duckonomy.com>
Date: Sat, 29 Apr 2023 02:20:15 +0900
Subject: [PATCH 09/13] Add prettier.

---
 react/package.json            | 4 +++-
 react/src/redux/api/geoapi.ts | 1 -
 react/src/types/index.ts      | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/react/package.json b/react/package.json
index 2ba20486..80095147 100644
--- a/react/package.json
+++ b/react/package.json
@@ -10,7 +10,9 @@
         "test": "jest",
         "lint": "npm run lint:js",
         "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx",
-        "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+        "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+        "prettier:check": "prettier --single-quote --check src",
+        "prettier:fix": "prettier --single-quote --write src"
     },
     "eslintConfig": {
         "extends": "react-app"
diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 8425133a..1636c42c 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -4,7 +4,6 @@ import type { RootState } from '../store';
 // TODO: make configurable so can be https://agave.designsafe-ci.org/geo-staging/v2 or https://agave.designsafe-ci.org/geo/v2
 const BASE_URL = 'https://agave.designsafe-ci.org/geo/v2';
 
-
 export const geoapi = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
diff --git a/react/src/types/index.ts b/react/src/types/index.ts
index 92eb98f6..789ea821 100644
--- a/react/src/types/index.ts
+++ b/react/src/types/index.ts
@@ -5,4 +5,4 @@ export type {
   FeatureClass,
   FeatureCollection,
 } from './feature';
-export type { AuthState, AuthenticatedUser, AuthToken } from './auth';
\ No newline at end of file
+export type { AuthState, AuthenticatedUser, AuthToken } from './auth';

From d1f03fe548981ff96aa98a10bceacca3067d0530 Mon Sep 17 00:00:00 2001
From: Ian Park <contact@duckonomy.com>
Date: Sat, 29 Apr 2023 02:28:04 +0900
Subject: [PATCH 10/13] Update authUtils.ts

---
 react/src/utils/authUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/utils/authUtils.ts b/react/src/utils/authUtils.ts
index 39b33906..3dd533dc 100644
--- a/react/src/utils/authUtils.ts
+++ b/react/src/utils/authUtils.ts
@@ -1,4 +1,4 @@
-import { AuthState, AuthToken } from '../types';
+import { AuthToken } from '../types';
 
 export const AUTH_KEY = 'auth';
 

From 6a06ac6cbd988667b376b8e281f59f3c4e33fc6d Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Thu, 4 May 2023 15:57:57 -0500
Subject: [PATCH 11/13] Update react/src/redux/api/geoapi.ts

---
 react/src/redux/api/geoapi.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 1636c42c..968259c8 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -18,9 +18,6 @@ export const geoapi = createApi({
 
       headers.set('Content-Type', 'application/json;charset=UTF-8');
 
-      // TODO below adding of JWT if localhost and then add JWT
-      // we put the JWT on the request to our geoapi API because it is not behind ws02 if in local dev
-      // and if user is logged in
 
       // TODO below adding of JWT if localhost and then add JWT
       // we put the JWT on the request to our geoapi API because it is not behind ws02 if in local dev

From e316efe615d9a3abc445f12d614ded003ec60d86 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Fri, 15 Dec 2023 10:57:35 -0600
Subject: [PATCH 12/13] Add link to related jira issue

---
 react/src/redux/api/geoapi.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 968259c8..77faa12c 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -2,6 +2,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';
 import type { RootState } from '../store';
 
 // TODO: make configurable so can be https://agave.designsafe-ci.org/geo-staging/v2 or https://agave.designsafe-ci.org/geo/v2
+// See https://tacc-main.atlassian.net/browse/WG-196
 const BASE_URL = 'https://agave.designsafe-ci.org/geo/v2';
 
 export const geoapi = createApi({

From 00111017bd96648143001f85025f091c72e5da6e Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Fri, 15 Dec 2023 11:07:41 -0600
Subject: [PATCH 13/13] Fix prettier issue

---
 react/src/redux/api/geoapi.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/react/src/redux/api/geoapi.ts b/react/src/redux/api/geoapi.ts
index 77faa12c..fa3fa531 100644
--- a/react/src/redux/api/geoapi.ts
+++ b/react/src/redux/api/geoapi.ts
@@ -19,7 +19,6 @@ export const geoapi = createApi({
 
       headers.set('Content-Type', 'application/json;charset=UTF-8');
 
-
       // TODO below adding of JWT if localhost and then add JWT
       // we put the JWT on the request to our geoapi API because it is not behind ws02 if in local dev
       // and if user is logged in