Added react-oidc (use demo/demo)

Added an example of an authentication protected page (tenders)
Added an example with the built in proxy (to combat CORS) (tendersguru)

src/infrastructure/navbar/Navbar.spec.tsx

@@ -1,18 +1,25 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { WithTestTranslations } from "../../app/tests/mocks/i18n/WithTestTranslations";
+import { OidcProvider } from "../sso/OidcProvider";
 import { WithRouter } from "../wrappers/WithRouter";
 import { Navbar } from "./Navbar";
 
 describe("Navbar container", () => {
-  it.only("renders a navigation section identified by the nav test-id", () => {
+  it.only("renders a navigation section identified by the nav test-id", async () => {
     render(
       <WithTestTranslations>
-        <WithRouter>
-          <Navbar />
-        </WithRouter>
+        {/* for simple tests where we don't need auth we don't actually have to mock responses */}
+        <OidcProvider>
+          <WithRouter>
+            <Navbar />
+          </WithRouter>
+        </OidcProvider>
       </WithTestTranslations>,
     );
-
-    expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);
+    // because of the extra loaders we wait for a result just to be sure
+    // see: https://testing-library.com/docs/guide-disappearance/
+    await waitFor(() => {
+      expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);
+    });
   });
 });

src/infrastructure/navbar/Navbar.tsx

@@ -1,3 +1,4 @@
+import { useOidc, useOidcAccessToken } from "@axa-fr/react-oidc";
 import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
 import { Trans, useTranslation } from "react-i18next";
@@ -9,6 +10,8 @@ type Props = {};
 
 export const Navbar: FunctionComponent<Props> = () => {
   const [translate, i18n] = useTranslation();
+  const { login, logout, isAuthenticated } = useOidc();
+  const { accessTokenPayload } = useOidcAccessToken();
   const { home, about, counter } = ROUTE_KEYS;
   return (
     <>
@@ -17,6 +20,13 @@ export const Navbar: FunctionComponent<Props> = () => {
         {/* trans can also be used to translate */}
         {Config.name} <Trans i18nKey="navBar.version">version:</Trans>
         {JSON.stringify(Config.version)}
+        <button
+          onClick={() => {
+            isAuthenticated ? logout() : login("/");
+          }}
+        >
+          {isAuthenticated ? `logout (${accessTokenPayload.email})` : "login"}
+        </button>
       </p>
 
       {/* This translation uses a formatter in the translation files  */}
@@ -31,6 +41,9 @@ export const Navbar: FunctionComponent<Props> = () => {
         <Link to={counter} data-testid="nav.counter">
           {translate("nav.counter")}
         </Link>
+        <Link to="/tenders" data-testid="nav.tenders">
+          {translate("nav.tenders")}
+        </Link>
         <button onClick={() => i18n.changeLanguage("en")}>en</button>
         <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />