Skip to content
Snippets Groups Projects
Commit adefa1a0 authored by Cross, Liam (UG - Comp Sci & Elec Eng)'s avatar Cross, Liam (UG - Comp Sci & Elec Eng)
Browse files

Merge branch 'LC/auth-logout-fixes' into 'main'

Perform logout and fix double auth call

See merge request ma03081/COM3014!16
parents c681903e 89928bc6
No related branches found
No related tags found
No related merge requests found
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>
</>
);
}
......
......@@ -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>
},
{
......
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>
);
}
......
......@@ -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;
}
}
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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment