fix(fe): ⚡ update error handling

lehuygiang28 · Jun 14, 2024 · 15a17ec · 15a17ec
1 parent 2704fba
commit 15a17ec
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 41 deletions.
diff --git a/apps/fe/src/app/(auth)/layout.tsx b/apps/fe/src/app/(auth)/layout.tsx
@@ -1,22 +1,21 @@
-import { getServerSession } from 'next-auth/next';
-import { redirect } from 'next/navigation';
+'use client';
+
 import { PropsWithChildren } from 'react';
-import { authOptions } from '~/libs/next-auth';
+import { useIsAuthenticated } from '@refinedev/core';
+import { useRouter } from 'next/navigation';
+import LoadingPage from '../loading';
 
-export default async function AuthLayout({ children }: PropsWithChildren) {
-    const data = await getData();
+export default function AuthLayout({ children }: PropsWithChildren) {
+    const router = useRouter();
+    const { data, isLoading } = useIsAuthenticated();
 
-    if (!data.session?.user) {
-        return redirect('/login');
+    if (isLoading) {
+        return <LoadingPage />;
     }
 
-    return <>{children}</>;
-}
-
-async function getData() {
-    const session = await getServerSession(authOptions);
+    if (!isLoading && !data?.authenticated) {
+        return router.replace('/login');
+    }
 
-    return {
-        session,
-    };
+    return <>{children}</>;
 }
diff --git a/apps/fe/src/app/(no-auth)/layout.tsx b/apps/fe/src/app/(no-auth)/layout.tsx
@@ -1,22 +1,21 @@
-import { getServerSession } from 'next-auth/next';
-import { redirect } from 'next/navigation';
+'use client';
+
 import { PropsWithChildren } from 'react';
-import { authOptions } from '~/libs/next-auth';
+import { useIsAuthenticated } from '@refinedev/core';
+import { useRouter } from 'next/navigation';
+import LoadingPage from '../loading';
 
-export default async function NoAuthLayout({ children }: PropsWithChildren) {
-    const data = await getData();
+export default function NoAuthLayout({ children }: PropsWithChildren) {
+    const router = useRouter();
+    const { data, isLoading } = useIsAuthenticated();
 
-    if (data.session?.user) {
-        return redirect('/');
+    if (isLoading) {
+        return <LoadingPage />;
     }
 
-    return <>{children}</>;
-}
-
-async function getData() {
-    const session = await getServerSession(authOptions);
+    if (!isLoading && data?.authenticated) {
+        return router.replace('/');
+    }
 
-    return {
-        session,
-    };
+    return <>{children}</>;
 }
diff --git a/apps/fe/src/components/pages/login/index.tsx b/apps/fe/src/components/pages/login/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useLogin } from '@refinedev/core';
+import { useLogin, useNotification } from '@refinedev/core';
 import { Space, Form, Input, Typography, Divider, Button } from 'antd';
 import { MailOutlined, GithubOutlined, GoogleOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import type { LoginActionPayload } from '~/providers/auth-provider/types';
@@ -25,6 +25,7 @@ export type LoginProps = {
 export default function Login({ onBack }: LoginProps) {
     const router = useRouter();
     const params = useSearchParams();
+    const { open } = useNotification();
     const { mutate: login } = useLogin();
 
     const {
@@ -47,14 +48,24 @@ export default function Login({ onBack }: LoginProps) {
 
     useEffect(() => {
         const hash = params.get('hash');
-        if (hash && hash.length > SEEM_SAFE_HASH_LENGTH) {
+        if (hash && hash.length >= SEEM_SAFE_HASH_LENGTH) {
             login({ type: 'login', hash });
         } else if (hash) {
             const cloneParams = new URLSearchParams(params);
             cloneParams.delete('hash');
             return router.replace(`/login?${cloneParams.toString()}`);
         }
-    }, [params, login, router]);
+    }, [params, router, login, open]);
+
+    useEffect(() => {
+        if (params.get('error') === 'failed_to_login') {
+            open({
+                type: 'error',
+                message: 'Failed to login, please try again.',
+                key: 'failed_to_login',
+            });
+        }
+    }, [params, open]);
 
     if (params.get('hash')) {
         return <Loading />;

diff --git a/apps/fe/src/libs/next-auth/options.ts b/apps/fe/src/libs/next-auth/options.ts
@@ -44,9 +44,6 @@ export const authOptions = {
         async signIn({ user, account }: { user: User; account: Account | null }) {
             if (account?.provider === 'google') {
                 try {
-                    console.log(account);
-                    console.log(account.id_token);
-
                     const { data: userData } = await axios.post<LoginResponseDto>(
                         '/auth/login/google',
                         {
@@ -70,13 +67,10 @@ export const authOptions = {
                     return true;
                 } catch (error) {
                     console.error(error);
-                    return false;
+                    throw new Error('failed_to_login');
                 }
             } else if (account?.provider === 'github') {
                 try {
-                    console.log(account);
-                    console.log(account.id_token);
-
                     const { data: userData } = await axios.post<LoginResponseDto>(
                         '/auth/login/github',
                         {
@@ -100,7 +94,7 @@ export const authOptions = {
                     return true;
                 } catch (error) {
                     console.error(error);
-                    return false;
+                    throw new Error('failed_to_login');
                 }
             }
             return true;
@@ -125,6 +119,10 @@ export const authOptions = {
             return baseUrl;
         },
     },
+    pages: {
+        signIn: '/login',
+        error: '/login',
+    },
     logger: {
         debug: (...data: unknown[]) => console.debug({ ...data }),
         error: (...data: unknown[]) => console.error({ ...data }),