Only show nav/footer when user is authenticated

app/components/AppFooter.vue

@@ -1,9 +1,17 @@
 <!-- Smaller footer at the bottom of the screen -->
- <template>
-<v-footer app color="secondary" height="30">
-    <v-container class="text-caption text-center">
-        © {{ new Date().getFullYear() }} SharedLists - All Rights
-        Reserved
-    </v-container>
-</v-footer>
+<template>
+    <v-footer
+        app
+        color="secondary"
+        height="30"
+        v-if="status === 'authenticated'"
+    >
+        <v-container class="text-caption text-center">
+            © {{ new Date().getFullYear() }} SharedLists - All Rights Reserved
+        </v-container>
+    </v-footer>
 </template>
+
+<script setup>
+const { status } = useAuth();
+</script>

app/components/NavBar.vue

@@ -1,6 +1,10 @@
 <template>
-<!-- Toolbar at the top of the screen -->
-    <v-app-bar color="rgba(27, 94, 32, 0.8)" height="48">
+    <!-- Toolbar at the top of the screen -->
+    <v-app-bar
+        color="rgba(27, 94, 32, 0.8)"
+        height="48"
+        v-if="status === 'authenticated'"
+    >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
             <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
@@ -12,38 +16,50 @@
         <v-spacer />
 
         <!-- Menu icons on the right side of the toolbar -->
-        
-
     </v-app-bar>
 
-
-      <v-navigation-drawer
-        v-model="drawer"
-        temporary
-      >
+    <v-navigation-drawer v-model="drawer" temporary>
         <v-list-item
-          prepend-avatar="https://randomuser.me/api/portraits/men/78.jpg"
-          title="John Leider"
+            prepend-avatar="https://randomuser.me/api/portraits/men/78.jpg"
+            title="John Leider"
         ></v-list-item>
 
         <v-divider></v-divider>
 
         <v-list density="compact" nav>
-          <v-list-item prepend-icon="mdi-home" title="Home" value="home" @click="navigateTo('/')"></v-list-item>
-          <v-list-item prepend-icon="mdi-login" title="Login" value="login" @click="navigateTo('/login')"></v-list-item>
-          <v-list-item prepend-icon="mdi-account-plus-outline" title="Register" value="register" @click="navigateTo('/register')"></v-list-item>
-          <v-list-item prepend-icon="mdi-lock-reset" title="Forgot" value="forgot" @click="navigateTo('/forgot-password')"></v-list-item>
+            <v-list-item
+                prepend-icon="mdi-home"
+                title="Home"
+                value="home"
+                @click="navigateTo('/')"
+            ></v-list-item>
+            <v-list-item
+                prepend-icon="mdi-login"
+                title="Login"
+                value="login"
+                @click="navigateTo('/login')"
+            ></v-list-item>
+            <v-list-item
+                prepend-icon="mdi-account-plus-outline"
+                title="Register"
+                value="register"
+                @click="navigateTo('/register')"
+            ></v-list-item>
+            <v-list-item
+                prepend-icon="mdi-lock-reset"
+                title="Forgot"
+                value="forgot"
+                @click="navigateTo('/forgot-password')"
+            ></v-list-item>
         </v-list>
-      </v-navigation-drawer>
-
+    </v-navigation-drawer>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
+const { status } = useAuth();
 // Drawer state to open/close the navigation drawer
 const drawer = ref(false);
 </script>
 
-<style>
-
-</style>
+<style></style>

app/middleware/auth.global.js

@@ -6,10 +6,10 @@ export default defineNuxtRouteMiddleware(async (to, next) => {
   const auth = status.value === "authenticated" ? true : false;
   const isProtected = (await to.meta.auth) === true ? true : false;
   if (!auth && isProtected) {
-    console.log("User is not authenticated and page is protected");
-    return navigateTo("/login");
+    // User is not authenticated and page is protected
+    return abortNavigation();
   } else if (auth && !isProtected) {
-    console.log("User is authenticated and page is not protected");
-    return navigateTo("/");
+    // User is authenticated and page is not protected
+    return abortNavigation();
   }
 });