mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
fix(FE): revert auth component
This commit is contained in:
randy-ar
@@ -1,197 +1,87 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { ReactNode, useEffect } from 'react';
|
import { ReactNode, useEffect } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import useSWR from 'swr';
|
||||||
import useSWRImmutable from 'swr/immutable';
|
|
||||||
|
|
||||||
import { useAuth } from '@/services/hooks/useAuth';
|
import { useAuth } from '@/services/hooks/useAuth';
|
||||||
import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
|
import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
|
||||||
import { isResponseSuccess } from '@/lib/api-helper';
|
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||||
import { GetMeResponse } from '@/types/api/api-general';
|
import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
|
||||||
|
import { AxiosError } from 'axios';
|
||||||
// TODO: delete this later, DONT HARDCODE USER DATA
|
import { redirectToSSO } from '@/lib/auth-helper';
|
||||||
const DUMMY_USER = {
|
|
||||||
id: 1,
|
|
||||||
email: 'admin@mbugroup.id',
|
|
||||||
npk: '0001',
|
|
||||||
name: 'Super Admin',
|
|
||||||
image: null,
|
|
||||||
created_at: '2025-09-30T03:24:20.899229Z',
|
|
||||||
updated_at: '2025-09-30T03:24:20.899229Z',
|
|
||||||
roles: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
key: 'mbu.super_admin',
|
|
||||||
name: 'MBU Administrator',
|
|
||||||
client: {
|
|
||||||
id: 1,
|
|
||||||
name: 'PT Mitra Berlian Unggas',
|
|
||||||
alias: 'MBU',
|
|
||||||
},
|
|
||||||
permissions: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'mbu:purchase:read',
|
|
||||||
action: 'read',
|
|
||||||
client: {
|
|
||||||
id: 1,
|
|
||||||
name: 'PT Mitra Berlian Unggas',
|
|
||||||
alias: 'MBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'mbu:purchase:create',
|
|
||||||
action: 'create',
|
|
||||||
client: {
|
|
||||||
id: 1,
|
|
||||||
name: 'PT Mitra Berlian Unggas',
|
|
||||||
alias: 'MBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'mbu:purchase:approve',
|
|
||||||
action: 'approve',
|
|
||||||
client: {
|
|
||||||
id: 1,
|
|
||||||
name: 'PT Mitra Berlian Unggas',
|
|
||||||
alias: 'MBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
key: 'lti.super_admin',
|
|
||||||
name: 'LTI Administrator',
|
|
||||||
client: {
|
|
||||||
id: 2,
|
|
||||||
name: 'PT Lumbung Telur Indonesia',
|
|
||||||
alias: 'LTI',
|
|
||||||
},
|
|
||||||
permissions: [
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'lti:purchase:read',
|
|
||||||
action: 'read',
|
|
||||||
client: {
|
|
||||||
id: 2,
|
|
||||||
name: 'PT Lumbung Telur Indonesia',
|
|
||||||
alias: 'LTI',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: 'lti:purchase:create',
|
|
||||||
action: 'create',
|
|
||||||
client: {
|
|
||||||
id: 2,
|
|
||||||
name: 'PT Lumbung Telur Indonesia',
|
|
||||||
alias: 'LTI',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'lti:purchase:approve',
|
|
||||||
action: 'approve',
|
|
||||||
client: {
|
|
||||||
id: 2,
|
|
||||||
name: 'PT Lumbung Telur Indonesia',
|
|
||||||
alias: 'LTI',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
key: 'manbu.super_admin',
|
|
||||||
name: 'MANBU Administrator',
|
|
||||||
client: {
|
|
||||||
id: 3,
|
|
||||||
name: 'PT Mandiri Berlian Unggas',
|
|
||||||
alias: 'MANBU',
|
|
||||||
},
|
|
||||||
permissions: [
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'manbu:purchase:read',
|
|
||||||
action: 'read',
|
|
||||||
client: {
|
|
||||||
id: 3,
|
|
||||||
name: 'PT Mandiri Berlian Unggas',
|
|
||||||
alias: 'MANBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
name: 'manbu:purchase:create',
|
|
||||||
action: 'create',
|
|
||||||
client: {
|
|
||||||
id: 3,
|
|
||||||
name: 'PT Mandiri Berlian Unggas',
|
|
||||||
alias: 'MANBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
name: 'manbu:purchase:approve',
|
|
||||||
action: 'approve',
|
|
||||||
client: {
|
|
||||||
id: 3,
|
|
||||||
name: 'PT Mandiri Berlian Unggas',
|
|
||||||
alias: 'MANBU',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
interface RequireAuthProps {
|
interface RequireAuthProps {
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const RequireAuth = ({ children }: RequireAuthProps) => {
|
const RequireAuth = ({ children }: RequireAuthProps) => {
|
||||||
const router = useRouter();
|
const { user, setUser, setIsLoadingUser } = useAuth();
|
||||||
const { setUser, setIsLoadingUser } = useAuth();
|
|
||||||
|
|
||||||
const { data: userResponse, isLoading: isLoadingUserResponse } =
|
const {
|
||||||
useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
|
data: userResponse,
|
||||||
'/auth/sso/userinfo',
|
isLoading: isLoadingUserResponse,
|
||||||
httpClientFetcher,
|
error: userErrorResponse,
|
||||||
{
|
} = useSWR<
|
||||||
shouldRetryOnError: false,
|
GetMeResponse & { ok?: boolean },
|
||||||
revalidateOnFocus: false,
|
AxiosError<BaseApiResponse>,
|
||||||
revalidateOnReconnect: false,
|
SWRHttpKey
|
||||||
refreshInterval: 0,
|
>('/sso/userinfo', httpClientFetcher, {
|
||||||
}
|
shouldRetryOnError: false,
|
||||||
);
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setIsLoadingUser(isLoadingUserResponse);
|
|
||||||
}, [isLoadingUserResponse, setIsLoadingUser]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isResponseSuccess(userResponse)) {
|
if (isResponseSuccess(userResponse)) {
|
||||||
setUser(userResponse.data);
|
setUser(userResponse.data);
|
||||||
} else {
|
|
||||||
// router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
|
||||||
// TODO: remove this later, DONT HARDCODE USER DATA
|
|
||||||
setUser(DUMMY_USER);
|
|
||||||
}
|
}
|
||||||
}, [userResponse, setIsLoadingUser, setUser]);
|
}, [userResponse, setUser]);
|
||||||
|
|
||||||
// TODO: uncomment this later
|
// Explicitly handle 401 redirect from the component level
|
||||||
// if (isLoadingUserResponse && !userResponse) {
|
useEffect(() => {
|
||||||
// return (
|
if (
|
||||||
// <div className='w-full flex flex-row justify-center items-center p-4'>
|
isResponseError(userResponse) &&
|
||||||
// <span className='loading loading-spinner loading-xl' />
|
userErrorResponse?.response?.status === 401
|
||||||
// </div>
|
) {
|
||||||
// );
|
// Clear cache to prevent stale data from rendering children
|
||||||
// }
|
// mutate('/sso/userinfo', undefined, { revalidate: false }); // Optional: if using global mutate
|
||||||
|
setUser(undefined);
|
||||||
|
redirectToSSO();
|
||||||
|
}
|
||||||
|
}, [userErrorResponse, setUser, userResponse]);
|
||||||
|
|
||||||
return <>{children}</>;
|
useEffect(() => {
|
||||||
|
setIsLoadingUser(isLoadingUserResponse);
|
||||||
|
}, [isLoadingUserResponse]);
|
||||||
|
|
||||||
|
if (
|
||||||
|
(isLoadingUserResponse && !userResponse && !userErrorResponse) ||
|
||||||
|
(!userResponse && !userErrorResponse)
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userErrorResponse) {
|
||||||
|
return (
|
||||||
|
<div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
|
||||||
|
<h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
Please try refreshing the page or contact support if the problem
|
||||||
|
persists.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className='btn btn-primary'
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{isResponseSuccess(userResponse) && user && children}</>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RequireAuth;
|
export default RequireAuth;
|
||||||
|
|||||||
Reference in New Issue
Block a user