feat: authentication with OAuth

app/components/AppUser.vue

@@ -1,5 +1,7 @@
 <template>
-  <UUser name="name" description="email" />
+  <UUser v-if="user" :name="user.name" :description="user.email" :avatar="{ src: user.avatar }" />
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const { user } = useAuth();
+</script>

app/components/auth/OAuthProvider.vue

@@ -0,0 +1,17 @@
+<template>
+  <UButton
+    color="neutral"
+    size="xl"
+    class="flex cursor-pointer items-center justify-center gap-3 overflow-hidden"
+    @click="login(provider.name)"
+  >
+    Continue with {{ provider.displayName }}
+  </UButton>
+</template>
+
+<script lang="ts" setup>
+import type { AuthProviderInfo } from 'pocketbase';
+
+const { login } = useAuth();
+const { provider } = defineProps<{ provider: AuthProviderInfo }>();
+</script>

app/components/ui/logout.vue

@@ -1,3 +1,18 @@
 <template>
-  <UButton color="neutral" variant="ghost" icon="i-lucide-log-out" size="xl"> Log Out </UButton>
+  <UButton color="neutral" variant="ghost" icon="i-lucide-log-out" size="xl" @click="onLogout"> Log Out </UButton>
 </template>
+
+<script setup lang="ts">
+const { logout } = useAuth();
+const toast = useToast();
+
+const onLogout = () => {
+  logout();
+  navigateTo('/');
+  toast.add({
+    title: 'Successfully logged out!',
+    description: 'You successfully logged out of your account and have been taken back to the website’s welcome page.',
+    color: 'success',
+  });
+};
+</script>