use the new session management

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);
+    Session.setBearerToken(token);
-    window.location.href = `${baseUrl}/overview`;
+    window.location.replace(`${baseUrl}/overview`);
   } else {
-    sessionStorage.removeItem('token');
+    Session.reset();
-    window.location.href = `${baseUrl}`;
+    window.location.replace(`${baseUrl}/`);
   }
 
   return <></>;

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 = [

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');
+    Session.reset();
-    context.setAuth({
+    context.resetAuth();
-      valid: false,
-      user: {
-        vatsimId: '',
-        fullName: '',
-        administrator: false,
-        airportConfigurationAccess: [],
-      },
-    });
     navigate('/');
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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<{
+export interface IAuthState {
-  auth: { valid: boolean; user: User };
+  valid: boolean,
-  setAuth: Dispatch<SetStateAction<{ valid: boolean; user: User }>>;
+  user: User,
-}>({ auth: {
+};
+
+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<SetStateAction<IAuthState>>;
+  resetAuth: () => void;
+}>({ auth: InitialAuthState, setAuth: () => {}, resetAuth: () => {} });
 
 export const AuthProvider = ({ children }: { children: any }) => {
-  const [auth, setAuth] = useState<{ valid: boolean; user: User }>({
+  const [auth, setAuth] = useState<IAuthState>(InitialAuthState);
-    valid: false,
-    user: {
-      vatsimId: '',
-      fullName: '',
-      administrator: false,
-      airportConfigurationAccess: [],
-    },
-  });
   const navigate = useNavigate();
 
+  const resetAuth = () => setAuth(InitialAuthState);
+
   useEffect(() => {
     Auth.user().then((user) => {
+      if (user !== undefined) {
         setAuth({ valid: true, user });
+      } else {
+        setAuth(InitialAuthState);
+      }
     }).catch(() => {
-      setAuth({
+      setAuth(InitialAuthState);
-        valid: false,
-        user: {
-          vatsimId: '',
-          fullName: '',
-          administrator: false,
-          airportConfigurationAccess: [],
-        },
-      });
       navigate('/');
     });
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,7 +46,7 @@ export const AuthProvider = ({ children }: { children: any }) => {
 
   return (
     <>
-      <AuthContext.Provider value={{ auth, setAuth }}>
+      <AuthContext.Provider value={{ auth, setAuth, resetAuth }}>
         {children}
       </AuthContext.Provider>
     </>

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<AirportOverview[]> {
-    const token = sessionStorage.getItem('token');
+    const token = Session.bearerToken();
     if (!token) return [];
 
     return axios

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<User> {
+  static async user(): Promise<User | undefined> {
-    const token = sessionStorage.getItem('token');
+    const token = Session.bearerToken();
-    if (!token) {
+    if (!token) return undefined;
-      return {
-        vatsimId: '',
-        fullName: '',
-        administrator: false,
-        airportConfigurationAccess: [],
-      };
-    }
 
     return axios
       .get<User>(`${Configuration.resourceServer}/auth/user`, {
@@ -21,11 +15,6 @@ export class Auth {
         },
       })
       .then((response) => response.data)
-      .catch(() => ({
+      .catch(() => undefined);
-        vatsimId: '',
-        fullName: '',
-        administrator: false,
-        airportConfigurationAccess: [],
-      }));
   }
 }

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 };

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<number> {
-    const token = sessionStorage.getItem('token');
+    const token = Session.bearerToken();
     if (!token) return 0;
 
     return axios