feat(authz): setup authentication such that we have a separate logged…

… out vs logged in logic (#14)

* fix(_nuxt): fix the _nuxt calls

* chore(refactor): migrate app logic to index.vue

* feat(secure): add a placeholder 'seure' page

* feat(auth): secure the 'secure' page

app/app.vue

@@ -1,29 +1,4 @@
 <template>
-  <UContainer>
-    <NuxtPwaAssets />
-    <UCard class="mt-10">
-      <UButton @click="login">Login with Google</UButton>
-    </UCard>
-  </UContainer>
+  <NuxtPwaAssets />
+  <NuxtPage />
 </template>
-
-<script setup lang="ts">
-import { useTokenClient, type AuthCodeFlowSuccessResponse, type AuthCodeFlowErrorResponse } from 'vue3-google-signin';
-
-const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
-  console.log('Access Token: ', response.access_token);
-  // Use the access token to interact with Google Calendar API
-};
-
-const handleOnError = (errorResponse: AuthCodeFlowErrorResponse) => {
-  console.log('Error: ', errorResponse);
-};
-
-const { login } = useTokenClient({
-  client_id: '753759858538-nufcl1qbhf9gpc7v9qs4seramd7ni2rm.apps.googleusercontent.com',
-  scope: 'profile email https://www.googleapis.com/auth/calendar',
-  prompt: 'consent',
-  onSuccess: handleOnSuccess,
-  onError: handleOnError,
-});
-</script>

app/middleware/auth.global.ts

@@ -0,0 +1,13 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    if (process.server) return;
+
+    const accessToken = process.client ? sessionStorage.getItem('googleAccessToken') : null;
+
+    if (!accessToken && to.path !== '/') {
+      return navigateTo('/');
+    }
+
+    if (accessToken && to.path === '/') {
+      return navigateTo('/secure');
+    }
+  });

app/nuxt.config.ts

@@ -36,10 +36,6 @@ export default defineNuxtConfig({
     workbox: {
       navigateFallback: '/'
     },
-    devOptions: {
-      enabled: true,
-      type: "module"
-    },
     client: {
       installPrompt: true
     }
@@ -49,7 +45,10 @@ export default defineNuxtConfig({
       hmr: {
         protocol: 'ws',
         host: 'localhost',
+        port: 3000,
+        clientPort: 3000
       }
     }
-  }
+  },
+  compatibilityDate: '2024-07-03',
 })

app/pages/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <UContainer>
+        <UCard class="mt-10">
+            <UButton @click="login">Login with Google</UButton>
+        </UCard>
+    </UContainer>
+</template>
+
+<script setup lang="ts">
+import { useTokenClient, type AuthCodeFlowSuccessResponse, type AuthCodeFlowErrorResponse } from 'vue3-google-signin';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
+    console.log('Access Token: ', response.access_token);
+    sessionStorage.setItem('googleAccessToken', response.access_token);
+    router.push('/secure');
+};
+
+const handleOnError = (errorResponse: AuthCodeFlowErrorResponse) => {
+    console.log('Error: ', errorResponse);
+};
+
+const { login } = useTokenClient({
+    client_id: '753759858538-nufcl1qbhf9gpc7v9qs4seramd7ni2rm.apps.googleusercontent.com',
+    scope: 'profile email https://www.googleapis.com/auth/calendar',
+    prompt: 'consent',
+    onSuccess: handleOnSuccess,
+    onError: handleOnError,
+});
+
+</script>

app/pages/secure.vue

@@ -0,0 +1,8 @@
+<template>
+    <UContainer>
+        <UCard class="mt-10">
+            <h1>Secure Page</h1>
+            <p>All your base belong to us.</p>
+        </UCard>
+    </UContainer>
+</template>

docker-compose.yml

@@ -11,7 +11,8 @@ services:
     ports:
       - "3000:3000"
     environment:
-      - NODE_ENV=development
+      NODE_ENV: development
+      NUXI_DISABLE_VITE_HMR: true
     command: npm run dev
   ngrok:
     image: ngrok/ngrok