Added auth to frontend

frontend/composables/axios.ts

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const request = axios.create({
+	baseURL: 'http://localhost:8000',
+	withCredentials: true,
+})
+
+export { request }

frontend/composables/post.ts

@@ -4,7 +4,7 @@ const PostValidator = z.object({
 	sequence: z.number(),
 	id: z.string(),
 	title: z.string(),
-	description: z.string().nullish(),
+	description: z.string(),
 	created_at: z.string(),
 	updated_at: z.string(),
 })

frontend/composables/user.ts

@@ -0,0 +1,41 @@
+import { z } from 'zod'
+
+const userSchema = z.object({
+	email: z.string().email(),
+	password: z.string().min(6),
+})
+
+const userLogin = async (email: String, password: String) => {
+	await getUser()
+	if (useUser().value) return
+
+	const user = userSchema.safeParse({ email, password })
+
+	if (!user.success) return user.error.format()
+
+	await request.get('/sanctum/csrf-cookie')
+	await request.post('/login', user.data)
+
+	await getUser()
+}
+
+const getUser = async () => {
+	await request
+		.get('/api/user')
+		.then(({ data }) => {
+			const parsed = loggedInUserSchema.safeParse(data)
+			if (!parsed.success) return
+			useUser().value = parsed.data.name
+		})
+		.catch((error) => {
+			console.log(error)
+		})
+}
+
+const loggedInUserSchema = z.object({
+	name: z.string(),
+})
+
+const useUser = () => useState<String>('user', () => '')
+
+export { userLogin, useUser, getUser }

frontend/middleware/auth.ts

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+	const user = useUser()
+	await getUser()
+
+	if (!user.value && to.path !== '/login' && to.path.startsWith('/')) {
+		return navigateTo('/login')
+	}
+
+	if (user.value && to.path === '/login') {
+		return navigateTo('/')
+	}
+})

frontend/pages/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+	middleware: ['auth'],
+})
+
 import { z } from 'zod'
 type Posts = z.infer<typeof PostsValidator>
 
@@ -6,36 +10,45 @@ const posts = ref<Posts>([])
 const lastPost = ref<Number>(0)
 
 const responseValidator = z.object({
-  status: z.number(),
+	status: z.number(),
-  data: z.unknown().array(),
+	data: z.unknown().array(),
 })
 
 const getPosts = async () => {
-  const data = await $fetch('http://dev.local:8000/api/posts', {
+	const data = await request.get('http://localhost:8000/api/posts', {
-    method: 'GET',
+		params: { lastPost: lastPost.value },
-    params: { lastPost: lastPost.value },
+	})
-  })
+
+	console.log(data)
+
+	const response = responseValidator.safeParse(data.data)
+	// console.log(parsePosts(response.data))
 
-  const response = responseValidator.parse(data)
+	if (!response.success) return
 
-  posts.value = [...posts.value, ...parsePosts(response.data)]
+	posts.value = [...posts.value, ...parsePosts(response.data.data)]
-  lastPost.value = posts.value[posts.value.length - 1].sequence
+	lastPost.value = posts.value[posts.value.length - 1].sequence
 }
 
 onMounted(() => {
-  getPosts()
+	getPosts()
 })
 </script>
 
 <template>
-  <div>
+	<div>
-    <div class="flex w-full items-center justify-center">
+		<!-- {{ posts }} -->
-      <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
+		<div class="flex w-full items-center justify-center">
-        <div v-if="posts" v-for="post in posts">
+			<div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
-          <PostCard :title="post.title" :description="post.description" />
+				<div
-        </div>
+					v-if="posts"
-        <button @click="getPosts()">More {{ lastPost }}</button>
+					v-for="post in posts">
-      </div>
+					<PostCard
-    </div>
+						:title="post.title"
-  </div>
+						:description="post.description" />
+				</div>
+				<button @click="getPosts()">More {{ lastPost }}</button>
+			</div>
+		</div>
+	</div>
 </template>

frontend/pages/login/index.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+definePageMeta({
+	middleware: ['auth'],
+})
+
+const user = useUser()
+
+const userCredential = reactive({
+	email: '',
+	password: '',
+})
+
+const isSigningIn = ref<Boolean>(false)
+
+const errors = reactive({
+	email: '',
+	password: '',
+	user: '',
+})
+
+const login = async () => {
+	isSigningIn.value = true
+	const error = await userLogin(userCredential.email, userCredential.password)
+
+	if (error) {
+		errors.email = error.email ? error.email._errors.join(',') : ''
+		errors.password = error.password ? error.password._errors.join(',') : ''
+		// errors.user = error.user ? error.user._errors.join(',') : ''
+	}
+
+	setTimeout(() => (isSigningIn.value = false), 500)
+}
+
+const logoutAxios = async () => {
+	await request.post('/logout')
+	user.value = ''
+}
+
+watch(
+	() => user.value,
+	() => {
+		if (user.value) useRouter().push('/')
+	}
+)
+</script>
+
+<template>
+	<div>
+		<div
+			class="absolute flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
+			<label class="mt-2 w-full"> Email </label>
+			<input
+				type="text"
+				v-model="userCredential.email"
+				class="w-full rounded-md border border-lightgray p-2" />
+			<span
+				v-if="errors.email"
+				class="w-full text-red-400">
+				{{ errors.email }}
+			</span>
+
+			<label class="mt-2 w-full"> Password </label>
+			<input
+				type="password"
+				v-model="userCredential.password"
+				class="w-full rounded-md border border-lightgray p-2" />
+			<span
+				v-if="errors.password"
+				class="w-full text-red-400">
+				{{ errors.password }}
+			</span>
+
+			<div
+				v-if="errors.user"
+				class="mt-4 text-red-400">
+				{{ errors.user }}
+			</div>
+
+			<button
+				@click="login()"
+				class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+				<Icon
+					v-if="isSigningIn"
+					name="loading" />
+				<div> Sign In </div>
+			</button>
+		</div>
+	</div>
+</template>