feat: implement server-side API request service and update authentication flow in LoginModal and NavBarDropdownButton

mitchdowney · mitchdowney · commit 2aec8524664b · 2025-07-15T14:07:50.000-05:00
diff --git a/.env.example b/.env.example
@@ -1,10 +1,10 @@
 NODE_ENV=development
 
-API_PROTOCOL=http
-API_HOST=localhost
-API_PORT=1234
-API_PREFIX=/api
-API_VERSION=/v2
+NEXT_PUBLIC_API_PROTOCOL=http
+NEXT_PUBLIC_API_HOST=localhost
+NEXT_PUBLIC_API_PORT=1234
+NEXT_PUBLIC_API_PREFIX=/api
+NEXT_PUBLIC_API_VERSION=/v2
 
 # FOR LOCAL DEVELOPMENT ONLY
 # DO NOT USE IN PRODUCTION
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
+import '../styles/index.scss';
 import { cookies } from 'next/headers';
 import { getLocale } from 'next-intl/server';
-import { reqAccountGetManyPublic } from "podverse-helpers";
 import FavIcons from '../components/Head/FavIcons';
 import FontPreloads from '../components/Head/FontPreloads';
 import Manifest from '../components/Head/Manifest';
@@ -9,9 +9,10 @@ import PageWrapper from '../components/PageWrapper/PageWrapper';
 import SideBar from '../components/SideBar/SideBar';
 import WindowWrapper from '../components/Window/WindowWrapper';
 import Providers from '../providers/Providers';
-import '../styles/index.scss';
 import { toUITheme } from '../utils/theme';
 import { Modals } from '../components/Modals/Modals';
+import { getSSRApiRequestService } from '../factories/apiRequestService';
+import { DTOAccount } from 'podverse-helpers';
 
 export const metadata = {
   title: 'Podverse',
@@ -22,10 +23,24 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const [locale, cookieStore] = await Promise.all([getLocale(), cookies()]);
   const cookieTheme = cookieStore.get('theme')?.value;
   const theme = toUITheme(cookieTheme);
-  
-  const hello = await reqAccountGetManyPublic();
+
+  let jwt;
+  if (typeof window === "undefined") {
+    const cookieStore = await cookies();
+    jwt = cookieStore.get("jwt")?.value;
+  }
+  const ssrApiRequestService = getSSRApiRequestService(jwt);
+
+  const hello = await ssrApiRequestService.reqAccountGetManyPublic();
   console.log(hello);
 
+  let ssrLoggedInAccount: DTOAccount | null = null;
+  try {
+    ssrLoggedInAccount = await ssrApiRequestService.reqAuthMe();
+  } catch (error) {
+    // do nothing
+  }
+
   return (
     <html lang={locale} data-theme={theme}>
       <head>
@@ -34,7 +49,10 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <Manifest />
       </head>
       <body>
-        <Providers locale={locale} theme={theme}>
+        <Providers
+          locale={locale}
+          ssrLoggedInAccount={ssrLoggedInAccount}
+          theme={theme}>
           <WindowWrapper>
             <SideBar />
             <PageWrapper>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,6 @@
 import React from "react";
-import { getTranslations } from "next-intl/server";
 
 export default async function Home() {
-  const t = await getTranslations('_sample');
-
   return (
     <div>
       hello home
diff --git a/src/components/Auth/LoginModal.tsx b/src/components/Auth/LoginModal.tsx
@@ -6,16 +6,21 @@ import { Modal } from '../Modal/Modal'
 import { TextInput } from '../TextInput/TextInput'
 import { useModals } from '../../contexts/Modals'
 import styles from '../../styles/components/Auth/LoginModal.module.scss'
+import { apiRequestService } from '../../factories/apiRequestService';
 
 export const LoginModal: React.FC = () => {
   const { modals, closeModal } = useModals()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    // handle login logic here
-    closeModal('LoginModal')
+    try {
+      await apiRequestService.reqAuthLogin({ email, password })
+      window.location.reload();
+    } catch (err) {
+      console.error('Login failed:', err)
+    }
   }
 
   return (
diff --git a/src/components/NavBar/NavBarDropdownButton.tsx b/src/components/NavBar/NavBarDropdownButton.tsx
@@ -9,19 +9,27 @@ import DropdownMenu from "../DropdownMenu/DropdownMenu";
 import { useDropdownKeyboardNavigation } from "../../hooks/useDropdownKeyboardNavigation";
 import { ROUTES } from "../../constants/routes";
 import { useModals } from '../../contexts/Modals'
+import { apiRequestService } from "../../factories/apiRequestService";
 
 const NavBarDropdownButton: React.FC = () => {
-  const { isLoggedIn } = useContext(AccountContext);
+  const { loggedInAccount } = useContext(AccountContext);
   const { openModal } = useModals();
   const router = useRouter();
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
 
+  async function handleLogout() {
+    await apiRequestService.reqAuthLogout();
+    window.location.reload();
+  }
+
   const menuItems = [
     { label: "My Profile", onClick: () => router.push(ROUTES.MY_PROFILE) },
     { label: "Membership", onClick: () => router.push(ROUTES.MEMBERSHIP) },
     { label: "Settings", onClick: () => router.push(ROUTES.SETTINGS) },
-    { label: "Login", onClick: () => openModal('LoginModal') }
+    !!loggedInAccount
+      ? { label: "Logout", onClick: handleLogout }
+      : { label: "Login", onClick: () => openModal('LoginModal') }
   ];
 
   const {
@@ -49,7 +57,7 @@ const NavBarDropdownButton: React.FC = () => {
         onClick={() => setOpen((v) => !v)}
         onKeyDown={handleButtonKeyDown}
       >
-        {isLoggedIn ? (
+        {!!loggedInAccount ? (
           <FaUserCircle className={styles.profileIcon} />
         ) : (
           <FaRegUserCircle className={styles.profileIcon} />
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -0,0 +1,9 @@
+export const config = {
+  api: {
+    protocol: process.env.NEXT_PUBLIC_API_PROTOCOL || 'http',
+    host: process.env.NEXT_PUBLIC_API_HOST || 'localhost',
+    port: process.env.NEXT_PUBLIC_API_PORT || '1234',
+    prefix: process.env.NEXT_PUBLIC_API_PREFIX || '/api',
+    version: process.env.NEXT_PUBLIC_API_VERSION || '/v2'
+  }
+}
diff --git a/src/contexts/Account.tsx b/src/contexts/Account.tsx
@@ -1,20 +1,29 @@
+import { DTOAccount } from "podverse-helpers";
 import React, { createContext, useState, ReactNode } from "react";
 
 type AccountContextType = {
-  isLoggedIn: boolean;
-  setIsLoggedIn: (val: boolean) => void;
+  loggedInAccount: DTOAccount | null;
+  setLoggedInAccount: (val: DTOAccount | null) => void;
 };
 
 export const AccountContext = createContext<AccountContextType>({
-  isLoggedIn: false,
-  setIsLoggedIn: () => {},
+  loggedInAccount: null,
+  setLoggedInAccount: () => {},
 });
 
-export const AccountProvider = ({ children }: { children: ReactNode }) => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+type AccountProviderProps = {
+  children: ReactNode;
+  ssrLoggedInAccount?: DTOAccount | null;
+};
+
+export const AccountProvider = ({
+  children,
+  ssrLoggedInAccount = null,
+}: AccountProviderProps) => {
+  const [loggedInAccount, setLoggedInAccount] = useState<DTOAccount | null>(ssrLoggedInAccount);
 
   return (
-    <AccountContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
+    <AccountContext.Provider value={{ loggedInAccount, setLoggedInAccount }}>
       {children}
     </AccountContext.Provider>
   );
diff --git a/src/factories/apiRequestService.ts b/src/factories/apiRequestService.ts
@@ -0,0 +1,21 @@
+import { ApiRequestService } from "podverse-helpers";
+import { config } from "../config";
+
+export function getSSRApiRequestService(jwt?: string): ApiRequestService {
+  return new ApiRequestService({
+    protocol: config.api.protocol,
+    host: config.api.host,
+    port: config.api.port,
+    prefix: config.api.prefix,
+    version: config.api.version,
+    jwt,
+  });
+}
+
+export const apiRequestService = new ApiRequestService({
+  protocol: config.api.protocol,
+  host: config.api.host,
+  port: config.api.port,
+  prefix: config.api.prefix,
+  version: config.api.version
+});
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { NextIntlClientProvider } from 'next-intl';
+import { DTOAccount } from 'podverse-helpers';
 import { AccountProvider } from '../contexts/Account';
 import { ThemeProvider } from '../contexts/Theme';
 import { UITheme } from '../utils/theme';
@@ -9,16 +10,18 @@ import { ModalsProvider } from '../contexts/Modals';
 export default function Providers({
   children,
   theme,
-  locale
+  locale,
+  ssrLoggedInAccount
 }: {
   children: React.ReactNode;
   theme: UITheme;
   locale: string;
+  ssrLoggedInAccount: DTOAccount | null;
 }) {
   return (
     <NextIntlClientProvider locale={locale}>
       <ThemeProvider initialTheme={theme}>
-        <AccountProvider>
+        <AccountProvider ssrLoggedInAccount={ssrLoggedInAccount}>
           <ModalsProvider>
             {children}
           </ModalsProvider>
