131931 - Implement Entra-ID

.env.acceptance

@@ -13,3 +13,15 @@ REACT_APP_HOST_TON=https://ton.woon-a.azure.amsterdam.nl/
 REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/
 REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
 REACT_APP_KEYCLOAK_CLIENT_ID=wonen-zaaksysteem-frontend
+
+############################# Vite #############################
+
+# General
+VITE_APP_TITLE="Amsterdamse Zaak Administratie"
+VITE_APP_TITLE_SHORT="AZA"
+VITE_APP_ENV_SHORT=ACC
+
+# ENTRA-ID
+VITE_OIDC_CLIENT_ID=14c4257b-bcd1-4850-889e-7156c9efe2ec
+VITE_OIDC_REDIRECT_URL=http://localhost:2999
+VITE_OIDC_OBO_SCOPE_BRP=api://c53de0e2-ae05-43aa-9852-31adb9ad7489/wonen

.env.development

@@ -1,6 +1,3 @@
-# NOTE: Variables need to be prefixed using REACT_APP_:
-# https://create-react-app.dev/docs/adding-custom-environment-variables/
-
 # Commented variables are only to be used as examples
 # Add any local changes to `.env.development.local` so they won't be committed
 
@@ -23,5 +20,14 @@ REACT_APP_HOST_TON=https://acc.ton.amsterdam.nl/
 # To bypass Keycloak locally
 # REACT_APP_API_TOKEN={ generate token at http://localhost:8080/api/v1/swagger/#/oidc-authenticate/oidc_authenticate_create }
 
-# Translations
-REACT_APP_PAGE_TITLE="Amsterdamse Zaak Administratie | Gemeente Amsterdam"
+############################# Vite #############################
+
+# General
+VITE_APP_TITLE="Amsterdamse Zaak Administratie"
+VITE_APP_TITLE_SHORT="AZA"
+VITE_APP_ENV_SHORT=LOCAL
+
+# ENTRA-ID
+VITE_OIDC_CLIENT_ID=14c4257b-bcd1-4850-889e-7156c9efe2ec
+VITE_OIDC_REDIRECT_URL=http://localhost:2999
+VITE_OIDC_OBO_SCOPE_BRP=api://c53de0e2-ae05-43aa-9852-31adb9ad7489/wonen

index.html

@@ -7,10 +7,10 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="%REACT_APP_PAGE_TITLE%" />
+    <meta name="description" content="%VITE_APP_TITLE_SHORT%" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <base href="/">
-    <title>%REACT_APP_PAGE_TITLE%</title>
+    <title>%VITE_APP_TITLE_SHORT%</title>
     <script src='/config/env.js'></script>
     <script type="module" src="src/index"></script>
   </head>

package.json

@@ -51,6 +51,7 @@
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.0.2",
     "immer": "^10.1.1",
+    "jwt-decode": "^4.0.0",
     "keycloak-js": "^25.0.6",
     "lodash.debounce": "^4.0.8",
     "lodash.isempty": "^4.4.0",
@@ -60,6 +61,7 @@
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
+    "react-oidc-context": "^3.2.0",
     "react-router-dom": "^6.28.0",
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.3.11",

src/App.tsx

@@ -1,25 +1,54 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { ThemeProvider, GlobalStyle } from "@amsterdam/asc-ui"
 import { BrowserRouter } from "react-router-dom"
-import KeycloakProvider from "app/state/auth/keycloak/KeycloakProvider"
-import initializedCallback from "app/state/auth/keycloak/initializedCallback"
+import { hasAuthParams, useAuth } from "react-oidc-context"
 import Router from "app/routing/components/Router"
 import FlashMessageProvider from "app/state/flashMessages/FlashMessageProvider"
 import ApiProvider from "app/state/rest/provider/ApiProvider"
 import ValueProvider from "app/state/context/ValueProvider"
-import isLocalDevelopment from "app/state/auth/keycloak/isLocalDevelopment"
 import PageTitle from "app/routing/components/PageTitle"
+// import { env } from "app/config/env"
+import { LoadingScreenBasic, FullScreenWrapper } from "app/components/shared/loading"
 
+const App = () => {
+  const auth = useAuth()
+  const [hasTriedSignin, setHasTriedSignin] = useState(false)
 
-const App = () => (
-  <React.Fragment>
-    <PageTitle />
-    <ThemeProvider>
-      <GlobalStyle />
-      <KeycloakProvider
-        shouldInitialize={ isLocalDevelopment === false }
-        initializedCallback={ initializedCallback }
-      >
+  useEffect(() => {
+    if (
+      !hasAuthParams() &&
+      !auth.isAuthenticated &&
+      !auth.activeNavigator &&
+      !auth.isLoading &&
+      !hasTriedSignin
+    ) {
+      // TODO: Redirect to the current URL after login
+      // Redirect uri must be change to enable this: http://localhost:2999/*  ?
+      // auth.signinRedirect({
+      //   redirect_uri: `${ env.VITE_OIDC_REDIRECT_URL }${ window.location.pathname }`
+      // })
+      auth.signinRedirect()
+      setHasTriedSignin(true)
+    }
+  }, [auth, hasTriedSignin])
+
+  if (auth.isLoading) {
+    return <LoadingScreenBasic/>
+  }
+
+  if (auth.error) {
+    return <FullScreenWrapper>Oops... {auth.error.message}</FullScreenWrapper>
+  }
+
+  if (!auth.isAuthenticated) {
+    return <FullScreenWrapper>Sorry, het is niet gelukt om in te loggen.</FullScreenWrapper>
+  }
+
+  return (
+    <React.Fragment>
+      <PageTitle />
+      <ThemeProvider>
+        <GlobalStyle />
         <BrowserRouter>
           <FlashMessageProvider>
             <ApiProvider>
@@ -29,9 +58,9 @@ const App = () => (
             </ApiProvider>
           </FlashMessageProvider>
         </BrowserRouter>
-      </KeycloakProvider>
-    </ThemeProvider>
-  </React.Fragment>
-)
+      </ThemeProvider>
+    </React.Fragment>
+  )
+}
 
 export default App

src/app/components/addresses/ResidentsOverview/ResidentsOverview.tsx

@@ -9,12 +9,13 @@ type Props = {
 
 const ResidentsOverview: React.FC<Props> = ({ bagId }) => {
   const [data, { isBusy }] = useResidents(bagId)
+  const dataSource = (data || []) as Components.Schemas.Residents
 
   if (isBusy) {
     return <LoadingDetails numRows={4} />
   }
   return (
-    <Residents data={ data } loading={ isBusy } header />
+    <Residents data={ dataSource } header />
   )
 }
 

src/app/components/auth/OidcValues/OidcValues.tsx

@@ -0,0 +1,17 @@
+import { DefinitionList } from "@amsterdam/wonen-ui"
+import { useDecodedToken } from "app/state/auth/oidc/useDecodedToken" 
+
+
+const OidcValues: React.FC = () => {
+  const decodedToken = useDecodedToken()
+
+  const values = decodedToken ? {
+    "Voornaam": decodedToken?.given_name,
+    "Achternaam": decodedToken?.family_name,
+    "E-mail": decodedToken?.unique_name
+  } : {}
+
+  return <DefinitionList data={ values } />
+}
+
+export default OidcValues

src/app/components/case/CaseDetails/ChangeHousingCorporation/ChangeHousingCorporation.tsx

@@ -4,7 +4,7 @@ import { useCorporations, useAddresses, useCase } from "app/state/rest"
 import ChangeableItem from "../ChangeableItem/ChangeableItem"
 import Modal, { ModalBlock } from "app/components/shared/Modal/Modal"
 import ChangeHousingCorporationForm from "./ChangeHousingCorporationForm"
-import SpinnerWrapper from "app/components/shared/SpinnerWrapper/SpinnerWrapper"
+import { SpinnerWrapper } from "app/components/shared/loading"
 
 type Props = {
   housingCorporationId?: Components.Schemas.HousingCorporation["id"] | null

src/app/components/case/Documents/DocumentsTable/TableActions/DownloadDocument.tsx

@@ -2,7 +2,7 @@ import { Button, Spinner } from "@amsterdam/asc-ui"
 import { Download } from "@amsterdam/asc-assets"
 import { makeApiUrl } from "app/state/rest/hooks/utils/apiUrl"
 import { useState } from "react"
-import useKeycloak from "app/state/auth/keycloak/useKeycloak"
+import { useAuth } from "react-oidc-context"
 
 type Props = {
   record: any
@@ -12,14 +12,15 @@ type Props = {
 const DownloadDocument: React.FC<Props> = ({ record, size = 20 }) => {
   const [loading, setLoading] = useState(false)
   const apiUrl = makeApiUrl("documents", record.id, "download")
-  const keycloak = useKeycloak()
+  const auth = useAuth()
 
   const downloadFile = async () => {
     setLoading(true)
+    const token = auth.user?.id_token
     fetch(apiUrl, {
       method: "GET",
       headers: {
-        "Authorization": `Bearer ${ keycloak.token }`
+        "Authorization": `Bearer ${ token }`
       }
     })
     .then((response) => {

src/app/components/layouts/DefaultLayout/DefaultLayout.tsx

@@ -7,6 +7,7 @@ import FlashMessages from "app/components/layouts/FlashMessages/FlashMessages"
 import UserInfo from "app/components/shared/UserInfo/UserInfo"
 import SkipLinks from "app/components/shared/SkipLinks/SkipLinks"
 import BreadCrumbsWrap from "app/components/shared/BreadCrumbs/BreadCrumbsWrap"
+import { env } from "app/config/env"
 
 type Props = {
   showSearchButton?: boolean
@@ -43,7 +44,7 @@ const DefaultLayout: React.FC<Props> = ({ showSearchButton = true, children }) =
       <Header
         tall
         fullWidth={ false }
-        title="Amsterdamse Zaak Administratie"
+        title={`${ env.VITE_APP_TITLE ?? "Amsterdamse Zaak Administratie" } ${ env.VITE_APP_ENV_SHORT }`}
         homeLink={ to("/") }
         navigation={
           <MenuWrap>

src/app/components/shared/Modal/ConfirmModal.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { Button, Paragraph } from "@amsterdam/asc-ui"
 
 import Modal, { ModalBlock } from "./Modal"
-import SpinnerButton from "app/components/shared/SpinnerButton/SpinnerButton"
+import { SpinnerButton } from "app/components/shared/loading"
 
 export type Props = {
   title: string

src/app/components/shared/UserInfo/UserDisplay.tsx

@@ -7,7 +7,7 @@ type Props = {
   onClick: () => void
 }
 
-const Div = styled.div`
+const UserWrapper = styled.div`
   padding: 12px 0 0 16px;
   vertical-align: middle;
   height: 54px;
@@ -39,20 +39,25 @@ const StyledMenuButton = styled(MenuButton)`
   padding: 12px 16px 9px;
 `
 
-const UserDisplay: React.FC<Props> = ({ name, onClick }) =>
+const UserDisplay: React.FC<Props> = ({ name, onClick }) => (
   <>
-    { name &&
-    <Div>
-      <Icon size={ 32 }><PermIdentity /></Icon>
-      <span>{ name }</span>
-    </Div>
-    }
+    {name && (
+      <UserWrapper>
+        <Icon size={32}>
+          <PermIdentity />
+        </Icon>
+        <span>{name}</span>
+      </UserWrapper>
+    )}
     <StyledMenuButton
-      tabIndex={ 0 }
-      onClick={ onClick }
-      iconLeft={ <Logout/> }
+      tabIndex={0}
+      onClick={onClick}
+      iconLeft={<Logout />}
       title="Uitloggen"
-      iconSize={ 24 }
-    >Uitloggen</StyledMenuButton>
+      iconSize={24}
+    >
+      Uitloggen
+    </StyledMenuButton>
   </>
+)
 export default UserDisplay