Add login/logout functionality

src/App.tsx

@@ -18,6 +18,7 @@ import { useQuery } from './hooks/useQuery';
 import { useHighlightBoxes } from './hooks/useHighlightBoxes';
 import { OpenLayersMap } from './components/OpenLayersMap';
 import { handleSelectChange } from './utils/layerUtils';
+import { Login } from './components/Login';
 
 function App() {
   /** contains useful state of the baselayer for tile requests and matplotlib color mapping */
@@ -167,6 +168,7 @@ function App() {
   const { activeBaselayer, internalBaselayersState } = baselayersState;
   return (
     <>
+      <Login />
       {activeBaselayer && internalBaselayersState && (
         <OpenLayersMap
           baselayersState={baselayersState}

src/components/Login.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { LOGIN_URL, LOGOUT_URL } from '../configs/mapSettings';
+import { getCookie } from '../utils/fetchUtils';
+import './styles/login.css';
+
+export function Login() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const hasAccessToken = getCookie('validate_access_token');
+    const hasRefreshToken = getCookie('valid_refresh_token');
+
+    setIsAuthenticated(!!hasAccessToken && !!hasRefreshToken);
+  }, []);
+
+  if (isAuthenticated === null) return null;
+
+  const linkText = isAuthenticated ? 'Log out' : 'Log in';
+  const href = isAuthenticated ? LOGOUT_URL : LOGIN_URL;
+
+  return (
+    <div className="login-container">
+      <a href={href}>{linkText}</a>
+    </div>
+  );
+}

src/components/styles/login.css

@@ -0,0 +1,11 @@
+.login-container {
+  position: absolute;
+  right: 11px;
+  top: 50px;
+  z-index: 999;
+}
+
+.login-container > a,
+.login-container > a:visited {
+  color: black;
+}

src/configs/mapSettings.ts

@@ -38,3 +38,7 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
 export const NUMBER_OF_FIXED_GRATICULE_DECIMALS = 3;
+
+export const LOGIN_URL =
+  'https://identity.simonsobservatory.org/login/0686c201-b234-70fe-8000-3036b7a36d47';
+export const LOGOUT_URL = 'https://identity.simonsobservatory.org/logout';

src/utils/fetchUtils.ts

@@ -230,3 +230,8 @@ export async function deleteSubmapBox(
     console.error(e);
   }
 }
+
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+  return match ? match[2] : null;
+}