MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(backoffice): authentication middleware, error pages, and 404 page

Browse Source
This commit is contained in:
Hafid Nur
2025-12-09 18:35:25 +07:00
parent 53c45da00a
commit b74ea9307e
10 changed files with 224 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Backoffice</title> <title>Backoffice</title>
apps/backoffice/src/app/(protected)/layout.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const AppLayout: FC = (): ReactElement => {
{/* Mobile menu button (shown on small screens) */} {/* Mobile menu button (shown on small screens) */}
<button <button
type="button" type="button"
className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700" className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700 cursor-pointer"
onClick={() => setMobileSidebarOpen(true)} onClick={() => setMobileSidebarOpen(true)}
aria-label="Open sidebar" aria-label="Open sidebar"
> >
apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts
+21 -4
View File
@@ -2,22 +2,39 @@ import { useForm } from 'react-hook-form';
import { import {
authLoginSchema, authLoginSchema,
TLoginRequest, TLoginRequest,
useBackofficeLogin,
} from '@imphnen-frontend-service/service'; } from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { useSession } from '@imphnen-frontend-service/utils'; import { useNavigate } from 'react-router';
import { toast } from 'sonner';
export const useLogin = () => { export const useLogin = () => {
const navigate = useNavigate();
const loginMutation = useBackofficeLogin();
const form = useForm<TLoginRequest>({ const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema), resolver: zodResolver(authLoginSchema),
mode: 'all', mode: 'all',
defaultValues: {
email: '',
password: '',
},
}); });
const { signIn } = useSession(); const onSubmit = form.handleSubmit(async (data) => {
try {
const onSubmit = form.handleSubmit((data) => signIn(data)); await loginMutation.mutateAsync(data);
toast.success('Login berhasil!');
navigate('/hackathon-dashboard');
} catch (error) {
console.error('[Backoffice Login] Error:', error);
toast.error((error as Error).message || 'Login gagal');
}
});
return { return {
form, form,
onSubmit, onSubmit,
isLoading: loginMutation.isPending,
}; };
}; };
apps/backoffice/src/app/(public)/auth/login/page.tsx
+5 -3
View File
@@ -4,7 +4,7 @@ import { useLogin } from './_hooks/use-login';
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'; import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
const { form, onSubmit } = useLogin(); const { form, onSubmit, isLoading } = useLogin();
return ( return (
<div className="flex justify-center items-center min-h-screen"> <div className="flex justify-center items-center min-h-screen">
@@ -22,6 +22,7 @@ export const Components: FC = (): ReactElement => {
name="email" name="email"
size="lg" size="lg"
className="w-full" className="w-full"
disabled={isLoading}
/> />
<ControlledInputField <ControlledInputField
control={form.control} control={form.control}
@@ -31,10 +32,11 @@ export const Components: FC = (): ReactElement => {
name="password" name="password"
size="lg" size="lg"
className="w-full" className="w-full"
disabled={isLoading}
/> />
<Button <Button
disabled={ disabled={
form.formState.isSubmitting || isLoading ||
form.formState.isValidating || form.formState.isValidating ||
!form.formState.isValid !form.formState.isValid
} }
@@ -42,7 +44,7 @@ export const Components: FC = (): ReactElement => {
size="md" size="md"
className="w-full" className="w-full"
> >
Login {isLoading ? 'Loading...' : 'Login'}
</Button> </Button>
</form> </form>
</div> </div>
apps/backoffice/src/app/404.tsx
+23
View File
@@ -0,0 +1,23 @@
import { Link } from 'react-router-dom';
export default function NotFoundPage() {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
<div className="text-center">
<h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
<h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
Page Not Found
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-8">
The page you are looking for doesn't exist or has been moved.
</p>
<Link
to="/hackathon-dashboard"
className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
>
Go Back Home
</Link>
</div>
</div>
);
}
apps/backoffice/src/app/error.tsx
+29
View File
@@ -0,0 +1,29 @@
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
export default function ErrorPage() {
const error = useRouteError();
let errorMessage: string;
if (isRouteErrorResponse(error)) {
errorMessage = error.statusText;
} else if (error instanceof Error) {
errorMessage = error.message;
} else if (typeof error === 'string') {
errorMessage = error;
} else {
console.error(error);
errorMessage = 'Unknown error';
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
<p className="text-xl text-gray-700 mb-2">
Sorry, an unexpected error has occurred.
</p>
<p className="text-gray-500 italic">{errorMessage}</p>
</div>
</div>
);
}
apps/backoffice/src/middleware.ts
+3 -3
View File
@@ -84,11 +84,11 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
session?.role?.permissions?.map?.((perm) => perm?.name) ?? []; session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
if (mappingPublicRoutes.includes(pathname)) { if (mappingPublicRoutes.includes(pathname)) {
if (token) return redirect('/dashboard'); if (token) return redirect('/hackathon-dashboard');
return null; return null;
} }
// if (!session) return redirect('/auth/login'); if (!session) return redirect('/auth/login');
const matchedRoute = mappingRoutePermissions.find( const matchedRoute = mappingRoutePermissions.find(
(route) => route.path === pathname (route) => route.path === pathname
@@ -100,7 +100,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
matchedRoute.permissions.some((perm) => userPermissions.includes(perm)); matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
if (!hasPermission) { if (!hasPermission) {
return '/dashboard'; return '/hackathon-dashboard';
} }
} }
apps/backoffice/vite.config.ts
+1 -1
View File
@@ -8,7 +8,7 @@ export default defineConfig(() => ({
root: __dirname, root: __dirname,
cacheDir: '../../node_modules/.vite/apps/backoffice', cacheDir: '../../node_modules/.vite/apps/backoffice',
server: { server: {
port: 3000, port: 3003,
host: 'localhost', host: 'localhost',
}, },
preview: { preview: {
libs/service/src/api/backoffice.ts
+63
View File
@@ -0,0 +1,63 @@
import axios from 'axios';
import { useAuthStore } from '../hooks/auth';
// Backoffice Backend API Base URL
// In development, use proxy; in production, use full URL
const BACKOFFICE_API_URL = 'https://api.hackathon.imphnen.dev/api/v1';
// Create axios instance for backoffice backend
export const backofficeApi = axios.create({
baseURL: BACKOFFICE_API_URL,
headers: {
'Content-Type': 'application/json',
},
});
// Add auth token interceptor
backofficeApi.interceptors.request.use(
(config) => {
const { session } = useAuthStore.getState();
if (session?.token?.access_token) {
config.headers.Authorization = `Bearer ${session.token.access_token}`;
}
return config;
},
(error) => {
return Promise.reject(new Error(error.message || 'Request failed'));
}
);
// Error handling interceptor
backofficeApi.interceptors.response.use(
(response) => response,
(error) => {
// Handle 401 - clear session and redirect to login
if (error.response?.status === 401) {
const isAuthPage =
globalThis.window !== undefined &&
globalThis.location.pathname.startsWith('/auth');
if (!isAuthPage) {
useAuthStore.getState().clearSession();
if (globalThis.window !== undefined) {
globalThis.location.href = '/auth/login';
}
}
}
// If backend sends a message, use it
const backendMsg = error?.response?.data?.message;
if (backendMsg && typeof backendMsg === 'string') {
return Promise.reject(new Error(backendMsg));
}
// Fallback error message
return Promise.reject(new Error(error.message || 'An error occurred'));
}
);
// Response type
export interface BackofficeApiResponse<T> {
data: T;
message: string;
}
libs/service/src/hooks/auth/index.ts
+77 -34
View File
@@ -1,5 +1,6 @@
import { useMutation, useQuery } from '@tanstack/react-query'; import { useMutation, useQuery } from '@tanstack/react-query';
import { hackathonApi, HackathonApiResponse } from '../../api/hackathon'; import { hackathonApi, HackathonApiResponse } from '../../api/hackathon';
import { backofficeApi, BackofficeApiResponse } from '../../api/backoffice';
import { useAuthStore } from './use-auth-store'; import { useAuthStore } from './use-auth-store';
export * from './use-auth-store'; export * from './use-auth-store';
@@ -77,10 +78,9 @@ export const useLogin = () => {
return useMutation({ return useMutation({
mutationFn: async (data: LoginRequest) => { mutationFn: async (data: LoginRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<AuthResponse>>( const response = await hackathonApi.post<
'/auth/login', HackathonApiResponse<AuthResponse>
data >('/auth/login', data);
);
return response.data.data; return response.data.data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
@@ -115,10 +115,9 @@ export const useLogin = () => {
export const useSignup = () => { export const useSignup = () => {
return useMutation({ return useMutation({
mutationFn: async (data: SignupRequest) => { mutationFn: async (data: SignupRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<MessageResponse>>( const response = await hackathonApi.post<
'/auth/signup', HackathonApiResponse<MessageResponse>
data >('/auth/signup', data);
);
return response.data.data; return response.data.data;
}, },
}); });
@@ -130,10 +129,9 @@ export const useGitHubCallback = () => {
return useMutation({ return useMutation({
mutationFn: async (data: GitHubAuthRequest) => { mutationFn: async (data: GitHubAuthRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<AuthResponse>>( const response = await hackathonApi.post<
'/auth/github', HackathonApiResponse<AuthResponse>
data >('/auth/github', data);
);
return response.data.data; return response.data.data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
@@ -171,9 +169,9 @@ export const useSession = () => {
return useQuery({ return useQuery({
queryKey: ['auth-session'], queryKey: ['auth-session'],
queryFn: async () => { queryFn: async () => {
const response = await hackathonApi.get<HackathonApiResponse<SessionResponse>>( const response = await hackathonApi.get<
'/auth/session' HackathonApiResponse<SessionResponse>
); >('/auth/session');
return response.data.data; return response.data.data;
}, },
enabled: !!session?.token, enabled: !!session?.token,
@@ -184,10 +182,9 @@ export const useSession = () => {
export const useForgotPassword = () => { export const useForgotPassword = () => {
return useMutation({ return useMutation({
mutationFn: async (data: ForgotPasswordRequest) => { mutationFn: async (data: ForgotPasswordRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<MessageResponse>>( const response = await hackathonApi.post<
'/auth/forgot-password', HackathonApiResponse<MessageResponse>
data >('/auth/forgot-password', data);
);
return response.data.data; return response.data.data;
}, },
}); });
@@ -197,10 +194,9 @@ export const useForgotPassword = () => {
export const useResetPassword = () => { export const useResetPassword = () => {
return useMutation({ return useMutation({
mutationFn: async (data: ResetPasswordRequest) => { mutationFn: async (data: ResetPasswordRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<MessageResponse>>( const response = await hackathonApi.post<
'/auth/reset-password', HackathonApiResponse<MessageResponse>
data >('/auth/reset-password', data);
);
return response.data.data; return response.data.data;
}, },
}); });
@@ -219,6 +215,45 @@ export const useSignOut = () => {
}); });
}; };
// Backoffice Login
export const useBackofficeLogin = () => {
const { setSession } = useAuthStore();
return useMutation({
mutationFn: async (data: LoginRequest) => {
const response = await backofficeApi.post<
BackofficeApiResponse<AuthResponse>
>('/auth/login', data);
return response.data.data;
},
onSuccess: (data) => {
setSession({
token: data.token,
user: {
id: data.user.id,
email: data.user.email,
fullname: data.user.fullname,
phone_number: data.user.phone_number || '',
avatar: data.user.avatar || '',
birthdate: data.user.birthdate || '',
gender: data.user.gender || '',
is_active: data.user.is_active,
location: data.user.location,
bio: data.user.bio,
skills: data.user.skills,
role: {
id: data.user.role_id || '',
name: 'admin',
permissions: [],
created_at: '',
updated_at: '',
},
},
});
},
});
};
// GitHub OAuth URL helper // GitHub OAuth URL helper
// The frontend needs to redirect to GitHub with the client_id // The frontend needs to redirect to GitHub with the client_id
// After GitHub redirects back with a code, use useGitHubCallback // After GitHub redirects back with a code, use useGitHubCallback
@@ -239,7 +274,9 @@ export const useGitHubAuth = () => {
// Get GitHub client ID from environment // Get GitHub client ID from environment
const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID || ''; const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID || '';
if (!clientId) { if (!clientId) {
throw new Error('GitHub Client ID not configured. Set VITE_GITHUB_CLIENT_ID environment variable.'); throw new Error(
'GitHub Client ID not configured. Set VITE_GITHUB_CLIENT_ID environment variable.'
);
} }
const redirectUri = `${globalThis.location.origin}/auth/callback`; const redirectUri = `${globalThis.location.origin}/auth/callback`;
@@ -270,8 +307,16 @@ export const useEmailAuth = () => {
}; };
}; };
const signUpWithEmail = async (email: string, password: string, fullname: string) => { const signUpWithEmail = async (
const result = await signupMutation.mutateAsync({ email, password, fullname }); email: string,
password: string,
fullname: string
) => {
const result = await signupMutation.mutateAsync({
email,
password,
fullname,
});
// Signup only returns a message (user needs to verify email first) // Signup only returns a message (user needs to verify email first)
return { return {
message: result.message, message: result.message,
@@ -295,10 +340,9 @@ export const useEmailAuth = () => {
export const usePostLogin = () => { export const usePostLogin = () => {
return useMutation({ return useMutation({
mutationFn: async (data: LoginRequest) => { mutationFn: async (data: LoginRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<AuthResponse>>( const response = await hackathonApi.post<
'/auth/login', HackathonApiResponse<AuthResponse>
data >('/auth/login', data);
);
return { data: response.data.data }; return { data: response.data.data };
}, },
}); });
@@ -308,10 +352,9 @@ export const usePostLogin = () => {
export const usePostRegister = () => { export const usePostRegister = () => {
return useMutation({ return useMutation({
mutationFn: async (data: SignupRequest) => { mutationFn: async (data: SignupRequest) => {
const response = await hackathonApi.post<HackathonApiResponse<AuthResponse>>( const response = await hackathonApi.post<
'/auth/signup', HackathonApiResponse<AuthResponse>
data >('/auth/signup', data);
);
return { data: response.data.data }; return { data: response.data.data };
}, },
}); });