#25 basic auth working

Login/logout button in header - doesn't do anything yet but allows user to login via auth-test.ala.org.au.

packages/react/.env.development

@@ -0,0 +1,6 @@
+VITE_APP_VERSION=0.0.1
+
+# ALA OIDC
+REACT_APP_OIDC_AUTHORITY=https://auth-test.ala.org.au/cas/oidc
+REACT_APP_OIDC_CLIENT_ID=oidc-expo-test
+REACT_APP_OIDC_REDIRECT_URI=http://localhost:3000

packages/react/.env.production

@@ -0,0 +1,6 @@
+VITE_APP_VERSION=0.0.1
+
+# ALA OIDC
+REACT_APP_OIDC_AUTHORITY=https://auth.ala.org.au/cas/oidc
+REACT_APP_OIDC_CLIENT_ID=prod-client-id
+REACT_APP_OIDC_REDIRECT_URI=https://spa-app.ala.org.au

packages/react/package.json

@@ -15,11 +15,13 @@
     "@testing-library/user-event": "^13.5.0",
     "leaflet": "^1.8.0",
     "lodash": "^4.17.21",
+    "oidc-client-ts": "^2.0.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-leaflet": "^4.0.1",
     "react-leaflet-draw": "^0.20.3",
     "react-markdown": "^8.0.3",
+    "react-oidc-context": "^2.1.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "save-dev": "^0.0.1-security",

packages/react/src/App.js

@@ -1,16 +1,28 @@
 import { CssBaseline } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
 import { BrowserRouter as Router } from 'react-router-dom'
+import { AuthProvider } from 'react-oidc-context'
 import './assets/App.css'
-import Search from './components/Search'
+import config from './components/config'
 import theme from './components/theme'
+import Search from './components/Search'
 
 function App() {
   return (
     <Router>
       <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Search />
+        <AuthProvider
+          client_id={config.client_id}
+          authority={config.authority}
+          redirect_uri={config.redirect_uri}
+          onSigninCallback={(user) => {
+            console.log(user)
+            window.history.replaceState({ path: '/' }, '', '/')
+          }}
+        >
+          <CssBaseline />
+          <Search />
+        </AuthProvider>
       </ThemeProvider>
     </Router>
   )

packages/react/src/components/ArgaToolbar.js

@@ -9,15 +9,32 @@ import {
   DialogContentText,
   DialogActions,
   IconButton,
+  Tooltip,
 } from '@mui/material'
 import InfoOutlined from '@mui/icons-material/InfoOutlined'
-import React from 'react'
+// import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'
+import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined'
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'
+import React, { useState, useCallback } from 'react'
+import { useAuth } from 'react-oidc-context'
 import logo from '../assets/ARGA-logo-notext.png'
 
 export default function ArgaToolbar() {
-  const [openAbout, setOpenAbout] = React.useState(false)
+  const [openAbout, setOpenAbout] = useState(false)
   const handleAboutOpen = () => setOpenAbout(true)
   const handleAboutClose = () => setOpenAbout(false)
+  // const showBasket = () => {
+  //   console.log('basket should appear')
+  // }
+
+  const auth = useAuth()
+  const onClick = useCallback(() => {
+    if (auth.isAuthenticated) {
+      auth.signoutRedirect()
+    } else {
+      auth.signinRedirect()
+    }
+  }, [auth])
 
   return (
     <AppBar position="fixed">
@@ -56,6 +73,21 @@ export default function ArgaToolbar() {
           <span style={{ fontWeight: 700 }}>Data Brwsr</span>{' '}
           <span style={{ fontWeight: 400 }}>Demo</span>
         </Typography>
+        <Tooltip title={auth.isAuthenticated ? 'Logout' : 'Login'}>
+          <IconButton
+            size="medium"
+            aria-label="show-basket"
+            onClick={onClick}
+            color="inherit"
+          >
+            {auth.isAuthenticated ? (
+              <LogoutOutlinedIcon fontSize="large" />
+            ) : (
+              <LoginOutlinedIcon fontSize="large" />
+            )}
+          </IconButton>
+        </Tooltip>
+
         <IconButton
           size="medium"
           aria-label="about-arga"

packages/react/src/components/config.js

@@ -0,0 +1,10 @@
+const config = {
+  // authority: import.meta.env.VITE_OIDC_AUTHORITY,
+  // client_id: import.meta.env.VITE_OIDC_CLIENT_ID,
+  // redirect_uri: import.meta.env.VITE_OIDC_REDIRECT_URI,
+  authority: process.env.REACT_APP_OIDC_AUTHORITY,
+  client_id: process.env.REACT_APP_OIDC_CLIENT_ID,
+  redirect_uri: process.env.REACT_APP_OIDC_REDIRECT_URI,
+}
+
+export default config