Amsterdam · remyvdwereld · Dec 8, 2024 · Dec 9, 2024 · Dec 16, 2024 · Dec 18, 2024
diff --git a/.env b/.env
@@ -1,12 +1,14 @@
-# NOTE: Variables need to be prefixed using `REACT_APP_`:
-# https://create-react-app.dev/docs/adding-custom-environment-variables/
+############################# Vite #############################
 
 # GATEWAY
-REACT_APP_GATEWAY=http://localhost:8000/api/v1/
+VITE_API_URL=http://localhost:8000/api/v1/
 
-# AUTHENTICATION
-REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
-REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/
-REACT_APP_CLIENT_ID=wonen-top-frontend
+# General
+VITE_APP_TITLE="Toezicht op pad"
+VITE_APP_TITLE_SHORT=TOP
+VITE_ENVIRONMENT_SHORT=LOCAL
 
-REACT_APP_ENV_ABBR=LOCAL
+# ENTRA-ID
+VITE_OIDC_CLIENT_ID=14c4257b-bcd1-4850-889e-7156c9efe2ec
+VITE_OIDC_REDIRECT_URL=http://localhost:3000
+VITE_OIDC_OBO_SCOPE_BRP=api://c53de0e2-ae05-43aa-9852-31adb9ad7489/wonen
diff --git a/.env.acceptance b/.env.acceptance
@@ -1,12 +1,14 @@
-# NOTE: Variables need to be prefixed using `REACT_APP_`:
-# https://create-react-app.dev/docs/adding-custom-environment-variables/
+############################# Vite #############################
 
 # GATEWAY
-REACT_APP_GATEWAY=https://acc.api.top.amsterdam.nl/api/v1/
+VITE_API_URL=https://acc.api.top.amsterdam.nl/api/v1/
 
-# AUTHENTICATION Keycloak
-REACT_APP_KEYCLOAK_REALM=datapunt-ad-acc
-REACT_APP_AUTH_URL=https://acc.iam.amsterdam.nl/auth/
-REACT_APP_CLIENT_ID=wonen-top-frontend
+# General
+VITE_APP_TITLE="Toezicht op pad"
+VITE_APP_TITLE_SHORT=TOP
+VITE_ENVIRONMENT_SHORT=ACC
 
-REACT_APP_ENV_ABBR=Acceptatie
+# ENTRA-ID
+VITE_OIDC_CLIENT_ID=14c4257b-bcd1-4850-889e-7156c9efe2ec
+VITE_OIDC_REDIRECT_URL=http://localhost:3000
+VITE_OIDC_OBO_SCOPE_BRP=api://c53de0e2-ae05-43aa-9852-31adb9ad7489/wonen
diff --git a/.env.ontwikkel b/.env.ontwikkel
@@ -1,12 +1,14 @@
-# NOTE: Variables need to be prefixed using `REACT_APP_`:
-# https://create-react-app.dev/docs/adding-custom-environment-variables/
+############################# Vite #############################
 
 # GATEWAY
-REACT_APP_GATEWAY=https://api.top.woon-o.azure.amsterdam.nl/api/v1/
+VITE_API_URL=https://api.top.woon-o.azure.amsterdam.nl/api/v1/
 
-# AUTHENTICATION
-REACT_APP_KEYCLOAK_REALM=salmagundi-azure-test
-REACT_APP_AUTH_URL=https://iam.amsterdam.nl/auth/
-REACT_APP_CLIENT_ID=top-woon-o-azure
+# General
+VITE_APP_TITLE="Toezicht op pad"
+VITE_APP_TITLE_SHORT=TOP
+VITE_ENVIRONMENT_SHORT=ONT
 
-REACT_APP_ENV_ABBR=Ontwikkel
+# ENTRA-ID
+VITE_OIDC_CLIENT_ID=14c4257b-bcd1-4850-889e-7156c9efe2ec
+VITE_OIDC_REDIRECT_URL=http://localhost:3000
+VITE_OIDC_OBO_SCOPE_BRP=api://c53de0e2-ae05-43aa-9852-31adb9ad7489/wonen
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -7,12 +7,6 @@ services:
     ports:
       - "7000:7000"
     environment:
-      - REACT_APP_TEST_ENV=ThisShouldBeSet
-      - REACT_APP_GATEWAY=https://acc.api.top.amsterdam.nl/api/v1/
-      - REACT_APP_KEYCLOAK_REALM=test_realm
-      - REACT_APP_AUTH_URL=https://iam.amsterdam.nl/auth/
-      - REACT_APP_CLIENT_ID=wonen-top-frontend
-      - REACT_APP_BASEPATH=/
-      - REACT_APP_SENTRY_ENV=development
-      - REACT_APP_ENV_ABBR=DEV/ACC
+      - VITE_API_URL=https://acc.api.top.amsterdam.nl/api/v1/
+      - VITE_ENVIRONMENT_SHORT=DEV/ACC
 
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="nl">
   <head>
     <meta charset="utf-8" />
-    <meta name="description" content="Toezicht op pad" />
+    <meta name="description" content=%VITE_APP_TITLE% />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="mobile-web-app-capable" content="yes" />
@@ -19,7 +19,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <!-- Title and Base URL -->
-    <title>Toezicht op pad</title>
+    <title>%VITE_APP_TITLE%</title>
     <base href="/" />
 
     <!-- Main entry for Vite React application -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,8 +50,7 @@
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
     "immer": "^10.1.1",
-    "jwt-decode": "^3.1.2",
-    "keycloak-js": "^25.0.6",
+    "jwt-decode": "^4.0.0",
     "lodash.difference": "^4.5.0",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
@@ -62,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",
     "styled-components": "^5.3.11",
     "typescript": "5.6.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,38 +1,73 @@
-import React from "react"
-import { GlobalStyle, ThemeProvider } from "@amsterdam/asc-ui"
+/* eslint-disable no-restricted-globals */
+import { useEffect, useState } from "react"
+import { Button } from "@amsterdam/asc-ui"
 import { BrowserRouter } from "react-router-dom"
+import { useAuth, hasAuthParams } from "react-oidc-context"
 import Router from "./app/features/shared/routing/Router"
 import ApiProvider from "./app/state/rest/provider/ApiProvider"
-import KeycloakProvider from "app/state/auth/keycloak/KeycloakProvider"
-import initializedCallback from "app/state/auth/keycloak/initializedCallback"
 import AnonymousProvider from "./app/state/anonymous/AnonymousProvider"
 import Anonymous from "./app/state/anonymous/Anonymous"
 import NoteWizardProvider from "./app/features/visits/components/organisms/NoteWizard/NoteWizardProvider"
 import SearchFormProvider from "./app/features/shared/components/organisms/SearchForm/SearchFormProvider"
 import ErrorProvider from "./app/state/error/ErrorProvider"
+import { LoadingScreen, FullScreenWrapper } from "./app/features/login/pages/LoadingScreen"
 
-function App () {
+const App = () => {
+  const auth = useAuth()
+  const [hasTriedSignin, setHasTriedSignin] = useState(false)
+
+  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:3000/*  ?
+      // auth.signinRedirect({
+      //   redirect_uri: `${ env.VITE_OIDC_REDIRECT_URL }${ window.location.pathname }`
+      // })
+      auth.signinRedirect()
+      setHasTriedSignin(true)
+    }
+  }, [auth, hasTriedSignin])
+
+  if (auth.isLoading) {
+    return <LoadingScreen/>
+  }
+
+  if (auth.error) {
+    // TODO add a button to retry
+    return (
+      <FullScreenWrapper>
+        Oops... {auth.error.message}
+        <Button variant="primary" onClick={ () => location.href = "/" } style={{ marginTop: 24 }}>Probeer opnieuw</Button>
+      </FullScreenWrapper>
+    )
+  }
+
+  if (!auth.isAuthenticated) {
+    return <FullScreenWrapper>Sorry, het is niet gelukt om in te loggen.</FullScreenWrapper>
+  }
+
   return (
-    <ThemeProvider>
-      <GlobalStyle />
-      <KeycloakProvider initializedCallback={ initializedCallback }>
-        <BrowserRouter>
-          <ErrorProvider>
-            <ApiProvider>
-              <AnonymousProvider>
-                <NoteWizardProvider>
-                  <SearchFormProvider>
-                    <Anonymous />
-                    <Router />
-                    <div id="modal-root" />
-                  </SearchFormProvider>
-                </NoteWizardProvider>
-              </AnonymousProvider>
-            </ApiProvider>
-          </ErrorProvider>
-        </BrowserRouter>
-      </KeycloakProvider>
-    </ThemeProvider>
+    <BrowserRouter>
+      <ErrorProvider>
+        <ApiProvider>
+          <AnonymousProvider>
+            <NoteWizardProvider>
+              <SearchFormProvider>
+                <Anonymous />
+                <Router />
+                <div id="modal-root" />
+              </SearchFormProvider>
+            </NoteWizardProvider>
+          </AnonymousProvider>
+        </ApiProvider>
+      </ErrorProvider>
+    </BrowserRouter>
   )
 }
 

diff --git a/src/app/features/cases/components/organisms/CaseDetail/sections/Residence.tsx b/src/app/features/cases/components/organisms/CaseDetail/sections/Residence.tsx
@@ -21,7 +21,6 @@ const Residence: React.FC<Props> = ({ caseId }) => {
   const isWoning = !isWoonboot
   const woningTitle = isWoning ? "Woning" : "Ligplaats"
 
-  console.log("bagData", bagData?.identificatie)
   // Woning
   const woningBestemming = bagData?.gebruiksdoelOmschrijvingen && bagData?.gebruiksdoelOmschrijvingen.length ? bagData?.gebruiksdoelOmschrijvingen.join(", ") : undefined
   const wozSoortObjectOmschrijving = bagData?.wozSoortObjectOmschrijving

diff --git a/...login/components/pages/login/AuthPage.tsx → src/app/features/login/pages/AuthPage.tsx b/...login/components/pages/login/AuthPage.tsx → src/app/features/login/pages/AuthPage.tsx
@@ -3,20 +3,19 @@ import { Alert, Heading, Paragraph } from "@amsterdam/asc-ui"
 
 import DefaultLayout from "app/features/shared/components/layouts/DefaultLayout/DefaultLayout"
 import DefinitionList from "app/features/shared/components/molecules/DefinitionList/DefinitionList"
-import useKeycloak from "app/state/auth/keycloak/useKeycloak"
 import { useIsAuthorized } from "app/state/rest"
 import Spacing from "app/features/shared/components/atoms/Spacing/Spacing"
+import { useDecodedToken } from "app/state/auth/oidc/useDecodedToken"
 
 const AuthPage: React.FC = () => {
-  const keycloak = useKeycloak()
   const { data } = useIsAuthorized()
+  const decodedToken = useDecodedToken()
   const showUnauthorized = data?.isAuthorized === false
 
   const values = {
-    Naam: keycloak.tokenParsed?.name ?? "–",
-    "E-mail": keycloak.tokenParsed?.email ?? "–",
-    Gebruikersnaam: keycloak.tokenParsed?.preferred_username ?? "–",
-    Groepen: keycloak.realmAccess?.roles.join(", ") ?? "–"
+    "Voornaam": decodedToken?.given_name ?? "–",
+    "Achternaam": decodedToken?.family_name ?? "–",
+    "E-mail": decodedToken?.unique_name ?? "–"
   }
 
   return (
@@ -36,11 +35,11 @@ const AuthPage: React.FC = () => {
         </Paragraph>
         <Paragraph>
           Neem contact op met je teamleider of de afdeling Wonen om na te gaan of je toegang kunt krijgen.
-          De juiste Keycloak-groepen worden dan toegevoegd aan je ADW-account.
+          De juiste rollen worden dan toegevoegd aan je ADW-account.
         </Paragraph>
       </>
       }
-      <Heading forwardedAs="h2">Keycloak-account</Heading>
+      <Heading forwardedAs="h2">Micrososft Entra-ID account</Heading>
       <DefinitionList values={ values } />
     </DefaultLayout>
   )