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/api/logout/route.ts

@@ -0,0 +1,7 @@
+import { deleteUserCookies } from '@/lib/services/CookieService';
+import { redirect } from 'next/navigation';
+
+export async function GET(request: Request) {
+  await deleteUserCookies();
+  redirect('/login');
+}

client/src/app/login/login.ts

@@ -11,9 +11,11 @@ export async function login(email: string, password: string): Promise<string> {
   try {
     response = await apiLogin(email, password);
   } catch (error) {
+    redirect('/api/logout');
     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,11 @@ 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;
@@ -22,7 +22,6 @@ interface LoginValues {
 
 export default function LoginPage() {
   const [error, setError] = useState<string | undefined>(undefined);
-  const router = useRouter();
 
   const {
     register,
@@ -34,9 +33,20 @@ 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);
+
     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('/');
+    }
+  }, []);
+
   return (
     <main className={styles.main}>
       <div className={`${styles.login}`}>

client/src/app/page.tsx

@@ -12,7 +12,7 @@ export default async function Home() {
 
   if (!accessToken) {
     console.log('Dashboard broke: access token undefined');
-    redirect('/login');
+    redirect('/api/logout');
   }
 
   try {
@@ -31,6 +31,6 @@ export default async function Home() {
     );
   } catch (error) {
     console.log('Dashboard broke: error in fetching');
-    redirect('/login');
+    redirect('/api/logout');
   }
 }

client/src/components/Logout/index.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { deleteUserCookies } from '@/lib/services/CookieService';
+
+const Logout = () => {
+  // useEffect for server actions
+  useEffect(() => {
+    deleteUserCookies();
+  });
+  return <></>;
+};
+
+export default Logout;

client/src/lib/api/UserAPI.ts

@@ -15,6 +15,7 @@ import { getErrorMessage } from '../utils';
 
 export const login = async (email: string, password: string): Promise<LoginResponse> => {
   const requestUrl = `${config.api.baseUrl}${config.api.endpoints.auth.login}`;
+  console.log('requestUrl', requestUrl);
   const requestBody: LoginRequest = { email, password };
   const response = await axios.post<LoginResponse>(requestUrl, requestBody);
   return response.data;

client/src/lib/services/CookieService.ts

@@ -1,4 +1,5 @@
 import { cookies, headers } from 'next/headers';
+import { CookieType } from '../types/enums';
 
 export const getCookie = async (key: string): Promise<string> => {
   const cookie = await cookies();
@@ -9,3 +10,9 @@ export const setCookie = async (key: string, value: string): Promise<void> => {
   const cookie = await cookies();
   cookie.set(key, value);
 };
+
+export const deleteUserCookies = async (): Promise<void> => {
+  const cookieStore = await cookies();
+  cookieStore.delete(CookieType.ACCESS_TOKEN);
+  cookieStore.delete(CookieType.USER);
+};

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: