Merge pull request #2705 from Amsterdam/feature/131931-entra-id

131931 - Implement Entra-ID

.env.acceptance

@@ -1,15 +1,29 @@
-REACT_APP_ENVIRONMENT=acceptance
+# Keycloak
+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
 
-REACT_APP_API_HOST=https://api.wonen.zaken.woon-a.azure.amsterdam.nl/
+# Environment
+VITE_ENVIRONMENT=acceptance
+VITE_ENVIRONMENT_SHORT=ACC
 
-# AZA
-REACT_APP_AZA_FE=https://wonen.zaken.woon-a.azure.amsterdam.nl/
+# API
+VITE_API_URL=https://acc.api.wonen.zaken.amsterdam.nl/api/v1/
+
+# AZA Frontend
+VITE_AZA_FRONTEND_URL=https://acc.wonen.zaken.amsterdam.nl
 
 # TON
-REACT_APP_API_HOST_TON=https://api.ton.woon-a.azure.amsterdam.nl/
-REACT_APP_HOST_TON=https://ton.woon-a.azure.amsterdam.nl/
+VITE_TON_API_URL=https://acc.api.ton.amsterdam.nl/
+VITE_TON_FRONTEND_URL=https://acc.ton.amsterdam.nl/
 
-# Keycloak
-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
+# 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,27 +1,32 @@
-# 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
-
-# Local API
-REACT_APP_API_HOST=http://localhost:8080/
-REACT_APP_API_PATH=api/v1/
-
 # Keycloak
 REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/  # wonen-zaaksysteem-frontend client only exist for iam.amsterdam (prod)
 REACT_APP_KEYCLOAK_CLIENT_ID=wonen-zaaksysteem-frontend
 REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
 
-# AZA
-REACT_APP_AZA_FE=http://localhost:2999/
+############################# Vite #############################
+
+# General
+VITE_APP_TITLE="Amsterdamse Zaak Administratie"
+VITE_APP_TITLE_SHORT=AZA
+
+# Environment
+VITE_ENVIRONMENT=local
+VITE_ENVIRONMENT_SHORT=LOCAL
+
+# API
+VITE_API_URL=http://localhost:8080/api/v1/
+
+# AZA Frontend
+VITE_AZA_FRONTEND_URL=http://localhost:2999/
 
 # TON
-REACT_APP_API_HOST_TON=https://acc.api.ton.amsterdam.nl/
-REACT_APP_HOST_TON=https://acc.ton.amsterdam.nl/
+VITE_TON_API_URL=https://acc.api.ton.amsterdam.nl/
+VITE_TON_FRONTEND_URL=https://acc.ton.amsterdam.nl/
+
+# 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
 
 # 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"

.env.production

@@ -1,24 +1,26 @@
-# NOTE: Variables need to be prefixed using REACT_APP_:
-# https://create-react-app.dev/docs/adding-custom-environment-variables/
-
 # NOTE: These variables are used using "npm run build"
 
-REACT_APP_ENVIRONMENT=production
-
-REACT_APP_API_HOST=https://api.wonen.zaken.amsterdam.nl/
-REACT_APP_API_PATH=api/v1/
+# Keycloak
 REACT_APP_AUTH_URL=https://iam.amsterdam.nl/auth/
 
+############################# Vite #############################
+
+# General
+VITE_APP_TITLE="Amsterdamse Zaak Administratie"
+VITE_APP_TITLE_SHORT=AZA
 
-# AZA
-REACT_APP_AZA_FE=https://wonen.zaken.amsterdam.nl/
+# Environment
+VITE_ENVIRONMENT=production
+
+# API
+VITE_API_URL=https://api.wonen.zaken.amsterdam.nl/api/v1/
+
+# AZA Frontend
+VITE_AZA_FRONTEND_URL=https://wonen.zaken.amsterdam.nl/
 
 # TON
-REACT_APP_API_HOST_TON=https://api.ton.amsterdam.nl/
-REACT_APP_HOST_TON=https://ton.amsterdam.nl/
+VITE_TON_API_URL=https://api.ton.amsterdam.nl/
+VITE_TON_FRONTEND_URL=https://ton.amsterdam.nl/
 
 # Keycloak
 REACT_APP_KEYCLOAK_REALM=datapunt-ad
-
-# Translations
-REACT_APP_PAGE_TITLE="Amsterdamse Zaak Administratie | Gemeente Amsterdam"

README.md

@@ -26,7 +26,7 @@
 - NPM (https://www.npmjs.com/settings/amsterdam/packages) OIS Slack #frontend-amsterdam
 
 ### Connecting to Acceptance API
-- It's possible to connect a locally run zaken-frontend to Acceptance API. Add `REACT_APP_API_HOST=https://acc.api.wonen.zaken.amsterdam.nl/api/v1/` to `.env.development.local`. See [.env.development](https://github.com/Amsterdam/zaken-frontend/blob/main/.env.development) for examples.
+- It's possible to connect a locally run zaken-frontend to Acceptance API. Add `VITE_API_URL=https://acc.api.wonen.zaken.amsterdam.nl/api/v1/` to `.env.development.local`. See [.env.development](https://github.com/Amsterdam/zaken-frontend/blob/main/.env.development) for examples.
 
 ## Deployment
 

entrypoint.sh

@@ -2,16 +2,15 @@
 
 set -x
 
-# This script will read all the env variables prefixed with REACT_APP on start of the container and write them to the env.js file
+# This script will read all the env variables prefixed with VITE_ on start of the container and write them to the env.js file
 # The code uses this file as the env variables instead of the .env files
 # This makes it possible to use a single build artifact/image for multiple environment
 
-echo "window.env = {" >> /var/www/application/config/env.js
 
-for var in $(printenv); do
-    if [[ $var == REACT_APP* ]]; then
-        key=$(echo $var | cut -f1 -d=)
-        value=$(echo $var | cut -f2 -d=)
+echo "window.env = {" > /var/www/application/config/env.js
+
+printenv | while IFS='=' read -r key value; do
+    if [[ $key == VITE* ]]; then
         echo "  \"$key\": \"$value\"," >> /var/www/application/config/env.js
     fi
 done

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

@@ -49,6 +49,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",
@@ -58,6 +59,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",
     "react-tooltip": "^5.28.0",
     "resize-observer-polyfill": "^1.5.1",

scripts/src/generateSwaggerSchema.ts

@@ -2,7 +2,7 @@
 import { exec } from "child_process"
 import { env } from "app/config/env"
 
-const url = `${ env.REACT_APP_API_HOST }${ env.REACT_APP_API_PATH }schema/`
+const url = `${ env.VITE_API_URL }schema/`
 exec(`dtsgen -o ./src/__generated__/apiSchema.d.ts --url ${ url }`,
   (error, stdout, stderr) => {
     if (error) {

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
+    ) {
+      const currentUrl = new URL(window.location.href)
+      const fullPathWithQuery = `${ currentUrl.pathname }${ currentUrl.search }`
+
+      auth.signinRedirect({        
+        url_state: fullPathWithQuery 
+      })
+      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/AddressSuffixSwitcher/ShowOtherAddressesButton.tsx

@@ -27,7 +27,7 @@ const renderIcon = (index: Index) => {
     default:
       return <StyledIcon
         size={ 32 }
-        iconUrl={ `${ env.REACT_APP_AZA_FE }/icons/chevron_up_down.svg` }
+        iconUrl={ `${ env.VITE_AZA_FRONTEND_URL }/icons/chevron_up_down.svg` }
         inline
       />
   }