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

app/libs/cookie.server.ts

@@ -1,13 +1,19 @@
 import { createCookie } from 'react-router'
 
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/storages'
+import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
-export const userTokenCookie = createCookie(USER_COOKIES.token, {
+export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
+  httpOnly: false,
+  sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
+  secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
   path: '/news',
 })
 
-export const adminTokenCookie = createCookie(ADMIN_COOKIES.token, {
+export const adminTokenCookieConfig = createCookie(ADMIN_COOKIES.token, {
+  httpOnly: false,
+  sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
+  secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
   path: '/admin',
 })

app/libs/cookies.ts

@@ -0,0 +1,16 @@
+import { adminTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
+
+export const handleCookie = async (request: Request) => {
+  const headers = request.headers
+  const userToken = (await userTokenCookieConfig.parse(
+    headers.get('Cookie'),
+  )) as string
+  const adminToken = (await adminTokenCookieConfig.parse(
+    headers.get('Cookie'),
+  )) as string
+
+  return {
+    userToken,
+    adminToken,
+  }
+}

app/libs/http-client.ts

@@ -1,7 +1,10 @@
 import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
-const HttpClient = (token?: string) => {
+
+type THttpClient = { token?: string }
+const HttpClient = (parameters?: THttpClient) => {
+  const { token } = parameters || {}
   const instance = xior.create({
     baseURL,
   })

app/libs/logout-header.server.ts

@@ -1,10 +1,20 @@
-import { USER_COOKIES } from '~/configs/storages'
+import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
 export const setUserLogoutHeaders = () => {
   const responseHeaders = new Headers()
   responseHeaders.append(
     'Set-Cookie',
-    `${USER_COOKIES.token}=; Path=/news; Max-Age=0`,
+    `${USER_COOKIES.token}=; Path=/news; HttpOnly; SameSite=Strict; Max-Age=0`,
+  )
+
+  return responseHeaders
+}
+
+export const setAdminLogoutHeaders = () => {
+  const responseHeaders = new Headers()
+  responseHeaders.append(
+    'Set-Cookie',
+    `${ADMIN_COOKIES.token}=; Path=/admin; HttpOnly; SameSite=Strict; Max-Age=0`,
   )
 
   return responseHeaders