From 1b5279b1cc024df26c3efd916a213d9b032c62dc Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 6 Feb 2023 06:17:33 +0800
Subject: [PATCH] added sign in/out on profile page

---
 composables/user.ts     | 12 ++++++++++++
 middleware/auth.ts      |  5 +----
 pages/notes/index.vue   | 12 ++----------
 pages/profile/index.vue | 18 ++++++++++++++++++
 4 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 composables/user.ts

diff --git a/composables/user.ts b/composables/user.ts
new file mode 100644
index 0000000..8059932
--- /dev/null
+++ b/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('/');
+};
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 5f4d65d..eccc268 100644
--- a/middleware/auth.ts
+++ b/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');
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 9c72c7c..37b0787 100644
--- a/pages/notes/index.vue
+++ b/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();
 	});
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index be902d5..cf1af0d 100644
--- a/pages/profile/index.vue
+++ b/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);