diff --git a/src/components/auth.tsx b/src/components/auth.tsx index dcc56ea..5971dda 100644 --- a/src/components/auth.tsx +++ b/src/components/auth.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { useSearchParams } from 'react-router-dom'; +import { Session } from '../services'; export const Auth: React.FC = () => { const [searchParams] = useSearchParams(); @@ -7,11 +8,11 @@ export const Auth: React.FC = () => { const baseUrl = `${window.location.protocol}//${window.location.host}` if (token) { - sessionStorage.setItem('token', token); - window.location.href = `${baseUrl}/overview`; + Session.setBearerToken(token); + window.location.replace(`${baseUrl}/overview`); } else { - sessionStorage.removeItem('token'); - window.location.href = `${baseUrl}`; + Session.reset(); + window.location.replace(`${baseUrl}/`); } return <>; diff --git a/src/components/login.tsx b/src/components/login.tsx index e6dbfb4..7adc6b6 100644 --- a/src/components/login.tsx +++ b/src/components/login.tsx @@ -1,11 +1,11 @@ import React, { useEffect } from 'react'; import { Button } from 'primereact/button'; import { Card } from 'primereact/card'; -import { Configuration } from '../services'; +import { Configuration, Session } from '../services'; export const Login: React.FC = () => { // reset every old token - useEffect(() => sessionStorage.removeItem('token'), []); + useEffect(() => Session.reset(), []); const redirectToVatsim = () => { const url = [ diff --git a/src/components/logout.tsx b/src/components/logout.tsx index f347c8b..e05f7e6 100644 --- a/src/components/logout.tsx +++ b/src/components/logout.tsx @@ -1,22 +1,15 @@ import React, { useContext, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { AuthContext } from '../contexts'; +import { Session } from '../services'; export const Logout: React.FC = () => { const context = useContext(AuthContext); const navigate = useNavigate(); useEffect(() => { - sessionStorage.removeItem('token'); - context.setAuth({ - valid: false, - user: { - vatsimId: '', - fullName: '', - administrator: false, - airportConfigurationAccess: [], - }, - }); + Session.reset(); + context.resetAuth(); navigate('/'); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/contexts/authcontext.tsx b/src/contexts/authcontext.tsx index 0ba0b2c..3a5bd70 100644 --- a/src/contexts/authcontext.tsx +++ b/src/contexts/authcontext.tsx @@ -3,10 +3,12 @@ import { useNavigate } from 'react-router-dom'; import { Auth } from '../services'; import { User } from '../types'; -const AuthContext = createContext<{ - auth: { valid: boolean; user: User }; - setAuth: Dispatch>; -}>({ auth: { +export interface IAuthState { + valid: boolean, + user: User, +}; + +const InitialAuthState: IAuthState = { valid: false, user: { vatsimId: '', @@ -14,33 +16,29 @@ const AuthContext = createContext<{ administrator: false, airportConfigurationAccess: [], }, -}, setAuth: () => {} }); +}; + +const AuthContext = createContext<{ + auth: IAuthState; + setAuth: Dispatch>; + resetAuth: () => void; +}>({ auth: InitialAuthState, setAuth: () => {}, resetAuth: () => {} }); export const AuthProvider = ({ children }: { children: any }) => { - const [auth, setAuth] = useState<{ valid: boolean; user: User }>({ - valid: false, - user: { - vatsimId: '', - fullName: '', - administrator: false, - airportConfigurationAccess: [], - }, - }); + const [auth, setAuth] = useState(InitialAuthState); const navigate = useNavigate(); + const resetAuth = () => setAuth(InitialAuthState); + useEffect(() => { Auth.user().then((user) => { - setAuth({ valid: true, user }); + if (user !== undefined) { + setAuth({ valid: true, user }); + } else { + setAuth(InitialAuthState); + } }).catch(() => { - setAuth({ - valid: false, - user: { - vatsimId: '', - fullName: '', - administrator: false, - airportConfigurationAccess: [], - }, - }); + setAuth(InitialAuthState); navigate('/'); }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -48,7 +46,7 @@ export const AuthProvider = ({ children }: { children: any }) => { return ( <> - + {children} diff --git a/src/services/airport.ts b/src/services/airport.ts index 32e3048..dd5e2c8 100644 --- a/src/services/airport.ts +++ b/src/services/airport.ts @@ -1,10 +1,11 @@ import axios from 'axios'; import { Configuration } from './configuration'; +import { Session } from './session'; import { AirportOverview } from '../types'; export class Airport { static async all(): Promise { - const token = sessionStorage.getItem('token'); + const token = Session.bearerToken(); if (!token) return []; return axios diff --git a/src/services/auth.ts b/src/services/auth.ts index 9b77c88..e570964 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -1,18 +1,12 @@ import axios from 'axios'; import { Configuration } from './configuration'; +import { Session } from './session'; import { User } from '../types'; export class Auth { - static async user(): Promise { - const token = sessionStorage.getItem('token'); - if (!token) { - return { - vatsimId: '', - fullName: '', - administrator: false, - airportConfigurationAccess: [], - }; - } + static async user(): Promise { + const token = Session.bearerToken(); + if (!token) return undefined; return axios .get(`${Configuration.resourceServer}/auth/user`, { @@ -21,11 +15,6 @@ export class Auth { }, }) .then((response) => response.data) - .catch(() => ({ - vatsimId: '', - fullName: '', - administrator: false, - airportConfigurationAccess: [], - })); + .catch(() => undefined); } } diff --git a/src/services/index.ts b/src/services/index.ts index e479ca4..74ba151 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1,6 +1,7 @@ import { Airport } from "./airport"; import { Auth } from './auth'; import { Configuration } from "./configuration"; +import { Session } from "./session"; import { System } from './system'; -export { Airport, Auth, Configuration, System }; +export { Airport, Auth, Configuration, Session, System }; diff --git a/src/services/system.ts b/src/services/system.ts index 1fd3bcf..57d01a8 100644 --- a/src/services/system.ts +++ b/src/services/system.ts @@ -1,9 +1,10 @@ import axios from 'axios'; import { Configuration } from './configuration'; +import { Session } from './session'; export class System { static async timestamp(): Promise { - const token = sessionStorage.getItem('token'); + const token = Session.bearerToken(); if (!token) return 0; return axios