Github Authentication

package.json

@@ -26,6 +26,7 @@
     "json-to-pretty-yaml": "^1.2.2",
     "mdi-material-ui": "^7.7.0",
     "react": "^18.2.0",
+    "react-cookie": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.14.1",
@@ -71,4 +72,4 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.1"
   }
-}
+}

src/components/AppBar/index.jsx

@@ -9,6 +9,9 @@ import MuiAppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 
+import Login from "../Login";
+
+
 const PREFIX = 'index';
 
 const classes = {
@@ -78,6 +81,9 @@ export default function AppBar(props) {
             Pulpito
           </RouterLink>
         </Typography>
+        <div>
+          <Login />
+        </div>
         <IconButton onClick={props.toggleDarkMode} size="large">
           {props.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
         </IconButton>

src/components/Login/index.jsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Avatar from '@mui/material/Avatar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import GitHubIcon from '@mui/icons-material/GitHub';
+
+import { useLogin, useLogout, useSession, useUserData } from "../../lib/teuthologyAPI";
+
+
+export default function Login() {
+  const sessionQuery = useSession();
+  const userData = useUserData();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  if (sessionQuery.isError) return null;
+
+  return (
+    <div>
+      {sessionQuery.data?.session
+        ? <div>
+            <Avatar
+              alt={userData.get("username") || ""} 
+              src={userData.get("avatar_url") || ""}
+              onClick={handleClick} 
+              aria-controls={open ? 'basic-menu' : undefined} 
+              aria-expanded={open ? 'true' : undefined} 
+            />
+            <Menu
+              id="basic-menu"
+              anchorEl={anchorEl}
+              open={open}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem onClick={useLogout}>Logout</MenuItem>
+            </Menu>
+        </div>
+        : <Button 
+            variant="contained" 
+            onClick={useLogin} 
+            startIcon={<GitHubIcon fontSize="small" /> }
+          >
+            Login 
+          </Button>
+      }
+    </div>
+  );
+}

src/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { QueryParamProvider } from "use-query-params";
 import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
+import { CookiesProvider } from "react-cookie";
 import axios from "axios";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -78,15 +79,17 @@ export default function Root() {
     <React.StrictMode>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <Router>
-            <QueryParamProvider adapter={ReactRouter6Adapter}>
-              <CssBaseline />
-              <QueryClientProvider client={queryClient}>
-                <ReactQueryDevtools initialIsOpen={false} />
-                <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
-              </QueryClientProvider>
-            </QueryParamProvider>
-          </Router>
+          <CookiesProvider>
+            <Router>
+              <QueryParamProvider adapter={ReactRouter6Adapter}>
+                <CssBaseline />
+                <QueryClientProvider client={queryClient}>
+                  <ReactQueryDevtools initialIsOpen={false} />
+                  <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+                </QueryClientProvider>
+              </QueryParamProvider>
+            </Router>
+          </CookiesProvider>
         </ThemeProvider>
       </StyledEngineProvider>
     </React.StrictMode>

src/lib/teuthologyAPI.ts

@@ -0,0 +1,57 @@
+import axios from "axios";
+import { useQuery } from "@tanstack/react-query";
+import { Cookies } from "react-cookie";
+import type { UseQueryResult } from "@tanstack/react-query";
+
+const TEUTHOLOGY_API_SERVER = 
+    import.meta.env.VITE_TEUTHOLOGY_API || "";
+const GH_USER_COOKIE = "GH_USER";
+
+function useLogin() {
+    const url =  new URL("/login/", TEUTHOLOGY_API_SERVER).href;
+    window.location.href = url;
+}
+
+function useLogout() {
+    const cookies = new Cookies();
+    cookies.remove(GH_USER_COOKIE);
+
+    const url =  new URL("/logout/", TEUTHOLOGY_API_SERVER).href;
+    window.location.href = url;
+}
+
+function useSession(): UseQueryResult {
+    const url =  new URL("/", TEUTHOLOGY_API_SERVER).href;
+    const query = useQuery({
+        queryKey: ['ping-api', { url }],
+        queryFn: () => (
+            axios.get(url, {
+                withCredentials: true
+            }).then((resp) => resp.data)
+        ),
+    });
+    return query;
+}
+
+function useUserData(): Map<string, string> {
+    const cookies = new Cookies();
+    const cookie = cookies.get(GH_USER_COOKIE);
+    if (cookie) {
+        const cookie_ = cookie.replace(/\\073/g, ';');
+        let cookieMap: Map<string, string> = new Map();
+        let cookieSegments = cookie_.split(";");
+        cookieSegments.map((cookie: string) => {
+            let [key, value] = cookie.split("=");
+            cookieMap.set(key.trim(), value.trim());
+        })
+        return cookieMap;
+    };
+    return new Map();
+}
+
+export {
+    useLogin,
+    useLogout,
+    useSession,
+    useUserData
+}