add auth to FE

clustering/alpr_clusters.json

@@ -11,8 +11,8 @@
       "id": 26733510
     },
     {
-      "lat": 51.08322163048912,
-      "lon": 4.627487503225809,
+      "lat": 51.065780729949786,
+      "lon": 4.622501326432162,
       "id": 26748849
     },
     {
@@ -21,8 +21,8 @@
       "id": 30144501
     },
     {
-      "lat": 37.62023727372882,
-      "lon": -122.27441926610169,
+      "lat": 37.60721824279836,
+      "lon": -122.26864396995884,
       "id": 53092228
     },
     {
@@ -31,8 +31,8 @@
       "id": 61400195
     },
     {
-      "lat": 42.37454858869567,
-      "lon": -83.24217166695655,
+      "lat": 42.42113664344827,
+      "lon": -83.2928317634483,
       "id": 62506088
     },
     {
@@ -106,13 +106,13 @@
       "id": 550390297
     },
     {
-      "lat": 52.45130200428572,
-      "lon": 13.735323098571431,
+      "lat": 52.449732847058826,
+      "lon": 13.739574813235297,
       "id": 559557998
     },
     {
-      "lat": 55.614296776712365,
-      "lon": 10.688850217808223,
+      "lat": 55.614493846416416,
+      "lon": 10.690618903071675,
       "id": 583850576
     },
     {
@@ -141,8 +141,8 @@
       "id": 1775755949
     },
     {
-      "lat": 41.88834150470217,
-      "lon": -87.72282780846395,
+      "lat": 41.8914208317073,
+      "lon": -87.73014288109758,
       "id": 1931296905
     },
     {
@@ -421,13 +421,13 @@
       "id": 7176878182
     },
     {
-      "lat": 39.55348597249999,
-      "lon": -104.9862619675,
+      "lat": 39.592913385314695,
+      "lon": -104.97747546363635,
       "id": 7265081483
     },
     {
-      "lat": 34.20316414102563,
-      "lon": -118.39972552948718,
+      "lat": 34.2030858382716,
+      "lon": -118.42050504444445,
       "id": 7428089366
     },
     {
@@ -511,8 +511,8 @@
       "id": 8928447784
     },
     {
-      "lat": 48.85871435714286,
-      "lon": 2.3348782357142857,
+      "lat": 48.86883856666667,
+      "lon": 2.3503687799999997,
       "id": 8929093241
     },
     {
@@ -556,8 +556,8 @@
       "id": 9348368733
     },
     {
-      "lat": 37.475669269354825,
-      "lon": -77.93762352741935,
+      "lat": 37.464436174603165,
+      "lon": -77.91010907619047,
       "id": 9366175968
     },
     {
@@ -581,8 +581,8 @@
       "id": 9449104386
     },
     {
-      "lat": 34.149419359459465,
-      "lon": -84.54640596216218,
+      "lat": 34.19419499857141,
+      "lon": -84.33064789857144,
       "id": 9559274111
     },
     {
@@ -666,8 +666,8 @@
       "id": 10416000563
     },
     {
-      "lat": 40.04392185721926,
-      "lon": -89.27968517165775,
+      "lat": 40.08030451782179,
+      "lon": -89.26548603762376,
       "id": 10542792518
     },
     {
@@ -686,14 +686,14 @@
       "id": 10828130058
     },
     {
-      "lat": 38.02241224078946,
-      "lon": -84.49164363421052,
+      "lat": 38.0194466653846,
+      "lon": -84.49342238205128,
       "id": 10848073237
     },
     {
-      "lat": 36.050557318181816,
-      "lon": -96.00209221363637,
-      "id": 10911752786
+      "lat": 36.05198733333334,
+      "lon": -96.00141619166668,
+      "id": 10911523118
     },
     {
       "lat": 26.344694394444442,
@@ -736,8 +736,8 @@
       "id": 11054240119
     },
     {
-      "lat": 39.95067505,
-      "lon": -86.1269044,
+      "lat": 39.76426896666667,
+      "lon": -86.27484450000001,
       "id": 11128741981
     },
     {
@@ -801,8 +801,8 @@
       "id": 11575963642
     },
     {
-      "lat": 36.91654560909091,
-      "lon": -2.229015381818182,
+      "lat": 36.85887571111111,
+      "lon": -2.455433838888889,
       "id": 11578259953
     },
     {
@@ -891,8 +891,8 @@
       "id": 12184882598
     },
     {
-      "lat": 34.6514577867347,
-      "lon": -86.71853648979594,
+      "lat": 34.483422065517246,
+      "lon": -86.70428951551729,
       "id": 12187369976
     },
     {
@@ -916,8 +916,8 @@
       "id": 12291389477
     },
     {
-      "lat": 42.83078865,
-      "lon": -85.97422481249998,
+      "lat": 42.814452466666665,
+      "lon": -86.01891039166667,
       "id": 12294771482
     },
     {
@@ -931,8 +931,8 @@
       "id": 12331080088
     },
     {
-      "lat": 35.125829683333336,
-      "lon": -89.9384473,
+      "lat": 35.06831486666666,
+      "lon": -89.81088016666666,
       "id": 12331283276
     },
     {
@@ -946,8 +946,8 @@
       "id": 12332700153
     },
     {
-      "lat": 43.3229691,
-      "lon": -87.92466653333334,
+      "lat": 43.35350365,
+      "lon": -88.1313677,
       "id": 12333501372
     },
     {
@@ -955,11 +955,6 @@
       "lon": -121.30480374999999,
       "id": 12335897695
     },
-    {
-      "lat": 33.10479425,
-      "lon": -86.86867275,
-      "id": 12337417053
-    },
     {
       "lat": 36.13226263333333,
       "lon": -86.6644766,
@@ -1014,6 +1009,16 @@
       "lat": 46.205732899999994,
       "lon": -119.15410195714286,
       "id": 12342265697
+    },
+    {
+      "lat": 30.6184705,
+      "lon": -87.7594419,
+      "id": 12344502686
+    },
+    {
+      "lat": 37.081546599999996,
+      "lon": -88.63643554999999,
+      "id": 12344509182
     }
   ]
 }

webapp/src/App.vue

@@ -3,6 +3,12 @@ import { RouterView } from 'vue-router'
 import { ref, watch } from 'vue'
 import { useTheme } from 'vuetify';
 
+import { useAuth0 } from '@auth0/auth0-vue';
+const { isAuthenticated, user, isLoading, loginWithRedirect, logout } = useAuth0();
+const logoutParams = {
+  returnTo: window.location.origin
+};
+
 const theme = useTheme();
 
 function toggleTheme() {
@@ -37,6 +43,7 @@ watch(() => theme.global.name.value, (newTheme) => {
     root.style.setProperty('--df-text-color', 'black');
   }
 });
+
 </script>
 
 <template>
@@ -53,6 +60,21 @@ watch(() => theme.global.name.value, (newTheme) => {
 
       <v-spacer></v-spacer>
 
+      <v-btn variant="text" id="menu-activator">
+        <v-icon start>mdi-account</v-icon>{{ isAuthenticated ? user?.given_name : 'Log In' }}
+      </v-btn>
+
+      <v-menu activator="#menu-activator">
+        <v-list>
+          <v-list-item v-if="isAuthenticated" @click="logout({logoutParams})">
+            <v-list-item-title>Log Out</v-list-item-title>
+          </v-list-item>
+          <v-list-item v-else @click="loginWithRedirect">
+            <v-list-item-title>Log In</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
       <v-btn icon>
         <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
       </v-btn>

webapp/src/main.ts

@@ -15,8 +15,9 @@ const auth0 = createAuth0({
   domain: "deflock.us.auth0.com",
   clientId: "IEBa7ckgWrMGErTWXA8Z9q91hre7uII2",
   authorizationParams: {
-    redirect_uri: 'http://localhost:5173/upload'
-  }
+    redirect_uri: window.location.origin,
+  },
+  cacheLocation: 'localstorage',
 })
 
 

webapp/src/router/index.ts

@@ -1,17 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import { useAuth0 } from '@auth0/auth0-vue';
+
+
+const routeGuard = (to: any, from: any, next: any) => {
+  const { isAuthenticated, loginWithRedirect } = useAuth0();
+
+  // code and state present when redirected from Auth0
+  if (isAuthenticated.value || (to.query.code && to.query.state)) {
+    next();
+  } else {
+    loginWithRedirect({
+      appState: { targetUrl: to.fullPath }
+    });
+  }
+}
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  scrollBehavior(to, from, savedPosition) {
-    if (to.hash && !to.hash.startsWith('#map')) {
-      return {
-        el: to.hash,
-        behavior: 'smooth',
-      }
-    }
-    return { top: 0 }
-  },
   routes: [
     {
       path: '/',
@@ -21,9 +27,6 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     },
     {
@@ -59,12 +62,14 @@ const router = createRouter({
     {
       path: '/upload',
       name: 'upload',
-      component: () => import('../views/ReportPhoto.vue')
+      component: () => import('../views/ReportPhoto.vue'),
+      beforeEnter: routeGuard
     },
     {
       path: '/dashboard',
       name: 'review',
-      component: () => import('../views/Dashboard.vue')
+      component: () => import('../views/Dashboard.vue'),
+      beforeEnter: routeGuard
     }
   ]
 })

webapp/src/services/apiService.ts

@@ -1,4 +1,13 @@
 import axios from "axios";
+import { useAuth0 } from "@auth0/auth0-vue";
+
+async function getAuthHeaders() {
+  const { getAccessTokenSilently } = useAuth0();
+  const token = await getAccessTokenSilently();
+  return {
+    Authorization: `Bearer ${token}`,
+  };
+}
 
 export interface Cluster {
   id: string;
@@ -55,18 +64,21 @@ const apiService = axios.create({
 });
 
 export const getUserSubmissions = async () => {
-  const response = await apiService.get("/user-submissions");
+  const response = await apiService.get("/user-submissions", { headers: await getAuthHeaders() });
   return response.data;
 }
 
 export const getPresignedUrls = async (count: number, contentType: string, author: string) => {
-  const response = await apiService.get(`/presigned-urls?count=${encodeURIComponent(count)}&contentType=${encodeURIComponent(contentType)}&author=${encodeURIComponent(author)}`);
+  const response = await apiService.get(
+    `/presigned-urls?count=${encodeURIComponent(count)}&contentType=${encodeURIComponent(contentType)}&author=${encodeURIComponent(author)}`,
+    { headers: await getAuthHeaders() }
+  );
   return response.data;
 }
 
 export const deleteObject = async (objectKey: string) => {
   console.log("deleting object", objectKey);
-  await apiService.post(`/delete-object`, { objectKey });
+  await apiService.post(`/delete-object`, { objectKey }, { headers: await getAuthHeaders() });
 }
 
 export const getALPRs = async (boundingBox: BoundingBox) => {