feat: add environment configuration and implement cookie handling for user authentication

app/routes/_layout.news.tsx

@@ -2,6 +2,17 @@ import { Outlet } from 'react-router'
 
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/_layout.news'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { userToken } = await handleCookie(request)
+
+  return {
+    userToken,
+  }
+}
 
 const NewsLayout = () => {
   return (

app/routes/actions.news.login.ts

@@ -0,0 +1,60 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { newsLoginRequest } from '~/apis/news/login'
+import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
+import { generateTokenCookie } from '~/utils/token'
+
+import type { Route } from './+types/actions.news.login'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TLoginSchema>(
+      request,
+      zodResolver(loginSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: loginData } = await newsLoginRequest(payload)
+    const { token } = loginData
+    const tokenCookie = generateTokenCookie({
+      token,
+    })
+
+    const headers = new Headers()
+    headers.append('Set-Cookie', await tokenCookie)
+
+    return data(
+      {
+        success: true,
+        accessToken: token,
+      },
+      {
+        headers,
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data({
+        success: false,
+        message: error?.response?.data?.error?.message,
+      })
+    }
+    return data({
+      success: false,
+      message: 'Internal server error',
+    })
+  }
+}