feat: expand and visualize auth states

Author: sebastianvitterso

web/src/App.tsx

@@ -1,8 +1,47 @@
 import { router } from './router'
 import { RouterProvider } from 'react-router-dom'
 import Header from './common/components/Header'
+import { AuthContext } from 'react-oauth2-code-pkce'
+import { useContext } from 'react'
+import { Button, Progress, Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
+
+const hasAuthConfig = process.env.REACT_APP_AUTH === '1'
+
+const CenterContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+`
 
 function App() {
+  const { token, error, login, loginInProgress } = useContext(AuthContext)
+
+  if (hasAuthConfig && error) {
+    return <CenterContainer>{error}</CenterContainer>
+  }
+
+  if (hasAuthConfig && loginInProgress) {
+    return (
+      <CenterContainer>
+        <Typography>Login in progress.</Typography>
+        <Progress.Dots color="primary" />
+      </CenterContainer>
+    )
+  }
+
+  if (hasAuthConfig && !token) {
+    return (
+      <CenterContainer>
+        <Button onClick={login}>Log in</Button>
+      </CenterContainer>
+    )
+  }
+
   return (
     <>
       <Header />

web/src/auth.ts

@@ -1,10 +1,13 @@
-export const authConfig = {
+import { TAuthConfig } from 'react-oauth2-code-pkce'
+
+export const authConfig: TAuthConfig = {
   clientId: process.env.REACT_APP_AUTH_CLIENT_ID || '',
   authorizationEndpoint: process.env.REACT_APP_AUTH_ENDPOINT || '',
   tokenEndpoint: process.env.REACT_APP_TOKEN_ENDPOINT || '',
   scope: process.env.REACT_APP_AUTH_SCOPE || '',
   redirectUri: process.env.REACT_APP_AUTH_REDIRECT_URI || '',
   logoutEndpoint: process.env.REACT_APP_LOGOUT_ENDPOINT || '',
+  autoLogin: false,
   preLogin: () =>
     localStorage.setItem(
       'preLoginPath',

web/src/common/components/Header.tsx

@@ -1,24 +1,38 @@
 import { useContext } from 'react'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import { Icon, TopBar, Typography } from '@equinor/eds-core-react'
-import { receipt } from '@equinor/eds-icons'
+import { Button, Icon, TopBar, Typography } from '@equinor/eds-core-react'
+import { log_out, receipt } from '@equinor/eds-icons'
 
 Icon.add({ receipt })
 
 const Header = () => {
-  const { tokenData } = useContext(AuthContext)
+  const { tokenData, logOut } = useContext(AuthContext)
+
+  // unique_name might be azure-specific, different tokenData-fields might
+  // be available if another OAuth-provider is used.
+  const username = tokenData?.unique_name
   return (
     <TopBar>
       <TopBar.Header>
         <Icon name="receipt" />
         Todo App
       </TopBar.Header>
-      <TopBar.Actions>
-        <Typography variant="caption">
-          {tokenData
-            ? `Logged in as ${tokenData?.['unique_name']}`
-            : 'Unauthenticated'}
-        </Typography>
+      <TopBar.Actions style={{ gap: 8 }}>
+        {tokenData ? (
+          <>
+            <Typography>Logged in as {username}</Typography>
+            <Button
+              variant="ghost_icon"
+              aria-label="Log out"
+              title="Log out"
+              onClick={logOut}
+            >
+              <Icon data={log_out} title="Log out" />
+            </Button>
+          </>
+        ) : (
+          <Typography variant="caption">Unauthenticated</Typography>
+        )}
       </TopBar.Actions>
     </TopBar>
   )

web/src/index.tsx

@@ -9,14 +9,12 @@ const hasAuthConfig = process.env.REACT_APP_AUTH === '1'
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
-    <>
-      {hasAuthConfig ? (
-        <AuthProvider authConfig={authConfig}>
-          <App />
-        </AuthProvider>
-      ) : (
+    {hasAuthConfig ? (
+      <AuthProvider authConfig={authConfig}>
         <App />
-      )}
-    </>
+      </AuthProvider>
+    ) : (
+      <App />
+    )}
   </React.StrictMode>
 )