Remove oidc-client

Author: andreaskienle

frontend-config.json

@@ -1,11 +1,5 @@
 {
-  "backendUrl": "http://localhost:3000",
   "gatewayUrl": "http://localhost:3000",
   "landscape": "LOCAL",
-  "documentationBaseUrl": "http://localhost:3000",
-  "oidcConfig": {
-    "clientId": "clientId",
-    "issuerUrl": "issuer-url",
-    "scopes": []
-  }
+  "documentationBaseUrl": "http://localhost:3000"
 }

package-lock.json

@@ -43,13 +43,11 @@
     "i18next": "^25.0.0",
     "javascript-time-ago": "^2.5.11",
     "js-yaml": "^4.1.0",
-    "oidc-client-ts": "^3.1.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.1",
-    "react-oidc-context": "^3.2.0",
     "react-router-dom": "^7.2.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-time-ago": "^7.3.3",

package.json

@@ -117,12 +117,6 @@
     "columnEmailHeader": "Email",
     "columnRoleHeader": "Role"
   },
-  "SessionExpiringDialog": {
-    "dialogHeader": "Your session is expiring soon...",
-    "signOutButton": "Sign Out",
-    "stayButton": "Stay Signed In",
-    "sessionText": "Your session expires soon and you will be signed out automatically. To continue working, press 'Stay Signed in'."
-  },
   "IllustratedError": {
     "titleText": "Something went wrong",
     "subtitleText": "Contact admins for help"

public/locales/en.json

@@ -52,18 +52,17 @@ async function authPlugin(fastify) {
   });
 
 
-  fastify.get("/auth/status", async (req, reply) => {
-    const isAuthenticated = Boolean(req.session.get("accessToken"));
-    reply.send({ isAuthenticated });
-  });
-
+  fastify.get("/auth/me", async (req, reply) => {
+    const accessToken = req.session.get("accessToken");
+    const userInfo = req.session.get("userInfo");
 
-  fastify.get("/auth/user", async (req, reply) => {
-    reply.send(req.session.get("userInfo"));
+    const isAuthenticated = Boolean(accessToken);
+    const user = isAuthenticated ? userInfo : null;
+    reply.send({ isAuthenticated, user });
   });
 
 
-  fastify.get("/auth/logout", async (_req, reply) => {
+  fastify.post("/auth/logout", async (_req, reply) => {
     // TODO: Idp sign out flow
     //_req.session.delete();                  // remove payload
     reply.clearCookie(COOKIE_NAME_ONBOARDING, { path: "/" });

server/routes/auth.js

@@ -1,17 +1,14 @@
 import AppRouter from './AppRouter';
 import { useAuth } from './spaces/onboarding/auth/AuthContext.tsx';
 import '@ui5/webcomponents-icons/dist/AllIcons.d.ts';
-import { useEffect, useState } from 'react';
-import { SessionExpiringDialog } from './components/Dialogs/SessionExpiringDialog.tsx';
+import { useEffect } from 'react';
 import { useFrontendConfig } from './context/FrontendConfigContext.tsx';
 import { useTranslation } from 'react-i18next';
+import LoginView from './views/Login.tsx';
 
 function App() {
   const auth = useAuth();
-  const [dialogSessionExpiringIsOpen, setDialogSessionExpiringIsOpen] =
-    useState(false);
   const { t } = useTranslation();
-
   const frontendConfig = useFrontendConfig();
 
   useEffect(() => {
@@ -25,27 +22,10 @@ function App() {
   }
 
   if (!auth.isAuthenticated) {
-    return (
-      <>
-        {/**<LoginView />**/}
-        <button onClick={() => auth.login()}>Sign In</button>
-      </>
-    );
+    return <LoginView />;
   }
 
-  return (
-    <>
-      <SessionExpiringDialog
-        isOpen={dialogSessionExpiringIsOpen}
-        setIsOpen={setDialogSessionExpiringIsOpen}
-      />
-      <div>
-        {auth.isAuthenticated ? 'AUTHED' : 'NOT AUTHED'}
-        <button onClick={() => auth.logout()}>Sign Out</button>
-      </div>
-      <AppRouter />
-    </>
-  );
+  return <AppRouter />;
 }
 
 export default App;

src/App.tsx

@@ -1,20 +1,12 @@
 import { ApiConfigProvider } from '../Shared/k8s/index.ts';
 import { Outlet } from 'react-router-dom';
-import { useAuth } from 'react-oidc-context';
 import { generateCrateAPIConfig } from '../../lib/api/types/apiConfig.ts';
-import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
 
 // ApiConfigWrapper is a component that provides the ApiConfigProvider with the oidc access token from the oidc context.
 export default function ApiConfigWrapper() {
-  const auth = useAuth();
-  const token = !auth.isAuthenticated ? '' : auth.user?.access_token;
-  const { backendUrl } = useFrontendConfig();
-
   return (
     <>
-      <ApiConfigProvider
-        apiConfig={generateCrateAPIConfig(backendUrl, token ?? '')}
-      >
+      <ApiConfigProvider apiConfig={generateCrateAPIConfig()}>
         <Outlet />
       </ApiConfigProvider>
     </>

src/components/Core/ApiConfigWrapper.tsx

@@ -11,7 +11,7 @@ import {
   ShellBarDomRef,
   Ui5CustomEvent,
 } from '@ui5/webcomponents-react';
-import { useAuth } from 'react-oidc-context';
+import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx';
 import { RefObject, useEffect, useRef, useState } from 'react';
 import { ShellBarProfileClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
@@ -59,7 +59,7 @@ export function ShellBarComponent() {
         className={styles.TestShellbar}
         profile={
           <Avatar
-            initials={generateInitialsForEmail(auth.user?.profile.email)}
+            initials={generateInitialsForEmail(auth.user?.email)}
             size="XS"
           />
         }
@@ -123,7 +123,7 @@ const ProfilePopover = ({
           icon="log"
           onClick={() => {
             setOpen(false);
-            auth.removeUser();
+            void auth.logout();
           }}
         >
           {t('ShellBar.signOutButton')}

src/components/Core/ShellBar.tsx

@@ -8,11 +8,10 @@ import {
 } from './CreateProjectWorkspaceDialog.tsx';
 
 import { useToast } from '../../context/ToastContext.tsx';
-import { useAuthSubject } from '../../lib/oidc/useUsername.ts';
+import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx';
 import { MemberRoles } from '../../lib/api/types/shared/members.ts';
 
 import { useTranslation } from 'react-i18next';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
@@ -46,10 +45,10 @@ export function CreateProjectDialogContainer({
       members: [],
     },
   });
-
-  const username = useAuthSubject();
-
   const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const username = user?.email;
 
   const clearForm = useCallback(() => {
     resetField('name');

src/components/Dialogs/CreateProjectDialogContainer.tsx

@@ -17,7 +17,7 @@ import {
 import { projectnameToNamespace } from '../../utils';
 import { ListWorkspaces } from '../../lib/api/types/crate/listWorkspaces';
 import { useToast } from '../../context/ToastContext.tsx';
-import { useAuthSubject } from '../../lib/oidc/useUsername.ts';
+import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx';
 import { Member, MemberRoles } from '../../lib/api/types/shared/members.ts';
 import { useTranslation } from 'react-i18next';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -56,10 +56,10 @@ export function CreateWorkspaceDialogContainer({
       members: [],
     },
   });
-
-  const username = useAuthSubject();
-
   const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const username = user?.email;
 
   const clearForm = useCallback(() => {
     resetField('name');