add auth to FE

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) => {