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/Routes.tsx

@@ -1,7 +1,9 @@
+import { OidcSecure } from "@axa-fr/react-oidc";
 import { FunctionComponent } from "react";
 import { Route, Routes } from "react-router-dom";
 import { AboutContainer } from "./features/about/About";
 import { CounterContainer } from "./features/examples/counter/Counter";
+import { Tenders } from "./features/examples/tenders/Tenders";
 import { HomeContainer } from "./features/home/Home";
 type Props = {};
 
@@ -9,15 +11,25 @@ export const ROUTE_KEYS = {
   home: "",
   about: "about",
   counter: "counter",
+  tenders: "tenders",
 };
 
 export const AppRoutes: FunctionComponent<Props> = () => {
-  const { home, about, counter } = ROUTE_KEYS;
+  const { home, about, counter, tenders } = ROUTE_KEYS;
   return (
     <Routes>
       <Route path={home} element={<HomeContainer />} />
       <Route path={about} element={<AboutContainer />} />
       <Route path={counter} element={<CounterContainer />} />
+      {/* a route with authentication */}
+      <Route
+        path={tenders}
+        element={
+          <OidcSecure>
+            <Tenders />
+          </OidcSecure>
+        }
+      />
       {/* <Route index element={<Home />} /> */}
       {/* <Route path="teams" element={<Teams />}>
       <Route path=":teamId" element={<Team />} />

src/features/examples/tenders/Tenders.tsx

@@ -0,0 +1,33 @@
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {};
+
+export const Tenders: FunctionComponent<Props> = () => {
+  const [tenders, setTenders] = useState(null);
+  const [translate] = useTranslation();
+  const { accessToken } = useOidcAccessToken();
+
+  useEffect(() => {
+    // this uses the CORS proxy in our webpack setup
+    // tendersguru is mapped to "https://tenders.guru" in setupProxy.js
+    // it will strip the tendersguru part, so the full url will be: https://tenders.guru/api/ro/tenders
+    fetch("tendersguru/api/ro/tenders", {
+      // fetch's way of adding headers. Not required to access the api... but :shrug:
+      headers: new Headers({
+        Authorization: `Bearer ${accessToken}`,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setTenders(data);
+      });
+  }, [accessToken]);
+  return (
+    <>
+      <h1>{translate("nav.tenders")}</h1>
+      {tenders ? <pre>{JSON.stringify(tenders, null, 2)}</pre> : <h2>loading...</h2>}
+    </>
+  );
+};

src/index.tsx

@@ -5,6 +5,7 @@ import App from "./App";
 import { store } from "./app/store";
 import "./index.css";
 import "./infrastructure/i18n/init";
+import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
 import reportWebVitals from "./reportWebVitals";
 
@@ -14,9 +15,11 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <Loader>
-        <App />
-      </Loader>
+      <OidcProvider>
+        <Loader>
+          <App />
+        </Loader>
+      </OidcProvider>
     </Provider>
   </React.StrictMode>,
 );

src/infrastructure/config/RunTimeConfig.ts

@@ -1,4 +1,11 @@
+import { OIDCConfig } from "../sso/models/OIDCConfig";
+
 export interface RunTimeConfig {
   version: number;
   name: string;
+
+  /**
+   * Settings for the OIDC connection
+   */
+  oidc: OIDCConfig;
 }

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 />

src/infrastructure/sso/Configuration.ts

@@ -0,0 +1,14 @@
+import { OidcConfiguration } from "@axa-fr/react-oidc/dist/vanilla/oidc";
+import { Config } from "../config";
+
+const { clientId, redirectUri, silentRedirectUri, scope, url } = Config.oidc;
+
+/* eslint-disable camelcase */
+export const SSOConfiguration: OidcConfiguration = {
+  client_id: clientId,
+  redirect_uri: redirectUri,
+  silent_redirect_uri: silentRedirectUri,
+  scope,
+  authority: url,
+  service_worker_only: false,
+};

src/infrastructure/sso/OidcProvider.tsx

@@ -0,0 +1,28 @@
+import { OidcProvider as ReactOidcProvider } from "@axa-fr/react-oidc";
+import { FunctionComponent, ReactNode } from "react";
+import { AppLoader } from "../loader/appLoader";
+import { SSOConfiguration } from "./Configuration";
+import { Authenticating } from "./overrides/Authenticating";
+import { AuthenticatingError } from "./overrides/AuthenticatingError";
+import { CallBackSuccess } from "./overrides/CallBackSuccess";
+import { ServiceWorkerNotSupported } from "./overrides/ServiceWorkerNotSupported";
+import { SessionLost } from "./overrides/SessionLost";
+
+type Props = { children?: ReactNode; [x: string]: any };
+
+export const OidcProvider: FunctionComponent<Props> = ({ children, ...rest }) => {
+  return (
+    <ReactOidcProvider
+      loadingComponent={AppLoader}
+      authenticatingErrorComponent={AuthenticatingError}
+      authenticatingComponent={Authenticating}
+      sessionLostComponent={SessionLost}
+      serviceWorkerNotSupportedComponent={ServiceWorkerNotSupported}
+      callbackSuccessComponent={CallBackSuccess}
+      configuration={SSOConfiguration}
+      {...rest}
+    >
+      {children}
+    </ReactOidcProvider>
+  );
+};

src/infrastructure/sso/models/OIDCConfig.tsx

@@ -0,0 +1,31 @@
+export interface OIDCConfig {
+  /**
+   * Authority URL
+   */
+  url: string;
+
+  /**
+   * Realm to authenticate against
+   */
+  realm: string;
+
+  /**
+   * Id of this client
+   */
+  clientId: string;
+
+  /**
+   * Scope(s) that you want to request
+   */
+  scope: string;
+
+  /**
+   * URI to redirect to after successful login
+   */
+  redirectUri: string;
+
+  /**
+   * redirect uri for the silent refresh
+   */
+  silentRedirectUri: string;
+}

src/infrastructure/sso/models/SSOResult.tsx

@@ -0,0 +1,3 @@
+export interface SSOResult {
+  configurationName: string;
+}

src/infrastructure/sso/overrides/Authenticating.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const Authenticating: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Authentication in progress for {configurationName}</h1>
+    <p>You will be redirected to the login page.</p>
+  </>
+);

src/infrastructure/sso/overrides/AuthenticatingError.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const AuthenticatingError: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Error for {configurationName}</h1>
+    <p>An error occurred during authentication.</p>
+  </>
+);

src/infrastructure/sso/overrides/CallBackSuccess.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const CallBackSuccess: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Authentication complete for {configurationName}</h1>
+    <p>You will be redirected...</p>
+  </>
+);

src/infrastructure/sso/overrides/ServiceWorkerNotSupported.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const ServiceWorkerNotSupported: FunctionComponent<SSOResult> = ({ configurationName }) => (
+  <>
+    <h1>Unable to authenticate on this browser for {configurationName}</h1>
+    <p>Your browser is not configured to support Service Workers.</p>
+  </>
+);

src/infrastructure/sso/overrides/SessionLost.tsx

@@ -0,0 +1,17 @@
+import { useOidc } from "@axa-fr/react-oidc";
+import { FunctionComponent } from "react";
+import { SSOResult } from "../models/SSOResult";
+
+export const SessionLost: FunctionComponent<SSOResult> = ({ configurationName }) => {
+  const { login } = useOidc(configurationName);
+
+  return (
+    <>
+      <h1>Session timed out for {configurationName}</h1>
+      <p>Your session has expired. Please re-authenticate.</p>
+      <button type="button" onClick={() => login("/")}>
+        Login
+      </button>
+    </>
+  );
+};

src/setupProxy.js

@@ -0,0 +1,28 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+/**
+ * Create a simple proxy that automatically removes the prefix endpoint
+ * @param {*} app app to configure proxy on
+ * @param {*} endpoint endpoint you want to use for the proxy
+ * @param {*} target proxy target
+ */
+const createSimpleProxy = (app, endpoint, target) => {
+  app.use(
+    endpoint,
+    createProxyMiddleware({
+      target,
+      changeOrigin: true,
+      pathRewrite: {
+        [`^${endpoint}`]: "",
+      },
+    }),
+  );
+};
+
+/**
+ * Actual proxy configuration
+ * @param {*} app app to configure proxy on
+ */
+module.exports = function (app) {
+  createSimpleProxy(app, "/tendersguru", "https://tenders.guru");
+};