👌 [#390] Make context provider specific to OIDC

frontend/src/App.tsx

@@ -28,9 +28,9 @@ import { useAsync } from "react-use";
 
 import "./App.css";
 import { User, getOIDCInfo, whoAmI } from "./lib/api/auth";
-import ExtraConfigContext, {
-  OidcInfo,
-} from "./lib/contexts/ExtraConfigContext";
+import OidcConfigContext, {
+  OidcConfigContextType,
+} from "./lib/contexts/OidcConfigContext";
 import { formatUser } from "./lib/format/user";
 
 function App() {
@@ -41,7 +41,7 @@ function App() {
   const handle = match?.handle as Record<string, unknown>;
 
   const [user, setUser] = useState<User | null>(null);
-  const [oidcInfo, setOidcInfo] = useState<OidcInfo>({
+  const [oidcInfo, setOidcInfo] = useState<OidcConfigContextType>({
     enabled: false,
     loginUrl: "",
   });
@@ -162,11 +162,11 @@ function App() {
           ],
         }}
       >
-        <ExtraConfigContext.Provider value={{ oidc: oidcInfo }}>
+        <OidcConfigContext.Provider value={oidcInfo}>
           <ModalService>
             <Outlet />
           </ModalService>
-        </ExtraConfigContext.Provider>
+        </OidcConfigContext.Provider>
       </NavigationContext.Provider>
     </div>
   );

frontend/src/lib/api/auth.ts

@@ -1,5 +1,5 @@
 import { cacheDelete, cacheMemo } from "../cache/cache";
-import { OidcInfo } from "../contexts/ExtraConfigContext";
+import { OidcConfigContextType } from "../contexts/OidcConfigContext";
 import { request } from "./request";
 
 export type User = {
@@ -54,7 +54,7 @@ export async function whoAmI() {
 export async function getOIDCInfo() {
   return cacheMemo("getOIDCInfo", async () => {
     const response = await request("GET", "/oidc-info");
-    const promise: Promise<OidcInfo> = response.json();
+    const promise: Promise<OidcConfigContextType> = response.json();
     return promise;
   });
 }

frontend/src/lib/contexts/OidcConfigContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type OidcConfigContextType = {
+  enabled: boolean;
+  loginUrl: string;
+};
+
+const OidcConfigContext: React.Context<OidcConfigContextType> = createContext({
+  enabled: false,
+  loginUrl: "",
+} as OidcConfigContextType);
+
+export default OidcConfigContext;

frontend/src/pages/login/Login.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 
 import { ReactRouterDecorator } from "../../../.storybook/decorators";
-import ExtraConfigContext from "../../lib/contexts/ExtraConfigContext";
+import OidcConfigContext from "../../lib/contexts/OidcConfigContext";
 import { LoginPage } from "./Login";
 
 const meta: Meta<typeof LoginPage> = {
@@ -23,16 +23,14 @@ export const LoginPageStory: Story = {
 
 export const LoginPageWithOIDC: Story = {
   render: (args) => (
-    <ExtraConfigContext.Provider
+    <OidcConfigContext.Provider
       value={{
-        oidc: {
-          enabled: true,
-          loginUrl: "http://backend.nl/oidc/authenticate",
-        },
+        enabled: true,
+        loginUrl: "http://backend.nl/oidc/authenticate",
       }}
     >
       <LoginPage />
-    </ExtraConfigContext.Provider>
+    </OidcConfigContext.Provider>
   ),
   play: async (context) => {
     const canvas = within(context.canvasElement);

frontend/src/pages/login/Login.tsx

@@ -7,7 +7,7 @@ import {
 import { useContext } from "react";
 import { useActionData, useSubmit } from "react-router-dom";
 
-import ExtraConfigContext from "../../lib/contexts/ExtraConfigContext";
+import OidcConfigContext from "../../lib/contexts/OidcConfigContext";
 import "./Login.css";
 
 export type LoginProps = React.ComponentProps<"main"> & {
@@ -30,7 +30,8 @@ const makeRedirectUrl = (oidcLoginUrl: string) => {
  * Login page
  */
 export function LoginPage({ ...props }: LoginProps) {
-  const { oidc } = useContext(ExtraConfigContext);
+  const { enabled: oidcEnabled, loginUrl: oidcLoginUrl } =
+    useContext(OidcConfigContext);
 
   const fields = [
     {
@@ -60,8 +61,8 @@ export function LoginPage({ ...props }: LoginProps) {
   const { detail, nonFieldErrors, ...errors } = formErrors;
 
   const oidcProps: Partial<LoginTemplateProps> = {};
-  if (oidc?.enabled) {
-    oidcProps.urlOidcLogin = makeRedirectUrl(oidc.loginUrl);
+  if (oidcEnabled) {
+    oidcProps.urlOidcLogin = makeRedirectUrl(oidcLoginUrl);
     oidcProps.labelOidcLogin = "Organisatie login";
   }