legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor admin authentication to staff authentication with updated cookie handling

Browse Source
This commit is contained in:
Ardeman 2025-03-03 16:47:59 +08:00
parent 4f4e94389e
commit 459e25c010
11 changed files with 120 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/apis/admin/login-staff.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod'
import { type TLoginSchema } from '~/layouts/news/form-login'
import { HttpServer } from '~/libs/http-server'
import type { TLoginSchema } from '~/pages/admin-login'
const loginResponseSchema = z.object({
data: z.object({

4
app/configs/cookies.ts
View File

@ -2,6 +2,6 @@ export const USER_COOKIES = {
token: '__lg-usr-tkn',
}
export const ADMIN_COOKIES = {
token: '__lg-adm-tkn',
export const STAFF_COOKIES = {
token: '__lg-stf-tkn',
}

4
app/libs/cookie.server.ts
View File

@ -1,6 +1,6 @@
import { createCookie } from 'react-router'
import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
import { STAFF_COOKIES, USER_COOKIES } from '~/configs/cookies'
export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
httpOnly: false,
@ -10,7 +10,7 @@ export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
path: '/',
})
export const adminTokenCookieConfig = createCookie(ADMIN_COOKIES.token, {
export const staffTokenCookieConfig = createCookie(STAFF_COOKIES.token, {
httpOnly: false,
sameSite: 'lax',
secure: process.env.NODE_ENV === 'production',

6
app/libs/cookies.ts
View File

@ -1,16 +1,16 @@
import { adminTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
import { staffTokenCookieConfig, 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(
const staffToken = (await staffTokenCookieConfig.parse(
headers.get('Cookie'),
)) as string
return {
userToken,
adminToken,
staffToken,
}
}

6
app/libs/logout-header.server.ts
View File

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

135
app/pages/admin-login/index.tsx
View File

@ -1,12 +1,43 @@
import { useState } from 'react'
import { Link } from 'react-router'
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react'
import { Link, useFetcher } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'
import { EyeIcon } from '~/components/icons/eye'
import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { APP } from '~/configs/meta'
export const loginSchema = z.object({
email: z.string().email('Email tidak valid'),
password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
})
export type TLoginSchema = z.infer<typeof loginSchema>
export const AdminLoginPage = () => {
const [showPassword, setShowPassword] = useState(false)
const fetcher = useFetcher()
const formMethods = useRemixForm<TLoginSchema>({
mode: 'onSubmit',
fetcher,
resolver: zodResolver(loginSchema),
})
const [error, setError] = useState<string>()
const [disabled, setDisabled] = useState(false)
const { handleSubmit } = formMethods
useEffect(() => {
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
setDisabled(false)
return
}
setDisabled(true)
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher])
return (
<div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
@ -24,70 +55,52 @@ export const AdminLoginPage = () => {
Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
</p>
<div>
<form>
{/* Input Email / No Telepon */}
<div className="mb-4">
<label
htmlFor="email"
className="mb-1 block text-gray-700"
>
Email/No. Telepon
</label>
<input
type="text"
<RemixFormProvider {...formMethods}>
<fetcher.Form
method="post"
onSubmit={handleSubmit}
className="space-y-4"
action="/actions/admin/login"
>
<Input
id="email"
label="Email"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
name="email"
/>
</div>
{/* Input Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
<Input
id="password"
label="Kata Sandi"
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
name="password"
type="password"
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeIcon
width={15}
height={15}
/>
) : (
<EyeIcon
width={15}
height={15}
/>
)}
</button>
</div>
{/* Lupa Kata Sandi */}
<div className="mb-4 flex justify-between">
<span className="text-gray-600">Lupa Kata Sandi?</span>
<Link
to="/lg-admin/auth/reset-password"
className="font-semibold text-[#2E2F7C]"
>
Reset Kata Sandi
</Link>
</div>
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
{/* Tombol Masuk */}
<Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Masuk
</Button>
</form>
{/* Lupa Kata Sandi */}
<div className="mb-4 flex justify-between">
<span className="text-gray-600">Lupa Kata Sandi?</span>
<Link
to="/lg-admin/auth/reset-password"
className="font-semibold text-[#2E2F7C]"
>
Reset Kata Sandi
</Link>
</div>
<Button
disabled={disabled}
type="submit"
className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
>
Masuk
</Button>
</fetcher.Form>
</RemixFormProvider>
</div>
</div>
{/* Link Daftar */}

8
app/routes/_admin.lg-admin.tsx
View File

@ -9,18 +9,18 @@ import { handleCookie } from '~/libs/cookies'
import type { Route } from './+types/_admin.lg-admin'
export const loader = async ({ request }: Route.LoaderArgs) => {
const { adminToken } = await handleCookie(request)
const { staffToken } = await handleCookie(request)
const { pathname } = new URL(request.url)
const isAuthPage = AUTH_PAGES.includes(pathname)
let adminData
if (!isAuthPage && !adminToken) {
if (!isAuthPage && !staffToken) {
throw redirect('/lg-admin/login')
}
if (adminToken) {
if (staffToken) {
const { data } = await getStaff({
accessToken: adminToken,
accessToken: staffToken,
})
adminData = data
}

16
app/routes/actions.admin.login.ts
View File

@ -3,10 +3,10 @@ import { data } from 'react-router'
import { getValidatedFormData } from 'remix-hook-form'
import { XiorError } from 'xior'
import { getUser } from '~/apis/news/get-user'
import { userLoginRequest } from '~/apis/news/login-user'
import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
import { generateTokenCookie } from '~/utils/token'
import { getStaff } from '~/apis/admin/get-staff'
import { staffLoginRequest } from '~/apis/admin/login-staff'
import { loginSchema, type TLoginSchema } from '~/pages/admin-login'
import { generateStaffTokenCookie } from '~/utils/token'
import type { Route } from './+types/actions.login'
@ -26,12 +26,12 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data({ success: false, errors, defaultValues }, { status: 400 })
}
const { data: loginData } = await userLoginRequest(payload)
const { data: loginData } = await staffLoginRequest(payload)
const { token } = loginData
const { data: userData } = await getUser({
const { data: staffData } = await getStaff({
accessToken: token,
})
const tokenCookie = generateTokenCookie({
const tokenCookie = generateStaffTokenCookie({
token,
})
@ -41,7 +41,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
return data(
{
success: true,
user: userData,
staff: staffData,
},
{
headers,

4
app/routes/actions.login.ts
View File

@ -6,7 +6,7 @@ import { XiorError } from 'xior'
import { getUser } from '~/apis/news/get-user'
import { userLoginRequest } from '~/apis/news/login-user'
import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
import { generateTokenCookie } from '~/utils/token'
import { generateUserTokenCookie } from '~/utils/token'
import type { Route } from './+types/actions.login'
@ -31,7 +31,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
const { data: userData } = await getUser({
accessToken: token,
})
const tokenCookie = generateTokenCookie({
const tokenCookie = generateUserTokenCookie({
token,
})

4
app/routes/actions.register.ts
View File

@ -9,7 +9,7 @@ import {
registerSchema,
type TRegisterSchema,
} from '~/layouts/news/form-register'
import { generateTokenCookie } from '~/utils/token'
import { generateUserTokenCookie } from '~/utils/token'
import type { Route } from './+types/actions.register'
@ -34,7 +34,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
const { data: userData } = await getUser({
accessToken: token,
})
const tokenCookie = generateTokenCookie({
const tokenCookie = generateUserTokenCookie({
token,
})

21
app/utils/token.ts
View File

@ -1,12 +1,15 @@
import { decodeJwt } from 'jose'
import { userTokenCookieConfig } from '~/libs/cookie.server'
import {
staffTokenCookieConfig,
userTokenCookieConfig,
} from '~/libs/cookie.server'
type TTokenCookie = {
token: string
}
export const generateTokenCookie = (parameters: TTokenCookie) => {
export const generateUserTokenCookie = (parameters: TTokenCookie) => {
const { token } = parameters
const decodedToken = decodeJwt(token)
@ -19,3 +22,17 @@ export const generateTokenCookie = (parameters: TTokenCookie) => {
expires: expirationDate,
})
}
export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
const { token } = parameters
const decodedToken = decodeJwt(token)
const decodedTokenExp = decodedToken.exp
const expirationDate = decodedTokenExp
? new Date(decodedTokenExp * 1000)
: undefined
return staffTokenCookieConfig.serialize(token, {
expires: expirationDate,
})
}