added sidebase/nuxt-auth

assets/tailwindcss.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
+@layer components {
+    .pre-auth {
+		@apply bg-gray-800 text-white p-3 my-3 rounded shadow overflow-x-auto;
+	}
+
+	.pre-auth span {
+		@apply text-green-400;
+	}
+}
 @tailwind utilities;

components/AuthenticationStatus.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+	const { status, data, signOut, signIn } = useSession();
+</script>
+
+<template>
+	<div class="w-full max-w-5xl mx-auto bg-white px-5 py-4 rounded-t shadow-xl">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center space-x-2">
+				<img
+					v-if="status === 'authenticated' && data?.user?.image"
+					class="w-12 h-12 rounded-full"
+					:src="data.user.image"
+					alt="User Avatar" />
+				<h1 v-if="status === 'authenticated'" class="text-lg">Authenticated as {{ data?.user?.name }}!</h1>
+				<h1 v-else>Not logged in</h1>
+			</div>
+			<button
+				v-if="status === 'authenticated'"
+				class="flex items-center justify-center space-x-2 bg-red-500 text-white rounded-lg py-2 px-3 text-lg"
+				@click="signOut({ callbackUrl: '/' })">
+				<span>Logout</span>
+			</button>
+			<button
+				v-else
+				class="flex items-center justify-center space-x-2 bg-green-500 text-white rounded-lg py-2 px-3 text-lg"
+				@click="signIn()">
+				<i class="fa fa-right-to-bracket pt-0.5" />
+				<span>Login</span>
+			</button>
+		</div>
+	</div>
+</template>

layouts/auth.vue

@@ -20,17 +20,15 @@
 					<div class="flex">
 						<!-- Logo -->
 						<div class="shrink-0 flex items-center">
-							<NuxtLink :href="route('dashboard')">
+							<NuxtLink href="/">
 								<ApplicationLogo
 									class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />
 							</NuxtLink>
 						</div>
 
 						<!-- Navigation Links -->
 						<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
-							<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
-								Dashboard
-							</NavLink>
+							<NavLink href="/"> Dashboard </NavLink>
 						</div>
 					</div>
 
@@ -102,9 +100,7 @@
 			<!-- Responsive Navigation Menu -->
 			<div :class="{ block: showingNavigationDropdown, hidden: !showingNavigationDropdown }" class="sm:hidden">
 				<div class="pt-2 pb-3 space-y-1">
-					<ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
-						Dashboard
-					</ResponsiveNavLink>
+					<ResponsiveNavLink href="/"> Dashboard </ResponsiveNavLink>
 				</div>
 
 				<!-- Responsive Settings Options -->

nuxt.config.ts

@@ -1,5 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	css: ['@/assets/tailwindcss.css'],
-	modules: ['@nuxtjs/tailwindcss']
+	modules: ['@nuxtjs/tailwindcss', '@sidebase/nuxt-auth'],
+	auth: {
+        origin: 'http://localhost:3000'
+    }
 });