Remove stale cookies from login page

client/README.md

@@ -57,6 +57,7 @@ feedback and contributions are welcome!
 - https://nextjs.org/docs/app/getting-started/layouts-and-pages (Creating new routes)
 - We use `React-Hook-Form` for authentication: https://react-hook-form.com/
 - We use useRouter to make API calls: https://nextjs.org/docs/app/api-reference/functions/use-router
+- `NextResponse` for cookies: https://nextjs.org/docs/app/api-reference/functions/next-response
 
 ## Deploy on Vercel
 

client/src/app/login/login.ts

@@ -4,16 +4,22 @@ import { login as apiLogin } from '@/lib/api/UserAPI';
 import { setCookie } from '@/lib/services/CookieService';
 import { CookieType } from '@/lib/types/enums';
 import { getErrorMessage } from '@/lib/utils';
+import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { getCookie } from 'cookies-next';
 
 export async function login(email: string, password: string): Promise<string> {
   let response;
   try {
     response = await apiLogin(email, password);
   } catch (error) {
+    const cookieStore = await cookies();
+    cookieStore.delete(CookieType.ACCESS_TOKEN);
+    cookieStore.delete(CookieType.USER);
     return getErrorMessage(error);
   }
   await setCookie(CookieType.ACCESS_TOKEN, response.token);
   await setCookie(CookieType.USER, JSON.stringify(response.user));
+
   redirect('/');
 }

client/src/app/login/page.tsx

@@ -9,11 +9,12 @@ import TextField from '@/components/TextField';
 import Link from 'next/link';
 import Alert from '@/components/Alert';
 import { useForm, SubmitHandler } from 'react-hook-form';
-import { UserAPI } from '@/lib/api';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { getErrorMessage } from '@/lib/utils';
+import { useEffect, useState } from 'react';
 import { login } from './login';
+import { CookieType } from '@/lib/types/enums';
+import { redirect } from 'next/navigation';
+import { getCookie } from 'cookies-next';
 
 interface LoginValues {
   email: string;
@@ -34,9 +35,23 @@ export default function LoginPage() {
     // If successful, the page will redirect and the rest of this function will
     // not run
     const error = await login(credentials.email, credentials.password);
+
+    console.log(`Error: ${error}`);
     setError(error);
   };
 
+  useEffect(() => {
+    const userCookie = getCookie(CookieType.USER);
+
+    // Send the user to the dashboard page if they already have a valid cookie
+    if (userCookie) {
+      console.log('Already logged in');
+      redirect('/');
+    }
+  }, []);
+
+  const userCookie = getCookie(CookieType.USER);
+
   return (
     <main className={styles.main}>
       <div className={`${styles.login}`}>

client/src/middleware.ts

@@ -4,6 +4,7 @@ import { CookieType } from './lib/types/enums';
 export function middleware(request: NextRequest) {
   const userCookie = request.cookies.get(CookieType.USER);
 
+  // Send the user to the login page if they don't have a valid cookie
   if (!userCookie) {
     return NextResponse.redirect(new URL('/login', request.url));
   }

server/README.md

@@ -1,6 +1,7 @@
 ## Setup
 
 1. Copy `.env.example` to `.env` and fill in the values
+   1. If you are on ACM @ UCSD Dev Team, fields are available in our google drive for step 1 and 2
 2. Add Firebase Admin credentials to a file named `firebaseServiceAccountKey.json`, at the same level as the `.env` file.
 3. Start up Docker Desktop
 4. Spin up Postgres: