added sign in/out on profile page

composables/user.ts

@@ -0,0 +1,12 @@
+import { AuthError } from '@supabase/gotrue-js';
+
+export const userSignOut = async (): Promise<AuthError | void> => {
+	const router = useRouter();
+	const supabase = useSupabaseAuthClient();
+
+	const { error } = await supabase.auth.signOut();
+
+	if (error) return error;
+
+	router.push('/');
+};

middleware/auth.ts

@@ -1,10 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
 	const user = useSupabaseUser();
 
-	if (
-		!user.value &&
-		(to.path.startsWith('/notes') || to.path.startsWith('/profile'))
-	) {
+	if (!user.value && to.path.startsWith('/notes')) {
 		return navigateTo('/login');
 	} else if (user.value && to.path === '/login') {
 		return navigateTo('/notes');

pages/notes/index.vue

@@ -2,8 +2,8 @@
 	<App>
 		<Header />
 
-		<button @click="signout">Sign Out</button>
-		<button @click="create">
+		<button @click="userSignOut()">Sign Out</button>
+		<button @click="create()">
 			<Icon
 				v-if="isCreating"
 				name="loading" />
@@ -51,14 +51,6 @@
 		});
 	};
 
-	const signout = async () => {
-		const { error } = await supabase.auth.signOut();
-
-		if (error) return error;
-
-		router.push('/');
-	};
-
 	onMounted(() => {
 		refresh();
 	});

pages/profile/index.vue

@@ -10,6 +10,23 @@
 				:title="data.title"
 				:description="data.description"
 				:data="data.data" />
+
+			<div class="flex gap-4">
+				<button
+					v-if="user"
+					@click="userSignOut()"
+					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-red-500 hover:text-black">
+					<Icon name="fa6-solid:arrow-right-from-bracket" />
+					Sign Out
+				</button>
+				<button
+					v-else
+					@click="router.push('/login')"
+					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-blue-500 hover:text-black">
+					<Icon name="fa6-solid:arrow-right-to-bracket" />
+					Log In
+				</button>
+			</div>
 		</div>
 	</App>
 </template>
@@ -29,6 +46,7 @@
 		};
 	}
 
+	const router = useRouter();
 	const user = useSupabaseUser();
 	const isLoading = ref<boolean>(true);