From faa293c3c715383a35977f6ab364586ee9e2f0b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C6=B0=C6=A1ng=20Ti=E1=BA=BFn=20Vinh?=
<64480713+DuckyMomo20012@users.noreply.github.com>
Date: Thu, 28 Dec 2023 20:56:40 +0700
Subject: [PATCH] fix: update authguard component
---
package.json | 1 +
pnpm-lock.yaml | 48 +++++++++++++++++++++
src/context/AuthGuard.tsx | 90 +++++++++++++++++----------------------
3 files changed, 89 insertions(+), 50 deletions(-)
diff --git a/package.json b/package.json
index fe5f79b..d4b65ef 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"@iconify/react": "4.1.1",
"@mantine/core": "7.1.5",
"@mantine/hooks": "7.1.5",
+ "@mantine/notifications": "7.1.5",
"@reduxjs/toolkit": "1.9.7",
"@tanstack/react-query": "5.0.0",
"@tanstack/react-query-devtools": "5.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc00f7c..0a322fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
'@mantine/hooks':
specifier: 7.1.5
version: 7.1.5(react@18.2.0)
+ '@mantine/notifications':
+ specifier: 7.1.5
+ version: 7.1.5(@mantine/core@7.1.5)(@mantine/hooks@7.1.5)(react-dom@18.2.0)(react@18.2.0)
'@reduxjs/toolkit':
specifier: 1.9.7
version: 1.9.7(react-redux@8.1.3)(react@18.2.0)
@@ -716,6 +719,30 @@ packages:
react: 18.2.0
dev: false
+ /@mantine/notifications@7.1.5(@mantine/core@7.1.5)(@mantine/hooks@7.1.5)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-/WRxNNgPvRr4munHjCTZaMVjSIpz8ydheccpPGrqOgAN/zfPNWYYcv7kaqXdlb+ag9ZMFsixQB97svvhCRxPCA==}
+ peerDependencies:
+ '@mantine/core': 7.1.5
+ '@mantine/hooks': 7.1.5
+ react: ^18.2.0
+ react-dom: ^18.2.0
+ dependencies:
+ '@mantine/core': 7.1.5(@mantine/hooks@7.1.5)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+ '@mantine/hooks': 7.1.5(react@18.2.0)
+ '@mantine/store': 7.1.5(react@18.2.0)
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+ dev: false
+
+ /@mantine/store@7.1.5(react@18.2.0):
+ resolution: {integrity: sha512-iPAt8auWyUs5TyUr31MziCILlLCYCfw6fSqPvLxOwUYpSf9BvtCAoE9JmrRrVi2q5+xO0KPSyK+OHWyBwsAqcQ==}
+ peerDependencies:
+ react: ^18.2.0
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/@next/env@13.5.6:
resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
dev: false
@@ -1792,6 +1819,13 @@ packages:
esutils: 2.0.3
dev: true
+ /dom-helpers@5.2.1:
+ resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+ dependencies:
+ '@babel/runtime': 7.21.0
+ csstype: 3.1.1
+ dev: false
+
/dot-prop@5.3.0:
resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
engines: {node: '>=8'}
@@ -4121,6 +4155,20 @@ packages:
- '@types/react'
dev: false
+ /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+ peerDependencies:
+ react: '>=16.6.0'
+ react-dom: '>=16.6.0'
+ dependencies:
+ '@babel/runtime': 7.21.0
+ dom-helpers: 5.2.1
+ loose-envify: 1.4.0
+ prop-types: 15.8.1
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/src/context/AuthGuard.tsx b/src/context/AuthGuard.tsx
index 31c5cf4..2128ddf 100644
--- a/src/context/AuthGuard.tsx
+++ b/src/context/AuthGuard.tsx
@@ -1,67 +1,57 @@
-import { Icon } from '@iconify/react';
-import {
- Center,
- Group,
- Loader,
- Modal,
- Stack,
- Text,
- ThemeIcon,
-} from '@mantine/core';
-import { useRouter } from 'next/router';
+import { notifications } from '@mantine/notifications';
+import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
const AuthGuard = ({ children }: { children?: React.ReactNode }) => {
- const [opened, setOpened] = useState(false);
const router = useRouter();
const { status } = useSession();
- // Set this to true will redirect directly
- // required: true,
- // onUnauthenticated() {
- // router.push('/auth/login');
- // },
+ // eslint-disable-next-line consistent-return
useEffect(() => {
- if (status !== 'loading') {
- setOpened(true);
+ if (status === 'loading') {
+ const id = setTimeout(() => {
+ notifications.show({
+ title: 'Loading user...',
+ message: 'Please wait while we are loading your user data',
+ color: 'cyan',
+ loading: true,
+ });
+ }, 0);
+
+ return () => {
+ clearTimeout(id);
+ };
+ }
+
+ if (status === 'unauthenticated') {
+ // NOTE: A little trick to make to notification show up after the page is
+ // loaded, because if we don't do this, the notification will not show up
+ const id = setTimeout(() => {
+ notifications.show({
+ title: 'Not authenticated',
+ message: 'You are not authenticated, redirecting to sign in page...',
+ color: 'red',
+ autoClose: 5000,
+ });
+ }, 0);
+
+ router.push('/auth/sign-in');
+
+ return () => {
+ clearTimeout(id);
+ };
}
- }, [status]);
+ }, [status, router]);
if (status === 'loading') {
- return (
-
-
- Checking user...
-
-
-
-
-
- );
+ return null;
}
if (status === 'unauthenticated') {
- return (
- <>
- {
- setOpened(false);
- router.push('/auth/login');
- }}
- opened={opened}
- withCloseButton={false}
- >
-
-
-
-
- You are not logged in
-
-
-
- );
+ return null;
}
+
if (status === 'authenticated') {
return <>{children};
}