From 89928bc6fd4989f9c3d0a2c91339659bb99de0a9 Mon Sep 17 00:00:00 2001
From: "Cross, Liam (UG - Comp Sci & Elec Eng)" <lc01383@surrey.ac.uk>
Date: Tue, 2 Apr 2024 16:46:49 +0000
Subject: [PATCH] Perform logout and fix double auth call
---
client/src/components/Logout/Logout.tsx | 35 ++++++++++------------
client/src/main.tsx | 4 +++
client/src/providers/AuthProvider.tsx | 29 ++++--------------
client/src/services/Authorise/Authorise.ts | 9 ++++--
client/src/services/Logout/Logout.ts | 11 +++++++
5 files changed, 43 insertions(+), 45 deletions(-)
create mode 100644 client/src/services/Logout/Logout.ts
diff --git a/client/src/components/Logout/Logout.tsx b/client/src/components/Logout/Logout.tsx
index 34cb705..b7ee851 100644
--- a/client/src/components/Logout/Logout.tsx
+++ b/client/src/components/Logout/Logout.tsx
@@ -1,38 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { useLoaderData } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
-import Spinner from '../Spinner/Spinner';
import './Logout.scss';
function Logout() {
- const [loading, setLoading] = useState(true);
- const { isAuth, removeAuth } = useAuth();
+ const { removeAuth } = useAuth();
+ const error = useLoaderData();
useEffect(() => {
- // TODO: do logout api call
- if (isAuth) {
- removeAuth();
- setLoading(false);
- } else {
- setLoading(false);
- }
+ removeAuth();
}, []);
return (
<>
- {
- loading ?
- <div className='full-main'>
- <Spinner></Spinner>
- </div> :
- <div className='logout'>
- <div className='card logout-card'>
+ <div className='logout'>
+ <div className='card logout-card'>
+ {
+ error ?
+ <div className='logout-content'>
+ <span>Logout failed</span>
+ <span>Use the Header to navigate!</span>
+ </div> :
<div className='logout-content'>
<span>Sucessfully logged out!</span>
<span>Use the Header to navigate!</span>
</div>
- </div>
+ }
</div>
- }
+ </div>
</>
);
}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 64d8bf3..54cf148 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -9,6 +9,8 @@ import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
import CustomerDashboard from './components/CustomerDashboard/CustomerDashboard.tsx';
import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
import BookingList from './components/BookingList/BookingList.tsx';
+import { AuthoriseUser } from './services/Authorise/Authorise.ts';
+import { LogoutUser } from './services/Logout/Logout.ts';
import { GetCustomerDashboardData } from './services/CustomerDashboard/CustomerDashboard.ts';
import { GetBookingList } from './services/BookingList/BookingList.ts';
import './index.scss';
@@ -16,6 +18,7 @@ import './index.scss';
const router = createBrowserRouter([
{
path: '/',
+ loader: AuthoriseUser,
element: <App></App>,
children: [
{
@@ -28,6 +31,7 @@ const router = createBrowserRouter([
},
{
path: 'logout',
+ loader: LogoutUser,
element: <Logout></Logout>
},
{
diff --git a/client/src/providers/AuthProvider.tsx b/client/src/providers/AuthProvider.tsx
index 9322a12..d6dd383 100644
--- a/client/src/providers/AuthProvider.tsx
+++ b/client/src/providers/AuthProvider.tsx
@@ -1,7 +1,6 @@
import { ReactNode, useEffect, useState } from 'react';
+import { useLoaderData } from 'react-router-dom';
import { AuthContext } from '../contexts/AuthContext';
-import Spinner from '../components/Spinner/Spinner';
-import { authoriseUser } from '../services/Authorise/Authorise';
export interface IUser {
id: number;
@@ -11,23 +10,15 @@ export interface IUser {
}
function AuthProvider({ children }: { children: ReactNode }) {
- const [loading, setLoading] = useState(true);
const [auth, setAuth] = useState(false);
const [user, setUser] = useState<IUser>();
+ const data = useLoaderData() as IUser | null;
useEffect(() => {
- async function authUser() {
- try {
- const result = await authoriseUser();
- giveAuth();
- updateUser(result.data);
- setLoading(false);
- } catch (error) {
- setLoading(false);
- }
+ if (data) {
+ giveAuth();
+ setUser(data);
}
-
- authUser();
}, []);
const giveAuth = () => {
@@ -42,17 +33,9 @@ function AuthProvider({ children }: { children: ReactNode }) {
setUser(newUser);
}
- if (loading) {
- return (
- <div className='full'>
- <Spinner></Spinner>
- </div>
- );
- }
-
return (
<AuthContext.Provider value={{ isAuth: auth, giveAuth, removeAuth, user, updateUser }}>
- {!loading && children}
+ {children}
</AuthContext.Provider>
);
}
diff --git a/client/src/services/Authorise/Authorise.ts b/client/src/services/Authorise/Authorise.ts
index d01fa96..46fb901 100644
--- a/client/src/services/Authorise/Authorise.ts
+++ b/client/src/services/Authorise/Authorise.ts
@@ -2,6 +2,11 @@ import { AxiosResponse } from 'axios';
import Api from '../../helpers/Api';
import { IUser } from '../../providers/AuthProvider';
-export async function authoriseUser(): Promise<AxiosResponse<IUser>> {
- return Api.post('User/authorize', {}, { withCredentials: true });
+export async function AuthoriseUser(): Promise<AxiosResponse<IUser> | null> {
+ try {
+ const result = await Api.post('User/authorize', {}, { withCredentials: true });
+ return result.data;
+ } catch (error) {
+ return null;
+ }
}
diff --git a/client/src/services/Logout/Logout.ts b/client/src/services/Logout/Logout.ts
new file mode 100644
index 0000000..c0596d4
--- /dev/null
+++ b/client/src/services/Logout/Logout.ts
@@ -0,0 +1,11 @@
+import { AxiosError } from 'axios';
+import Api from '../../helpers/Api';
+
+export async function LogoutUser(): Promise<AxiosError | null> {
+ try {
+ await Api.post('User/logout', {}, { withCredentials: true });
+ return null;
+ } catch (error) {
+ return error as AxiosError;
+ }
+}
--
GitLab